rollup-plugin-postcss-config

2.0.0 verified Mon Apr 27 auth: no javascript maintenance

Transform PostCSS in Rollup using options from a postcss config file (postcss.config.js). v2.0.0 is the latest stable release, last published in 2018. It relies on postcss-load-config to read config files and makes no assumptions about CSS output, requiring a separate plugin (e.g., rollup-plugin-string) to handle the transformed CSS. Key differentiators: minimal integration that delegates plugin configuration to standard PostCSS config files, unlike alternatives like rollup-plugin-postcss which bundle plugins internally. Breaking change in v2.0.0: uses object spread syntax, requiring Node >=8.6.0. No further updates expected.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module not supported ↓

cause This package is ESM-only and cannot be required with CommonJS.

fix

Use import postcss from 'rollup-plugin-postcss-config' in an ES module context, or use dynamic import: const postcss = (await import('rollup-plugin-postcss-config')).default.

error TypeError: Cannot use 'in' operator to search for 'plugins' in undefined ↓

cause postcss.config.js not found or malformed config.

fix

Ensure a valid postcss.config.js exists in the project root with a plugins object/array.

error Error: Could not load /path/to/postcss.config.js (imported by rollup-plugin-postcss-config): ENOENT ↓

cause postcss-load-config cannot find the config file.

fix

Create a postcss.config.js file in the project root, or specify a custom config path in plugin options (not supported by this version).

Warnings

breaking v2.0.0 uses object spread syntax, requiring Node >=8.6.0. ↓

fix Upgrade Node to version >=8.6.0 or avoid using spread syntax if you must stay on older Node.

gotcha The plugin does not output CSS files or inject styles; it only transforms CSS code. You must chain another plugin (e.g., rollup-plugin-string, rollup-plugin-css-only) to handle the output. ↓

fix Add a subsequent plugin in the plugins array that includes the same CSS files, e.g., `string({ include: '*.css' })`.

deprecated Package has not been updated since 2018. It may not work with modern Rollup versions (>=3). ↓

fix Check compatibility with your Rollup version; consider using rollup-plugin-postcss or rollup-plugin-postcss-lit as alternatives.

Install

npm install rollup-plugin-postcss-config

yarn add rollup-plugin-postcss-config

pnpm add rollup-plugin-postcss-config

Imports

default
wrong
```
const postcss = require('rollup-plugin-postcss-config')
```
correct
```
import postcss from 'rollup-plugin-postcss-config'
```
ESM-only; CommonJS require will fail. For CommonJS projects, use dynamic import or transpile.

postcss (named)

wrong

import { default as postcss } from 'rollup-plugin-postcss-config'

correct

import { postcss } from 'rollup-plugin-postcss-config'

No named export exists; default import is the only way. This is a common mistake.

TypeScript type
```
import postcss from 'rollup-plugin-postcss-config'
```
No type definitions included; use @types/rollup-plugin-postcss-config if available, or declare module.

Quickstart

Configure PostCSS via postcss.config.js and use rollup-plugin-postcss-config with a string plugin to output CSS as a string.

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {},
    'postcss-reporter': {},
  },
};

// rollup.config.js
import postcss from 'rollup-plugin-postcss-config';
import string from 'rollup-plugin-string';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyBundle',
  },
  plugins: [
    postcss({
      include: '*.css',
      exclude: 'node_modules/**',
    }),
    string({
      include: '*.css',
      exclude: 'node_modules/**',
    }),
  ],
};