From b3ad7adbf75616f557592ffc4d3960fd1980ac51 Mon Sep 17 00:00:00 2001 From: Ivan Bondarenko Date: Wed, 10 Jun 2026 15:09:18 +0200 Subject: [PATCH 1/2] Expose published stylesheets via package.json exports The exports field only declared JS entry points, so the stylesheets in dist/stylesheets were unreachable through bundlers that honor exports encapsulation (Vite, esbuild, webpack). Importing "@37signals/lexxy/dist/stylesheets/lexxy.css" from such a bundler fails with ERR_PACKAGE_PATH_NOT_EXPORTED even though the file ships in the package. Add clean subpath exports for the four stylesheets plus a dist/stylesheets/* passthrough so existing deep-path imports keep resolving, and document the bundler import in the CSS setup guide. --- docs/css-setup.md | 17 +++++++++++++++++ package.json | 7 ++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/docs/css-setup.md b/docs/css-setup.md index dcdf346c2..5ab712f7c 100644 --- a/docs/css-setup.md +++ b/docs/css-setup.md @@ -15,6 +15,23 @@ For the CSS, you can include it with the standard Rails helper: You can copy the CSS to your project and adapt it to your needs. +## With a JavaScript bundler + +If you installed the npm package and bundle your CSS (Vite, esbuild, webpack, etc.), import the stylesheet from its subpath: + +```css +@import "@37signals/lexxy/lexxy.css"; +``` + +The following subpaths are exposed: + +| Import | Contents | +|-------------------------------------------|-----------------------------------------------------| +| `@37signals/lexxy/lexxy.css` | Everything (editor + rendered content) | +| `@37signals/lexxy/lexxy-content.css` | Rendered Action Text content only | +| `@37signals/lexxy/lexxy-editor.css` | Editor chrome only | +| `@37signals/lexxy/lexxy-variables.css` | CSS variables only, for theming | + ## Custom styles and dark mode All of Lexxy's color styles are defiend as CSS variables in `app/stylesheets/lexxy-variables.css`. This enables a straightforward way to customize Lexxy to match your application's theme. You can see an example implementation of a custom dark mode style in the Sandbox's stylesheet at `test/dummy/app/assets/stylesheets/sandbox.css`. diff --git a/package.json b/package.json index 684f4b94f..0f9c8d96a 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,12 @@ "type": "module", "exports": { ".": "./dist/lexxy.esm.js", - "./helpers": "./dist/lexxy_helpers.esm.js" + "./helpers": "./dist/lexxy_helpers.esm.js", + "./lexxy.css": "./dist/stylesheets/lexxy.css", + "./lexxy-content.css": "./dist/stylesheets/lexxy-content.css", + "./lexxy-editor.css": "./dist/stylesheets/lexxy-editor.css", + "./lexxy-variables.css": "./dist/stylesheets/lexxy-variables.css", + "./dist/stylesheets/*": "./dist/stylesheets/*" }, "files": [ "dist" From 1831a3afd060ba77f4696f50d7d6499e03b7171e Mon Sep 17 00:00:00 2001 From: Ivan Bondarenko Date: Wed, 10 Jun 2026 15:21:27 +0200 Subject: [PATCH 2/2] Drop dist/stylesheets wildcard export Keep only the four explicit stylesheet subpaths. The wildcard exposed the internal dist/ layout as public API without protecting any real consumer: bundlers already blocked the deep path before this change, and the documented CDN/unpkg usage bypasses exports entirely. --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 0f9c8d96a..7cabe4e35 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,7 @@ "./lexxy.css": "./dist/stylesheets/lexxy.css", "./lexxy-content.css": "./dist/stylesheets/lexxy-content.css", "./lexxy-editor.css": "./dist/stylesheets/lexxy-editor.css", - "./lexxy-variables.css": "./dist/stylesheets/lexxy-variables.css", - "./dist/stylesheets/*": "./dist/stylesheets/*" + "./lexxy-variables.css": "./dist/stylesheets/lexxy-variables.css" }, "files": [ "dist"