{"id":22171,"library":"rollup-plugin-postcss2","title":"rollup-plugin-postcss","description":"A Rollup plugin that enables seamless CSS processing via PostCSS, supporting CSS modules, custom preprocessors (Sass, Stylus, Less), and automatic extraction or injection of styles. v1.0.0 is the current stable version with a well-documented API and active maintenance from egoist. Key differentiators include built-in support for PostCSS config files, auto CSS modules for .module.* files, and a simple plugin interface that integrates deeply with Rollup's build pipeline. Alternatives like rollup-plugin-css-only offer lighter but less feature-rich integration.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/zoumiaojiang/rollup-plugin-postcss","tags":["javascript","postcss","rollup"],"install":[{"cmd":"npm install rollup-plugin-postcss2","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-postcss2","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-postcss2","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for CSS transformations","package":"postcss","optional":false},{"reason":"Peer dependency - required as the host bundler","package":"rollup","optional":false}],"imports":[{"note":"ESM default import. CommonJS require works if the plugin is used with bundlers that support CJS interop, but ESM is recommended.","wrong":"const postcss = require('rollup-plugin-postcss')","symbol":"default","correct":"import postcss from 'rollup-plugin-postcss'"},{"note":"It's a factory function, not a constructor.","wrong":"new postcss({ plugins: [] })","symbol":"postcss (function return)","correct":"const plugin = postcss({ plugins: [] })"},{"note":"With CSS modules or extract: false, the default export is a string of compiled CSS. Named exports only occur when namedExports is enabled.","wrong":"import { style } from './style.css'","symbol":"style (default export from CSS)","correct":"import style from './style.css'"}],"quickstart":{"code":"// rollup.config.js\nimport postcss from 'rollup-plugin-postcss'\n\nexport default {\n input: 'src/index.js',\n output: { dir: 'dist', format: 'esm' },\n plugins: [\n postcss({\n plugins: [\n require('autoprefixer'),\n require('cssnano')\n ],\n extract: true,\n modules: true\n })\n ]\n}","lang":"javascript","description":"Basic rollup.config.js setup with PostCSS plugin including autoprefixer, minification, CSS extraction, and CSS modules."},"warnings":[{"fix":"Update config: if modules: {} was used, it's still valid; if modules: true was used, it's still valid.","message":"v1.0 removed the 'modules' option being a boolean-only value; it now accepts an object for postcss-modules options.","severity":"breaking","affected_versions":"<1.0"},{"fix":"Set extract: true to avoid injection and get a CSS file instead, or use inject: false to prevent injection but still get the string.","message":"When extract is false (default), CSS is injected into and also available as default export from the CSS file. This can cause unexpected behaviour if you import CSS for side effects only.","severity":"gotcha","affected_versions":">=0.5"},{"fix":"Set config: false in plugin options to disable automatic config loading.","message":"The plugin automatically resolves local PostCSS config files (postcss.config.js), which may override options provided in the plugin call.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Replace namedExports: true with namedExports: (name) => name.replace(/-/g, '_') or similar.","message":"The 'namedExports' option as a boolean is deprecated; supply a function for custom name transformation.","severity":"deprecated","affected_versions":">=1.0"},{"fix":"Use @import '~bootstrap/dist/css/bootstrap'; and install bootstrap as a dependency.","message":"If using Sass/Scss imports with '~', ensure the dependency is installed in node_modules and use the correct path (relative to node_modules root).","severity":"gotcha","affected_versions":">=1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure postcss is added to plugins in rollup.config.js and that the CSS file extension is in the plugin's extensions list (default includes .css).","cause":"Rollup cannot resolve CSS imports without the plugin.","error":"Could not resolve './style.css' from 'src/index.js'"},{"fix":"Run 'npm install postcss --save-dev' or 'yarn add postcss --dev'.","cause":"PostCSS is a peer dependency that must be installed separately.","error":"You must install postcss in order to use rollup-plugin-postcss"},{"fix":"Use 'import postcss from 'rollup-plugin-postcss'' then call 'postcss({...})' as a function.","cause":"Importing the plugin incorrectly, e.g., as a constructor or destructured property.","error":"TypeError: postcss is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}