{"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,"search_vec":"'2.1.1':26 '2023':29 'alongsid':84 'automat':31 'becom':75 'built':17 'built-in':16 'camelcas':76 'class':69 'css':19,37,61 'd.ts':34 'default':81 'differenti':64 'drop':60 'e.g':72 'enabl':39 'export':67,82,86 'file':35 'fork':50 'generat':32,80 'handl':65 'hyphen':73 'import':43 'integr':53 'javascript':87 'maintain':49 'mangl':71 'modul':5,20,38,62 'name':66,70,74,85 'object':83 'plugin':3,8,13,57 'postcss':4,14,58 'prefix':78 'project':46 'provid':30 'releas':27 'rollup':2,7,12,56 'rollup-plugin-postcss':11,55 'rollup-plugin-postcss-modul':1 'safe':42 'septemb':28 'stabl':24 'support':23,63 'type':41 'type-saf':40 'typescript':22,45,52,88 'v2':59 'version':25 'wrap':10","created_at":"2026-04-27T17:03:44.448131+00:00","updated_at":"2026-04-27T17:03:44.448131+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/flying-sheep/rollup-plugin-postcss-modules","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/rollup-plugin-postcss-modules","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}