rollup-plugin-postcss-umi

2.0.3 verified Mon Apr 27 auth: no javascript

Seamlessly integrates PostCSS with Rollup. Version 2.0.3 supports Rollup 1.0+ and processes CSS, SASS, Stylus, and Less files. It injects CSS into <head> by default, supports CSS modules, and can extract CSS to file. Differentiators include local PostCSS config auto-detection and node_modules resolution for Sass imports. Released with monthly cadence, maintained by egoist. ESM-only import.

Common errors

error Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'rollup-plugin-postcss-umi' ↓

cause Using CommonJS require() on an ESM-only package.

fix

Use import statement or require with .default: const postcss = require('rollup-plugin-postcss-umi').default

error TypeError: postcss is not a function ↓

cause Importing package but mistakenly treating it as a default export when it is an object, or using wrong rollup config format.

fix

Ensure you call postcss({...}) not just postcss, and pass as a plugin in an array.

error Error: The 'postcss' plugin is not found. Did you install 'postcss'? ↓

cause PostCSS is a peer dependency and not automatically installed.

fix

Run npm install postcss --dev beside rollup-plugin-postcss-umi.

Warnings

breaking v2.0 drops support for Rollup 0.x; only Rollup 1.0 and above are supported. ↓

fix Upgrade Rollup to 1.0+.

gotcha When extract: true, CSS is not injected into <head>; inject option is forced to false. ↓

fix If you need both injection and extraction, handle manually or use a separate plugin.

gotcha Named exports for CSS modules use a transformation that replaces dashes with $ wrapped underscores, which may cause unexpected export names. ↓

fix Supply a custom namedExports function to control naming.

deprecated The package name includes 'umi' but has no direct relation to UmiJS; consider using rollup-plugin-postcss for clarity. ↓

fix Use the official rollup-plugin-postcss package if compatibility with other tools is preferred.

Install

npm install rollup-plugin-postcss-umi

yarn add rollup-plugin-postcss-umi

pnpm add rollup-plugin-postcss-umi

Imports

postcss

wrong

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

correct

import postcss from 'rollup-plugin-postcss-umi'

Package is ESM-only from v2; CommonJS require will fail.

postcss (CJS usage)

wrong

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

correct

const postcss = require('rollup-plugin-postcss-umi').default

If using require() in legacy setups, access .default property.

TypeScript types

wrong

import postcss = require('rollup-plugin-postcss-umi')

correct

import postcss from 'rollup-plugin-postcss-umi'

TypeScript users should use default import; types are included.

Quickstart

Basic Rollup config integrating PostCSS with extraction and CSS modules auto-detection.

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

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      plugins: [],
      // Enable CSS modules for .module.css files
      autoModules: true,
      // Extract CSS to separate file
      extract: true
    })
  ]
};