@elenajs/plugin-rollup-css 0.5.0 → 1.0.0-beta.1

package/README.md

@@ -1,10 +1,10 @@
 <div align="center">
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://elenajs.com/img/elena-dark.png" alt="Elena" width="201" height="230">
+  <source media="(prefers-color-scheme: dark)" srcset="https://elenajs.com/img/elena-dark.png" alt="Elena" width="558" height="220">
   </source>
-  <source media="(prefers-color-scheme: light)" srcset="https://elenajs.com/img/elena.png" alt="Elena" width="201" height="230">
+  <source media="(prefers-color-scheme: light)" srcset="https://elenajs.com/img/elena-light.png" alt="Elena" width="558" height="220">
   </source>
-  <img src="https://elenajs.com/img/elena.png" alt="Elena" width="201" height="230">
+  <img src="https://elenajs.com/img/elena-light.png" alt="Elena" width="558" height="220">
 </picture>
 
 ### Rollup plugin that minifies and bundles individual Elena CSS files.
@@ -30,10 +30,14 @@
 - **[Usage](#usage)**
   - **[Individual CSS files](#individual-css-files)**
   - **[CSS bundle](#css-bundle)**
-  - **[Both together](#both-together)**
+  - **[CSS Module Scripts](#css-module-scripts)**
+  - **[Static styles](#static-styles)**
+  - **[All together](#all-together)**
 - **[API](#api)**
   - **[`cssPlugin(srcDir)`](#csspluginsrcdir)**
   - **[`cssBundlePlugin(srcDir, fileName)`](#cssbundlepluginsrcdir-filename)**
+  - **[`cssModuleScriptPlugin()`](#cssmodulescriptplugin)**
+  - **[`cssStaticStylesPlugin()`](#cssstaticstylesplugin)**
   - **[`minifyCss(css, filename?)`](#minifycsscss-filename)**
 
 ## Install
@@ -78,18 +82,55 @@ export default {
 };
 ```
 
-### Both together
+### CSS Module Scripts
 
-Use both plugins to emit individual files and a concatenated bundle:
+Handle `import styles from "./component.css" with { type: "css" }` imports. The plugin intercepts these imports, minifies the CSS, and returns a JS module that constructs a `CSSStyleSheet` for Shadow DOM adoption. CSS files handled this way are automatically excluded from `cssBundlePlugin`:
 
 ```js
 // rollup.config.js
-import { cssPlugin, cssBundlePlugin } from "@elenajs/plugin-rollup-css";
+import { cssModuleScriptPlugin } from "@elenajs/plugin-rollup-css";
+
+export default {
+  input: "src/index.js",
+  output: { dir: "dist", format: "esm" },
+  plugins: [cssModuleScriptPlugin()],
+};
+```
+
+### Static styles
+
+Minify CSS strings assigned to `static styles` template literal class fields:
+
+```js
+// rollup.config.js
+import { cssStaticStylesPlugin } from "@elenajs/plugin-rollup-css";
+
+export default {
+  input: "src/index.js",
+  output: { dir: "dist", format: "esm" },
+  plugins: [cssStaticStylesPlugin()],
+};
+```
+
+### All together
+
+Use all plugins together for a complete CSS build pipeline:
+
+```js
+// rollup.config.js
+import {
+  cssPlugin,
+  cssBundlePlugin,
+  cssModuleScriptPlugin,
+  cssStaticStylesPlugin,
+} from "@elenajs/plugin-rollup-css";
 
 export default {
   input: "src/index.js",
   output: { dir: "dist", format: "esm" },
   plugins: [
+    cssModuleScriptPlugin(),
+    cssStaticStylesPlugin(),
     cssPlugin("src"),
     cssBundlePlugin("src", "bundle.css"),
   ],
@@ -108,13 +149,21 @@ Returns a Rollup plugin that finds all `.css` files in `srcDir` and emits each o
 
 ### `cssBundlePlugin(srcDir, fileName)`
 
-Returns a Rollup plugin that concatenates all `.css` files in `srcDir`, minifies the result, and emits it as a single asset.
+Returns a Rollup plugin that concatenates all `.css` files in `srcDir`, minifies the result, and emits it as a single asset. CSS files resolved by `cssModuleScriptPlugin` are automatically excluded from the bundle.
 
 | Parameter  | Type     | Description                                           |
 | ---------- | -------- | ----------------------------------------------------- |
 | `srcDir`   | `string` | Source directory to scan for `.css` files.            |
 | `fileName` | `string` | Output filename for the bundle (e.g. `"bundle.css"`). |
 
+### `cssModuleScriptPlugin()`
+
+Returns a Rollup plugin that handles CSS Module Script imports (`with { type: "css" }`). Reads the CSS file, minifies it, and returns a JS module that constructs and exports a `CSSStyleSheet` for Shadow DOM adoption. Must be listed before `@rollup/plugin-node-resolve` in the plugins array.
+
+### `cssStaticStylesPlugin()`
+
+Returns a Rollup plugin that finds `static styles` class fields with template literal values and minifies the CSS inside them.
+
 ### `minifyCss(css, filename?)`
 
 Minifies a CSS string using [Lightning CSS](https://lightningcss.dev/).

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@elenajs/plugin-rollup-css",
-  "version": "0.5.0",
+  "version": "1.0.0-beta.1",
   "description": "Rollup plugin that minifies individual CSS files and optionally concatenates them into a single bundle.",
   "author": "Elena <hi@elenajs.com>",
   "homepage": "https://elenajs.com/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/getelena/elena.git",
+    "directory": "packages/plugin-rollup-css"
+  },
+  "bugs": {
+    "url": "https://github.com/getelena/elena/issues"
+  },
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -30,5 +38,5 @@
   "devDependencies": {
     "vitest": "4.0.18"
   },
-  "gitHead": "c181af0625f691a95a5cb1ef9adb0d7f2c796eae"
+  "gitHead": "66d1e66dd467c20d7c5c70ffcb5678c6a2694690"
 }

package/src/index.js

@@ -1,10 +1,10 @@
 /**
  *  ██████████ ████
  * ░░███░░░░░█░░███
- *  ░███  █ ░  ███   ██████  ████████    ██████
- *  ░██████    ███  ███░░███░░███░░███  ░░░░░███
- *  ░███░░█    ███ ░███████  ░███ ░███   ███████
- *  ░███ ░   █ ███ ░███░░░   ░███ ░███  ███░░███
+ *  ░███  █ ░  ░███   ██████  ████████    ██████
+ *  ░██████    ░███  ███░░███░░███░░███  ░░░░░███
+ *  ░███░░█    ░███ ░███████  ░███ ░███   ███████
+ *  ░███ ░   █ ░███ ░███░░░   ░███ ░███  ███░░███
  *  ██████████ █████░░██████  ████ █████░░████████
  * ░░░░░░░░░░ ░░░░░  ░░░░░░  ░░░░ ░░░░░  ░░░░░░░░
  *
@@ -12,7 +12,7 @@
  * https://elenajs.com
  */
 
-import { basename } from "path";
+import { basename, resolve, dirname } from "path";
 import { readFileSync, readdirSync } from "fs";
 import { transform } from "lightningcss";
 
@@ -23,7 +23,7 @@ import { transform } from "lightningcss";
  * @param {string} [filename]
  * @returns {string}
  */
-function minifyCss(css, filename = "style.css") {
+export function minifyCss(css, filename = "style.css") {
   const { code } = transform({
     filename,
     code: Buffer.from(css),
@@ -32,6 +32,59 @@ function minifyCss(css, filename = "style.css") {
   return code.toString();
 }
 
+/**
+ * Rollup plugin that handles CSS Module Script imports (`with { type: "css" }`).
+ * Loads the CSS file content, minifies it, and returns a JS module that
+ * constructs and exports a CSSStyleSheet for Shadow DOM adoption. This prevents
+ * Rollup from attempting to parse CSS files as JavaScript.
+ *
+ * @returns {import("rollup").Plugin}
+ */
+export function cssModuleScriptPlugin() {
+  const PREFIX = "\0css-module:";
+
+  return {
+    name: "css-module-script",
+    resolveId(source, importer, options) {
+      if (!source.endsWith(".css") || options?.attributes?.type !== "css") {
+        return null;
+      }
+      return { id: PREFIX + resolve(dirname(importer), source) };
+    },
+    load(id) {
+      if (!id.startsWith(PREFIX)) {
+        return null;
+      }
+      const filePath = id.slice(PREFIX.length);
+      const css = minifyCss(readFileSync(filePath, "utf8"), basename(filePath));
+      return `const sheet = new CSSStyleSheet();\nsheet.replaceSync(${JSON.stringify(css)});\nexport default sheet;`;
+    },
+  };
+}
+
+/**
+ * Rollup plugin that minifies CSS strings assigned to `static styles` class fields.
+ *
+ * @returns {import("rollup").Plugin}
+ */
+export function cssStaticStylesPlugin() {
+  return {
+    name: "css-static-styles",
+    transform(code, id) {
+      if (!id.endsWith(".js") && !id.endsWith(".ts")) {
+        return null;
+      }
+      if (!code.includes("static styles")) {
+        return null;
+      }
+      const newCode = code.replace(/static\s+styles\s*=\s*`([\s\S]*?)`/g, (_match, css) => {
+        return `static styles = \`${minifyCss(css)}\``;
+      });
+      return newCode !== code ? { code: newCode } : null;
+    },
+  };
+}
+
 /**
  * Rollup plugin that copies and minifies individual CSS files from `srcDir`
  * into the output directory.
@@ -48,6 +101,9 @@ export function cssPlugin(srcDir) {
         .map(f => `${srcDir}/${f}`);
 
       for (const file of cssFiles) {
+        if (this.addWatchFile) {
+          this.addWatchFile(resolve(file));
+        }
         const source = minifyCss(readFileSync(file, "utf8"), basename(file));
         this.emitFile({ type: "asset", fileName: basename(file), source });
       }
@@ -67,9 +123,17 @@ export function cssBundlePlugin(srcDir, fileName) {
   return {
     name: "css-bundle",
     generateBundle() {
+      const shadowDomCssFiles = new Set();
+      for (const id of this.getModuleIds()) {
+        if (id.startsWith("\0css-module:")) {
+          shadowDomCssFiles.add(id.slice("\0css-module:".length));
+        }
+      }
+
       const cssFiles = readdirSync(srcDir, { recursive: true })
         .filter(f => f.endsWith(".css"))
-        .map(f => `${srcDir}/${f}`);
+        .map(f => resolve(`${srcDir}/${f}`))
+        .filter(f => !shadowDomCssFiles.has(f));
 
       const source = minifyCss(cssFiles.map(f => readFileSync(f, "utf8")).join("\n"), fileName);