rollup-plugin-css-bundle

1.0.4 verified Mon Apr 27 auth: no javascript maintenance

A Rollup plugin that collects all imported CSS files and bundles them into a single external CSS file. Version 1.0.4 (latest as of 2023) is stable but unmaintained; no updates since 2019. It preserves CSS import order and supports include/exclude filters and a transform option (e.g., for PostCSS). Unlike alternatives like rollup-plugin-postcss, it does not generate source maps, inline CSS into JS, or handle CSS modules. Simple, single-purpose tool.

Common errors

error Error: Cannot find module 'rollup-plugin-css-bundle' ↓

cause Plugin not installed as a dev dependency.

fix

Run: npm install --save-dev rollup-plugin-css-bundle

error TypeError: cssbundle is not a function ↓

cause Default import used incorrectly; require returns an object.

fix

Use import cssbundle from 'rollup-plugin-css-bundle' or const cssbundle = require('rollup-plugin-css-bundle').default

Warnings

gotcha Plugin does not generate CSS source maps. ↓

fix Use an alternative plugin like rollup-plugin-postcss if source maps are needed.

gotcha Plugin only extracts CSS into a separate file; it does not inline CSS into JavaScript. ↓

fix If you need inline CSS, use rollup-plugin-postcss or rollup-plugin-styles.

gotcha CSS import order is preserved but may depend on module resolution order. ↓

fix Ensure CSS imports are ordered explicitly by importing the CSS files in the desired sequence.

Install

npm install rollup-plugin-css-bundle

yarn add rollup-plugin-css-bundle

pnpm add rollup-plugin-css-bundle

Imports

default
wrong
```
const cssbundle = require('rollup-plugin-css-bundle')
```
correct
```
import cssbundle from 'rollup-plugin-css-bundle'
```
ESM default import is idiomatic; CJS require works but may not be typical in Rollup configs.

Quickstart

Shows minimal usage of rollup-plugin-css-bundle in a Rollup config to bundle all imported CSS into an external file.

// rollup.config.js
import cssbundle from 'rollup-plugin-css-bundle';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
  },
  plugins: [cssbundle()],
};