Registry / serialization / rollup-plugin-css-chunks

rollup-plugin-css-chunks

library2.0.3jsnpmunverified

A Rollup plugin that extracts imported CSS files into separate output chunks, enabling code splitting of stylesheets alongside JavaScript. Version 2.0.3 requires Rollup >=2.29.0. Key differentiators include support for CSS sourcemaps, configurable chunk naming, and optional CSS @import injection for dependency ordering. It works with Rollup's code-splitting output to produce CSS files per entry or async chunk, complementing rollup-plugin-extract-bundle-tree for JS/CSS chunk dependency mapping.

serialization

npm install rollup-plugin-css-chunks

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-CSS-

rollup-plugin-css-chunks

serializationjavascriptv2.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import css from 'rollup-plugin-css-chunks';

✗ const css = require('rollup-plugin-css-chunks');

ESM-only package; requires Rollup to run in ESM mode or using @rollup/plugin-node-resolve

css_chunk_url

✓ import css_chunk_url from './home.css';

✗ const { default: css_chunk_url } = require('./home.css');

The plugin transforms CSS imports to return the chunk URL as a default string export

RollupPluginCssChunksOptions

✓ import type { RollupPluginCssChunksOptions } from 'rollup-plugin-css-chunks';

TypeScript type export available for configuration options

Basic Rollup configuration using rollup-plugin-css-chunks to emit CSS files per entry and async chunks.

// rollup.config.js import css from 'rollup-plugin-css-chunks'; export default { input: 'src/main.js', output: { dir: 'public', format: 'esm' }, plugins: [ css({ chunkFileNames: '[name]-[hash].css', entryFileNames: '[name].css', sourcemap: false, emitFiles: true }) ] };

Debug

Known issues

breakingRequires Rollup >=2.29.0 due to plugin API changes; older Rollup versions will fail.

fix

Upgrade Rollup to version 2.29.0 or later.

affects: <2.29.0

gotchaCSS imports must be default imports; named imports (e.g., import { url } from './home.css') are not supported.

fix

Use import url from './home.css' instead of named imports.

affects: >=2.0.0

gotchaThe plugin does not handle CSS preprocessing (Sass, Less); those must be handled by separate plugins (e.g., rollup-plugin-sass) before this plugin.

fix

Chain a CSS preprocessor plugin before rollup-plugin-css-chunks in the Rollup plugins array.

affects: >=2.0.0

deprecatedThe option 'injectImports' defaults to false since v2; setting it to true may cause duplicate @imports.

fix

Leave injectImports as false unless you are certain about the import ordering behavior.

affects: >=2.0.0

Errors

Common errors & fixes

Error: Cannot find module 'rollup-plugin-css-chunks'

Package not installed or misconfigured in Node.js require resolution (CJS instead of ESM).

fix

Install the package: npm install --save-dev rollup-plugin-css-chunks. Ensure rollup.config.js uses ESM (e.g., type: module in package.json or .mjs extension).

TypeError: css is not a function

Using CommonJS require() on an ESM-only package; the default export is not available via require().

fix

Switch rollup.config.js to ESM syntax: import css from 'rollup-plugin-css-chunks';

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

CSS is being imported in JavaScript but rollup-plugin-css-chunks is not added to the plugins array.

fix

Add the plugin to the rollup.config.js: import css from 'rollup-plugin-css-chunks'; and include it in the plugins array.

Upgrade

Version history

2.0.3latest on npm

Audit

Dependencies

rollupoptionalpeer dependency required for plugin functionality

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/domingues/rollup-plugin-css-chunks ↗

packagehttps://www.npmjs.com/package/rollup-plugin-css-chunks ↗