{"id":22170,"library":"rollup-plugin-postcss","title":"rollup-plugin-postcss","description":"Rollup plugin providing seamless integration with PostCSS. The current stable version is v4.0.2 (released Nov 2021, engines node >=10). It requires PostCSS 8.x as a peer dependency. Key differentiators: supports CSS modules, automatic PostCSS config loading, inject CSS into or extract to file, and works with Sass, Less, Stylus via dependencies. Breaking change in v3: only supports Rollup v2, and extract path must be absolute. v4 upgraded to PostCSS 8. Also provides TypeScript types.","status":"active","version":"4.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/egoist/rollup-plugin-postcss","tags":["javascript","postcss","rollup","typescript"],"install":[{"cmd":"npm install rollup-plugin-postcss","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-postcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-postcss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency (required 8.x)","package":"postcss","optional":false},{"reason":"required as host bundler","package":"rollup","optional":false}],"imports":[{"note":"Default export is the plugin factory function. CJS require works in v4 but ESM is recommended.","wrong":"const postcss = require('rollup-plugin-postcss')","symbol":"postcss","correct":"import postcss from 'rollup-plugin-postcss'"},{"note":"Type-only import available since v4.0.0 with shipped TypeScript types.","wrong":null,"symbol":"PostCSSPluginConfig","correct":"import type { PostCSSPluginConfig } from 'rollup-plugin-postcss'"},{"note":"In CJS, the default export is under .default. Simple require() without .default returns an object if transpiled incorrectly.","wrong":"const postcss = require('rollup-plugin-postcss')","symbol":"postcss (CommonJS)","correct":"const postcss = require('rollup-plugin-postcss').default"}],"quickstart":{"code":"// rollup.config.js\nimport postcss from 'rollup-plugin-postcss';\nimport autoprefixer from 'autoprefixer';\n\nexport default {\n input: 'src/index.js',\n output: {\n dir: 'dist',\n format: 'esm'\n },\n plugins: [\n postcss({\n plugins: [autoprefixer()],\n modules: true,\n extract: true,\n minimize: true\n })\n ]\n};","lang":"typescript","description":"Basic Rollup config using rollup-plugin-postcss with Autoprefixer, CSS modules, extraction, and minimization."},"warnings":[{"fix":"Use absolute paths for extract option, or stay on v2.x if using Rollup 1.x.","message":"v3.0 only supports Rollup v2, and extract path must be absolute. Relative paths in extract option will break.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Upgrade PostCSS to version 8.x. Update any PostCSS plugins to be compatible with PostCSS 8.","message":"v4.0.0 upgrade to PostCSS 8.x. PostCSS 7.x is no longer supported.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"When upgrading to v3+, change extract option to an absolute path using path.resolve().","message":"In v2, extract: true or a relative path generates file relative to bundle.js. In v3+, extract path should be absolute or resolve via path.resolve.","severity":"deprecated","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Ensure the desired Sass implementation is installed; to use node-sass, uninstall dart-sass.","message":"When using Sass, this plugin prioritizes dart-sass over node-sass. If both are installed, dart-sass will be used.","severity":"gotcha","affected_versions":">=4.0.2"},{"fix":"Set autoModules: false to disable automatic CSS modules, or adjust file naming conventions.","message":"CSS modules are automatically enabled for `.module.css` files by default (autoModules: true). This may unintentionally process files you expect to be global.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use path.resolve(__dirname, 'dist/styles.css') instead of 'dist/styles.css'.","cause":"In v3+, relative paths for extract are not allowed; only absolute or boolean.","error":"Error: The `extract` option must be a boolean or an absolute path."},{"fix":"Update PostCSS to 8.x and ensure all PostCSS plugins are compatible.","cause":"Installed v4 of rollup-plugin-postcss with PostCSS 7.x plugin.","error":"Error: PostCSS plugin postcss-xxx requires PostCSS 8."},{"fix":"Run npm install rollup-plugin-postcss --save-dev.","cause":"Package not installed or missing in node_modules.","error":"Cannot find module 'rollup-plugin-postcss'."},{"fix":"Provide at least one PostCSS plugin in the plugins array, even if empty.","cause":"The plugin options object is empty or plugins array is omitted.","error":"Error: You must specify a PostCSS plugin."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}