Rollup plugin that minifies and bundles individual Elena CSS files

Table of contents

• Install
• Usage
  • Individual CSS files
  • CSS bundle
  • CSS Module Scripts
  • Static styles
  • All together
• API
  • cssPlugin(srcDir)
  • cssBundlePlugin(srcDir, fileName)
  • cssModuleScriptPlugin()
  • cssStaticStylesPlugin()
  • minifyCss(css, filename?)

Install

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:

// 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:

// 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:

// 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:

// 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:

// 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.

| 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