Registry / web-framework / rollup-plugin-css-modules

rollup-plugin-css-modules

library0.2.0jsnpmunverified

A Rollup plugin providing support for standard CSS modules with import attributes (type: 'css'). Current stable version is 0.2.0, with no frequent release cadence yet. Key differentiators: it supports both transforming CSS modules into JavaScript that exports CSSStyleSheet instances (for browsers without native CSS module support) and bundling modules into a single CSS file with @supports sheet() wrappers for native support. It requires Rollup 4+. The plugin is lightweight, has no options besides bundledSheet, and ships TypeScript types.

web-framework

npm install rollup-plugin-css-modules

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-CSS-

rollup-plugin-css-modules

web-frameworkjavascriptv0.2.0

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.

cssModules

✓ import { cssModules } from 'rollup-plugin-css-modules'

✗ const cssModules = require('rollup-plugin-css-modules')

ESM-only package, cannot use CommonJS require(). Named export.

default import (fallback)

✓ import pkg from 'rollup-plugin-css-modules'; const { cssModules } = pkg;

✗ import cssModules from 'rollup-plugin-css-modules'

The package has a default export that is an object containing cssModules. Direct default import of the function is incorrect.

Config usage

✓ plugins: [cssModules({ bundledSheet: { fileName: 'styles.css' } })]

✗ plugins: [cssModules({ fileName: 'styles.css' })]

Arguments for bundled sheet must be nested under bundledSheet object, not flat.

Basic Rollup config using cssModules() with bundledSheet option to emit a single CSS file.

// rollup.config.js import { cssModules } from 'rollup-plugin-css-modules'; export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'es' }, plugins: [ cssModules({ bundledSheet: { fileName: 'bundle.css', }, }), ], };

Debug

Known issues

gotchaThe plugin only supports CSS modules with {type: 'css'} import attributes. Other CSS imports (e.g., without attributes) are not processed.

fix

Ensure your CSS imports include the attribute: import styles from './styles.css' with { type: 'css' };

affects: >=0.0.0

breakingPackage is ESM-only. CommonJS require() throws error.

fix

Use import syntax or dynamic import(). For CommonJS projects, consider using rollup-plugin-css-modules with ESM config.

affects: >=0.0.0

deprecatedThe @supports sheet(name) syntax is a convention, not a real CSS feature. It may not work with all CSS minifiers or tools.

fix

If your toolchain breaks because of unknown @supports, consider using the non-bundled mode (without bundledSheet option).

affects: >=0.0.0

Errors

Common errors & fixes

Error [ERR_REQUIRE_ESM]: require() of ES Module from ... not supported.

Attempting to use CommonJS require() on an ESM-only package.

fix

Switch to import { cssModules } from 'rollup-plugin-css-modules' in an ESM context, or use dynamic import.

Module "*.css" does not provide an export named 'default'

CSS import without the correct attribute or plugin not processing it.

fix

Use import styles from './file.css' with { type: 'css' }; and ensure plugin is added to config.

TypeError: cssModules is not a function

Incorrect import pattern: either default import instead of named import, or using require().

fix

Use import { cssModules } from 'rollup-plugin-css-modules'.

Upgrade

Version history

0.2.0latest on npm

Audit

Dependencies

rolluprequiredpeer dependency, requires Rollup 4.0.0+

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/justinfagnani/rollup-plugin-css-modules ↗

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