{"id":22167,"library":"rollup-plugin-postcss-modules","title":"rollup-plugin-postcss-modules","description":"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.","status":"active","version":"2.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/flying-sheep/rollup-plugin-postcss-modules","tags":["javascript","typescript"],"install":[{"cmd":"npm install rollup-plugin-postcss-modules","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-postcss-modules","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-postcss-modules","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: required for CSS processing (v8.x)","package":"postcss","optional":false}],"imports":[{"note":"ESM default export; CommonJS require works but may break type inference. TypeScript types are bundled.","wrong":"const postcss = require('rollup-plugin-postcss-modules')","symbol":"default (postcss function)","correct":"import postcss from 'rollup-plugin-postcss-modules'"},{"note":"Use type import to avoid runtime import; types are only exported for TypeScript.","wrong":"import { RollupPluginPostcssModulesOptions } from 'rollup-plugin-postcss-modules'","symbol":"RollupPluginPostcssModulesOptions","correct":"import type { RollupPluginPostcssModulesOptions } from 'rollup-plugin-postcss-modules'"},{"note":"In CommonJS, the default export is the entire module.exports, so you should not access .default.","wrong":"const postcss = require('rollup-plugin-postcss-modules').default","symbol":"postcss (named require)","correct":"const postcss = require('rollup-plugin-postcss-modules')"}],"quickstart":{"code":"// rollup.config.js\nimport postcss from 'rollup-plugin-postcss-modules';\nimport typescript from '@rollup/plugin-typescript';\nimport autoprefixer from 'autoprefixer';\n\nexport default {\n  input: 'src/index.ts',\n  output: { file: 'dist/bundle.js', format: 'es' },\n  plugins: [\n    postcss({\n      extract: true,\n      writeDefinitions: true,\n      modules: { generateScopedName: '[name]__[local]___[hash:base64:5]' },\n      plugins: [autoprefixer()],\n    }),\n    typescript(),\n  ],\n};","lang":"typescript","description":"Shows basic Rollup config with CSS modules, TypeScript definition generation, and autoprefixer."},"warnings":[{"fix":"Upgrade postcss to v8 and ensure rollup-plugin-postcss peer dependency is satisfied.","message":"Version 2.x requires postcss@8 and rollup-plugin-postcss 4.x; incompatible with postcss 7.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use default export object for dynamic access, or enable camelCase option in postcss-modules options.","message":"Named exports from CSS modules are mangled: hyphenated class names become camelCase with '$' prefix (e.g., 'my-class' becomes '$myClass$').","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Move PostCSS plugins to modules.plugins rather than top-level plugins.","message":"The plugins option in rollup-plugin-postcss-modules is deprecated; use the plugins option inside the modules object instead.","severity":"deprecated","affected_versions":">=2.1.0"},{"fix":"Ensure .css.d.ts files are not edited manually; consider version control exclusion.","message":"writeDefinitions: true overwrites existing .d.ts files without warning.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run npm install rollup-plugin-postcss --save-dev","cause":"Missing peer dependency; rollup-plugin-postcss-modules does not automatically install it.","error":"Error: Cannot find module 'rollup-plugin-postcss'"},{"fix":"Correct usage: plugins: [postcss({...})] (call the imported function)","cause":"Using rollup-plugin-postcss-modules without calling it as a function in Rollup config.","error":"TypeError: postcss is not a function"},{"fix":"Suppress lint rule or use default export (import style from './file.css') and access via style.className.","cause":"TypeScript lint warning due to generated named exports not being used; default export is used instead.","error":"'className' is declared but its value is never read."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}