rollup-plugin-css-export

Extracts and exports all CSS files that have been imported as a module, preserving or not the original path of the asset.

In addition to this a styles property can be added to the metadata of each entry that imports one or more CSS files.

The styles property contains a list of paths to the generated assets which can, for example, be used by other plugins to generate HTML template.

Installation

With yarn:

yarn add --dev rollup-plugin-css-export

With npm:

npm install --save-dev rollup-plugin-css-export

If you want to import libraries directly from node_modules (e.g. normalize.css) you may need to install the @rollup/plugin-node-resolve plugin.

Options

Name	Type	Default	Description
metaKey?	string | Symbol	undefined	The name of the metadata key. When the value is nullish the plugin will not process or export any metadata.
include?	String | RegExp | Array[...String|RegExp]	**/*.css	See pluginutils for more info
exclude?	String | RegExp | Array[...String|RegExp]	undefined	See pluginutils for more info

Basic example

red.js, blue.js and purple.js can be found at https://github.com/skarab42/rollup-plugin-css-export/tree/main/test/fixtures.

import css from "rollup-plugin-css-export";

export default {
  input: ["src/red.js", "src/blue.js", "src/purple.js"],
  output: {
    dir: "dist",
    // preserveModules: true,
  },
  plugins: [css()],
};

Outputs with preserveModules = false

📦dist
 ┣ 📂assets
 ┃ ┣ 📜blue-8e2a6dc2.css
 ┃ ┣ 📜red-443842c2.css
 ┃ ┗ 📜reset-be7c786b.css
 ┣ 📜blue.js
 ┣ 📜purple.js
 ┗ 📜red.js

Outputs with preserveModules = true

📦dist
 ┣ 📂assets
 ┃ ┣ 📂lib
 ┃ ┃ ┗ 📜reset-5af228c6.css
 ┃ ┣ 📜blue-8e2a6dc2.css
 ┃ ┗ 📜red-443842c2.css
 ┣ 📜blue.js
 ┣ 📜purple.js
 ┗ 📜red.js

Accessing metadata from another plugin

Metadata are not directly accessible in the bundle. You have to retrieve the extended information from the module with the this.getModuleInfo method.

import css from "rollup-plugin-css-export";

const metaKey = Symbol("styles");

export default {
  input: ["src/red.js", "src/blue.js", "src/purple.js"],
  output: {
    dir: "dist",
    // preserveModules: true,
  },
  plugins: [
    css({ metaKey }),
    {
      name: "your-plugin",
      generateBundle(_, bundle) {
        Object.entries(bundle).forEach(([id, entry]) => {
          if (entry.isEntry) {
            const info = this.getModuleInfo(entry.facadeModuleId);
            console.log("META:", id, info.meta[metaKey]);
          }
        });
      },
    },
  ],
};

Outputs with preserveModules = false

.../red.js    [ 'assets/reset-be7c786b.css', 'assets/red-443842c2.css' ]
.../blue.js   [ 'assets/reset-be7c786b.css', 'assets/blue-8e2a6dc2.css' ]
.../purple.js [ 'assets/reset-be7c786b.css', 'assets/red-443842c2.css', 'assets/blue-8e2a6dc2.css' ]

Outputs with preserveModules = true

.../red.js    [ 'assets/lib/reset-be7c786b.css', 'assets/red-443842c2.css' ]
.../blue.js   [ 'assets/lib/reset-be7c786b.css', 'assets/blue-8e2a6dc2.css' ]
.../purple.js [ 'assets/lib/reset-be7c786b.css', 'assets/red-443842c2.css', 'assets/blue-8e2a6dc2.css' ]