Registry / web-framework / rollup-plugin-postcss2

rollup-plugin-postcss2

library1.0.0jsnpmunverified

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.

web-framework serialization

npm install rollup-plugin-postcss2

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-POST

rollup-plugin-postcss2

web-frameworkjavascriptv1.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

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

default

✓ import postcss from 'rollup-plugin-postcss'

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

ESM default import. CommonJS require works if the plugin is used with bundlers that support CJS interop, but ESM is recommended.

postcss (function return)

✓ const plugin = postcss({ plugins: [] })

✗ new postcss({ plugins: [] })

It's a factory function, not a constructor.

style (default export from CSS)

✓ import style from './style.css'

✗ import { style } from './style.css'

With CSS modules or extract: false, the default export is a string of compiled CSS. Named exports only occur when namedExports is enabled.

Basic rollup.config.js setup with PostCSS plugin including autoprefixer, minification, CSS extraction, and CSS modules.

// rollup.config.js import postcss from 'rollup-plugin-postcss' export default { input: 'src/index.js', output: { dir: 'dist', format: 'esm' }, plugins: [ postcss({ plugins: [ require('autoprefixer'), require('cssnano') ], extract: true, modules: true }) ] }

Debug

Known issues

breakingv1.0 removed the 'modules' option being a boolean-only value; it now accepts an object for postcss-modules options.

fix

Update config: if modules: {} was used, it's still valid; if modules: true was used, it's still valid.

affects: <1.0

gotchaWhen extract is false (default), CSS is injected into <head> and also available as default export from the CSS file. This can cause unexpected behaviour if you import CSS for side effects only.

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.

affects: >=0.5

gotchaThe plugin automatically resolves local PostCSS config files (postcss.config.js), which may override options provided in the plugin call.

fix

Set config: false in plugin options to disable automatic config loading.

affects: >=1.0

deprecatedThe 'namedExports' option as a boolean is deprecated; supply a function for custom name transformation.

fix

Replace namedExports: true with namedExports: (name) => name.replace(/-/g, '_') or similar.

affects: >=1.0

gotchaIf using Sass/Scss imports with '~', ensure the dependency is installed in node_modules and use the correct path (relative to node_modules root).

fix

Use @import '~bootstrap/dist/css/bootstrap'; and install bootstrap as a dependency.

affects: >=1.0

Errors

Common errors & fixes

Could not resolve './style.css' from 'src/index.js'

Rollup cannot resolve CSS imports without the plugin.

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).

You must install postcss in order to use rollup-plugin-postcss

PostCSS is a peer dependency that must be installed separately.

fix

Run 'npm install postcss --save-dev' or 'yarn add postcss --dev'.

TypeError: postcss is not a function

Importing the plugin incorrectly, e.g., as a constructor or destructured property.

fix

Use 'import postcss from 'rollup-plugin-postcss'' then call 'postcss({...})' as a function.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

postcssrequiredCore dependency for CSS transformations

rolluprequiredPeer dependency - required as the host bundler

Agent activity

4 hits · last 30 days

node

Resources

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

packagehttps://www.npmjs.com/package/rollup-plugin-postcss2 ↗