rollup-plugin-css-module

0.0.25 verified Mon Apr 27 auth: no javascript

A Rollup plugin for handling CSS Modules with PostCSS. Current stable version is 0.0.25, released with limited update cadence (sporadic). It provides basic CSS Modules support in Rollup bundles by leveraging PostCSS for transformation. Compared to alternatives like rollup-plugin-postcss, this plugin is lighter but less maintained, with fewer configuration options and no built-in CSS extraction. Suitable for simple projects that need CSS Modules without extra features.

Common errors

error Error: Cannot find module 'postcss' ↓

cause PostCSS is not installed, but it's a peer dependency.

fix

npm install postcss --save-dev

error TypeError: cssModule is not a function ↓

cause Using named import instead of default import.

fix

Use import cssModule from 'rollup-plugin-css-module'

error Error: Unexpected behavior with CSS modules (class names not transformed) ↓

cause Plugin not included or not matching the CSS files.

fix

Ensure plugin is in plugins array and include pattern matches your CSS.

Warnings

deprecated The `insert` option defaults to true but may be deprecated in future; prefer explicit setting. ↓

fix Set insert: true explicitly or inline CSS via other means.

gotcha Plugin does not automatically include/exclude files; must specify `include` and `exclude` patterns. ↓

fix Add include/exclude patterns matching your CSS file names.

gotcha When using together with rollup-plugin-postcss, order may cause conflicts. Only one CSS plugin should handle modules. ↓

fix Disable CSS modules in rollup-plugin-postcss if both are used.

Install

npm install rollup-plugin-css-module

yarn add rollup-plugin-css-module

pnpm add rollup-plugin-css-module

Imports

cssModule

wrong

const cssModule = require('rollup-plugin-css-module')

correct

import cssModule from 'rollup-plugin-css-module'

Plugin uses default export. CJS require works but ESM preferred.

default export

wrong

import { cssModule } from 'rollup-plugin-css-module'

correct

import cssModule from 'rollup-plugin-css-module'

Named import does not exist; use default import.

Plugin (with config)
wrong
```
cssModule.insert({ insert: true })
```
correct
```
cssModule({ insert: true })
```
Plugin is a function, not an object with methods.

Quickstart

Shows basic Rollup config with css-module plugin, using include/exclude patterns and insert mode.

import cssModule from 'rollup-plugin-css-module';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'esm'
  },
  plugins: [
    cssModule({
      include: '**/*.css',
      exclude: '**/global.css',
      insert: true
    }),
    resolve(),
    commonjs()
  ]
};