diff --git a/.changeset/email-editor-scoped-stylesheet.md b/.changeset/email-editor-scoped-stylesheet.md new file mode 100644 index 00000000..c7433c7e --- /dev/null +++ b/.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. diff --git a/packages/email-editor/README.md b/packages/email-editor/README.md index d40738d0..6388bd5a 100644 --- a/packages/email-editor/README.md +++ b/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/), diff --git a/packages/email-editor/package.json b/packages/email-editor/package.json index 834f5986..7746f4ba 100644 --- a/packages/email-editor/package.json +++ b/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", diff --git a/packages/email-editor/tsup.config.ts b/packages/email-editor/tsup.config.ts index d7a2a573..6dfafa4b 100644 --- a/packages/email-editor/tsup.config.ts +++ b/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, }));