@elenajs/plugin-rollup-css 0.6.0 → 1.0.0-beta.2

package/README.md

@@ -0,0 +1,184 @@
+<div align="center">
+<picture>
+  <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-light.png" alt="Elena" width="558" height="220">
+  </source>
+  <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.
+
+<br/>
+
+<a href="https://arielsalminen.com"><img src="https://img.shields.io/badge/creator-@arielle-F95B1F" alt="Creator @arielle"/></a>
+<a href="https://www.npmjs.com/package/@elenajs/plugin-rollup-css"><img src="https://img.shields.io/npm/v/@elenajs/plugin-rollup-css.svg" alt="Latest version on npm" /></a>
+<a href="https://github.com/getelena/elena/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-yellow.svg" alt="Elena is released under the MIT license." /></a>
+<a href="https://github.com/getelena/elena/actions/workflows/tests.yml"><img src="https://github.com/getelena/elena/actions/workflows/tests.yml/badge.svg" alt="Tests status" /></a>
+
+</div>
+
+<br/>
+
+<p align="center"><strong>@elenajs/plugin-rollup-css</strong> is a <a href="https://rollupjs.org">Rollup</a> plugin that minifies individual Elena CSS files and optionally concatenates them into a single bundle. Built for <a href="https://elenajs.com">Elena</a> Progressive Web Component libraries, but works with any Rollup project.</p>
+
+<br/>
+
+## Table of contents
+
+- **[Install](#install)**
+- **[Usage](#usage)**
+  - **[Individual CSS files](#individual-css-files)**
+  - **[CSS bundle](#css-bundle)**
+  - **[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
+
+```bash
+npm install --save-dev @elenajs/plugin-rollup-css
+```
+
+**Peer dependency:** `rollup >= 4.0.0`
+
+## Usage
+
+### Individual CSS files
+
+Emit minified copies of each CSS file from your source directory:
+
+```js
+// rollup.config.js
+import { cssPlugin } from "@elenajs/plugin-rollup-css";
+
+export default {
+  input: "src/index.js",
+  output: { dir: "dist", format: "esm" },
+  plugins: [cssPlugin("src")],
+};
+```
+
+This scans `src/` for `.css` files and emits each one (minified) into the output directory, preserving the original file name.
+
+### CSS bundle
+
+Concatenate all CSS files into a single minified bundle:
+
+```js
+// rollup.config.js
+import { cssBundlePlugin } from "@elenajs/plugin-rollup-css";
+
+export default {
+  input: "src/index.js",
+  output: { dir: "dist", format: "esm" },
+  plugins: [cssBundlePlugin("src", "bundle.css")],
+};
+```
+
+### CSS Module Scripts
+
+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 { 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"),
+  ],
+};
+```
+
+## API
+
+### `cssPlugin(srcDir)`
+
+Returns a Rollup plugin that finds all `.css` files in `srcDir` and emits each one as a minified asset.
+
+| Parameter | Type     | Description                                |
+| --------- | -------- | ------------------------------------------ |
+| `srcDir`  | `string` | Source directory to scan for `.css` files. |
+
+### `cssBundlePlugin(srcDir, fileName)`
+
+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/).
+
+| Parameter   | Type     | Description                            |
+| ----------- | -------- | -------------------------------------- |
+| `css`       | `string` | The CSS source to minify.              |
+| `filename?` | `string` | Optional filename for error reporting. |
+
+**Returns:** `string`, the minified CSS.
+
+## License
+
+MIT
+
+## Copyright
+
+Copyright © 2026 [Ariel Salminen](https://arielsalminen.com)

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@elenajs/plugin-rollup-css",
-  "version": "0.6.0",
+  "version": "1.0.0-beta.2",
   "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"
@@ -25,10 +33,10 @@
     "rollup": ">=4.0.0"
   },
   "dependencies": {
-    "lightningcss": "^1.31.1"
+    "lightningcss": "1.32.0"
   },
   "devDependencies": {
-    "vitest": "4.0.18"
+    "vitest": "4.1.0"
   },
-  "gitHead": "b4c41483e5196b542a1b87361f7d37222737fccc"
+  "gitHead": "18e13f305c8823f7633c739f2ec61cec2420267b"
 }

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);