rollup-postcss

library3.0.9jsnpmunverified

A Rollup plugin that seamlessly integrates PostCSS processing into your build pipeline, supporting CSS imports, CSS modules, Sass/Stylus/Less preprocessors, and CSS extraction. Version 3.0.9 is current stable, requires Rollup v2, and uses the modern Sass API to avoid deprecation warnings. It ships TypeScript types and defaults to injecting CSS into the DOM. Key differentiators: simple setup, automatic local PostCSS config detection, and support for CSS-in-JS via style export.

devops

npm install rollup-postcss

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ROLLUP-POSTCSS

rollup-postcss

devopsjavascriptv3.0.9

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (postcss plugin function)

✓ import postcss from 'rollup-postcss'

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

ESM import; the package exports a single function as default.

postcss (type)

✓ import type { PostCSSOptions } from 'rollup-postcss'

TypeScript types are bundled; use import type for option typing.

require

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

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

CJS require works but .default is not needed; the default export is the function.

Minimal setup to process CSS with PostCSS and inject into HTML head via Rollup.

// rollup.config.js (ESModule) import postcss from 'rollup-postcss' export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'esm' }, plugins: [ postcss({ plugins: [], extensions: ['.css', '.sss', '.pcss'], inject: true, modules: false }) ] } // src/style.css body { background: red; } // src/index.js import './style.css' console.log('CSS injected!')

Debug

Known issues

breakingv3.0 only supports Rollup v2; extract path must be absolute or relative to bundle root. Relative extract paths outside bundle directory are not allowed.

fix

Use Rollup v2 and provide absolute paths for extract option or paths relative to bundle output.

affects: >=3.0.0 <4.0.0

deprecatedV2 prints deprecation warnings with Rollup v2.

fix

Upgrade to v3 for Rollup v2 compatibility.

affects: >=2.0.0 <3.0.0

gotchaBy default, CSS is injected into <head> and the default import exports the CSS string. If extract:true, injection is disabled and no default export is provided.

fix

Set inject:false if you want to handle CSS injection yourself.

affects: >=1.0.0

gotchaWhen using Sass/Scss, the plugin resolves imports with '~' prefix to node_modules, similar to sass-loader.

fix

Use '@import "~bootstrap/dist/css/bootstrap";' in your .scss files.

affects: >=1.0.0

gotchaThe autoModules option (default true) automatically enables CSS modules for files ending with .module.css, etc. This may process files unexpectedly if not desired.

fix

Set autoModules: false to disable automatic CSS modules.

affects: >=1.0.0

Errors

Common errors & fixes

Error: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

Using an older version of rollup-postcss (pre-3.0) with Dart Sass 1.45+ triggers deprecation warnings.

fix

Upgrade to rollup-postcss@3 which uses the modern sass API.

Error: 'extract' path must be an absolute path or relative to bundle output directory.

In v3, extract path that is relative and points outside the bundle output directory is rejected.

fix

Use an absolute path or a path relative to the output file, e.g., extract: path.resolve('dist/my.css').

Error: Cannot find module 'postcss'

Missing PostCSS peer dependency.

fix

Install postcss: npm install --save-dev postcss

Error: You cannot use this plugin without Rollup.

Using rollup-postcss outside a Rollup build context.

fix

Ensure you are using the plugin within a rollup.config.js or programmatic Rollup build.

Upgrade

Version history

3.0.9latest on npm

Audit

Dependencies

postcssrequiredPeer dependency required for PostCSS processing.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/alfed7/rollup-plugin-postcss ↗

packagerollup-postcss ↗

homepagehttps://github.com/alfed7/rollup-plugin-postcss#readme ↗