fix(email-editor): ship the editor's own stylesheet for Tailwind apps

.changeset/email-editor-scoped-stylesheet.md

@@ -0,0 +1,5 @@
+---
+"@sendlit/email-editor": patch
+---
+
+Apps that build Tailwind themselves can now load just the editor's own stylesheet, `@sendlit/email-editor/editor.css`, instead of `styles.css`. Since 0.3.0 the editor's look comes from plain CSS that a Tailwind `@source` scan can't produce, and `styles.css` also carries a full Tailwind build, base reset and theme variables that restyle the host app. The README now explains which to use.

packages/email-editor/README.md

@@ -200,13 +200,22 @@ the components:
 For the `neutral` and `dark` themes, use `.sle.t-neutral` or `.sle.t-dark` as
 the selector instead.
 
-If your app already uses Tailwind CSS and you'd rather it built the styles,
-point it at the package instead:
+If your app already uses Tailwind CSS, don't load `styles.css`: it carries its
+own Tailwind build, base reset and theme variables, which would restyle the
+rest of your app. Instead, let your Tailwind build the editor's utility classes
+and load only the editor's own stylesheet:
+
+```ts
+import "@sendlit/email-editor/editor.css";
+```
 
 - **Tailwind v4:** add `@source "./node_modules/@sendlit/email-editor";` to your CSS.
 - **Tailwind v3:** add `"./node_modules/@sendlit/email-editor"` to `content` in
   your Tailwind config.
 
+`editor.css` only styles the editor (its rules are scoped to `.sle`), so it is
+safe to load next to your own styles.
+
 ## Built with
 
 [React](https://react.dev/), [React Email](https://react.email/),

packages/email-editor/package.json

@@ -23,6 +23,7 @@
       "default": "./dist/index.mjs"
     },
     "./styles.css": "./dist/index.css",
+    "./editor.css": "./dist/editor.css",
     "./blocks": {
       "types": "./dist/blocks/index.d.ts",
       "import": "./dist/blocks/index.mjs",

packages/email-editor/tsup.config.ts

@@ -1,3 +1,4 @@
+import { copyFile } from "node:fs/promises";
 import { defineConfig, type Options } from "tsup";
 
 export default defineConfig((options: Options) => ({
@@ -9,5 +10,10 @@ export default defineConfig((options: Options) => ({
   minify: true,
   clean: true,
   external: ["react"],
+  // The editor's own stylesheet, on its own, for apps that build Tailwind
+  // themselves: `styles.css` also carries a full Tailwind build and theme.
+  onSuccess: async () => {
+    await copyFile("src/editor.css", "dist/editor.css");
+  },
   ...options,
 }));