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

rollup-plugin-postcss-modules

library2.1.1jsnpmunverified

A Rollup plugin that wraps rollup-plugin-postcss with built-in CSS Modules and TypeScript support. Stable version 2.1.1, released September 2023. Provides automatic generation of .d.ts files for CSS modules, enabling type-safe imports in TypeScript projects. The only maintained fork with TypeScript integration after rollup-plugin-postcss v2 dropped CSS Modules support. Differentiator: handles named exports with class name mangling (e.g., hyphenated names become camelCase with $ prefix) and generates default export objects alongside named exports.

web-framework devops

npm install rollup-plugin-postcss-modules

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-POST

rollup-plugin-postcss-modules

web-frameworkjavascriptv2.1.1

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 (postcss function)

✓ import postcss from 'rollup-plugin-postcss-modules'

✗ const postcss = require('rollup-plugin-postcss-modules')

ESM default export; CommonJS require works but may break type inference. TypeScript types are bundled.

RollupPluginPostcssModulesOptions

✓ import type { RollupPluginPostcssModulesOptions } from 'rollup-plugin-postcss-modules'

✗ import { RollupPluginPostcssModulesOptions } from 'rollup-plugin-postcss-modules'

Use type import to avoid runtime import; types are only exported for TypeScript.

postcss (named require)

✓ const postcss = require('rollup-plugin-postcss-modules')

✗ const postcss = require('rollup-plugin-postcss-modules').default

In CommonJS, the default export is the entire module.exports, so you should not access .default.

Shows basic Rollup config with CSS modules, TypeScript definition generation, and autoprefixer.

// rollup.config.js import postcss from 'rollup-plugin-postcss-modules'; import typescript from '@rollup/plugin-typescript'; import autoprefixer from 'autoprefixer'; export default { input: 'src/index.ts', output: { file: 'dist/bundle.js', format: 'es' }, plugins: [ postcss({ extract: true, writeDefinitions: true, modules: { generateScopedName: '[name]__[local]___[hash:base64:5]' }, plugins: [autoprefixer()], }), typescript(), ], };

Debug

Known issues

breakingVersion 2.x requires postcss@8 and rollup-plugin-postcss 4.x; incompatible with postcss 7.

fix

Upgrade postcss to v8 and ensure rollup-plugin-postcss peer dependency is satisfied.

affects: >=2.0.0

gotchaNamed exports from CSS modules are mangled: hyphenated class names become camelCase with '$' prefix (e.g., 'my-class' becomes '$myClass$').

fix

Use default export object for dynamic access, or enable camelCase option in postcss-modules options.

affects: >=2.0.0

deprecatedThe plugins option in rollup-plugin-postcss-modules is deprecated; use the plugins option inside the modules object instead.

fix

Move PostCSS plugins to modules.plugins rather than top-level plugins.

affects: >=2.1.0

gotchawriteDefinitions: true overwrites existing .d.ts files without warning.

fix

Ensure .css.d.ts files are not edited manually; consider version control exclusion.

affects: >=2.0.0

Errors

Common errors & fixes

Error: Cannot find module 'rollup-plugin-postcss'

Missing peer dependency; rollup-plugin-postcss-modules does not automatically install it.

fix

Run npm install rollup-plugin-postcss --save-dev

TypeError: postcss is not a function

Using rollup-plugin-postcss-modules without calling it as a function in Rollup config.

fix

Correct usage: plugins: [postcss({...})] (call the imported function)

'className' is declared but its value is never read.

TypeScript lint warning due to generated named exports not being used; default export is used instead.

fix

Suppress lint rule or use default export (import style from './file.css') and access via style.className.

Upgrade

Version history

2.1.1latest on npm

Audit

Dependencies

postcssrequiredPeer dependency: required for CSS processing (v8.x)

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/flying-sheep/rollup-plugin-postcss-modules ↗

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