rollup-plugin-css-porter

1.0.2 verified Mon Apr 27 auth: no javascript deprecated

A Rollup plugin that collects all CSS imported via JavaScript (e.g., `import './my.css'`) and outputs them to a standalone CSS file. It optionally generates a minified version using clean-css. The plugin is version 1.0.2, last released in 2019, and supports Rollup 1.x. It is not actively maintained and lacks modern features like CSS modules or PostCSS integration, making it suitable only for simple bundling needs. Differentiators: simple API, built-in minification via clean-css, and configurable output paths.

Common errors

error Error: Cannot find module 'rollup-plugin-css-porter' ↓

cause Package not installed or not listed in dependencies.

fix

Run npm install --save-dev rollup-plugin-css-porter.

error TypeError: css is not a function ↓

cause Importing default export incorrectly (e.g., using named import).

fix

Use import css from 'rollup-plugin-css-porter' instead of import { css } from ....

error Error: [object Object] is not a valid plugin ↓

cause Missing parentheses when calling css() in plugins array.

fix

Ensure plugins array contains css() (function call), not css (reference).

Warnings

breaking Plugin version 1.x only supports Rollup 1.0.0+. It will not work with Rollup 2.x or 3.x. ↓

fix Upgrade to a maintained CSS plugin like rollup-plugin-postcss or rollup-plugin-styles.

deprecated Package is no longer maintained; last publish was in 2019. ↓

fix Use an alternative like @rollup/plugin-postcss or rollup-plugin-styles.

gotcha The plugin does not support CSS modules, PostCSS, or CSS-in-JS. It merely concatenates raw CSS files. ↓

fix For advanced CSS processing, switch to rollup-plugin-postcss.

Install

npm install rollup-plugin-css-porter

yarn add rollup-plugin-css-porter

pnpm add rollup-plugin-css-porter

Imports

css

wrong

const css = require('rollup-plugin-css-porter')

correct

import css from 'rollup-plugin-css-porter'

Default export only; CommonJS require works but is discouraged.

Quickstart

Configures rollup-plugin-css-porter to output both raw and minified CSS files.

import { rollup } from 'rollup';
import css from 'rollup-plugin-css-porter';

rollup({
  input: 'main.js',
  plugins: [ css({ raw: 'styles.css', minified: 'styles.min.css' }) ]
}).then(bundle => {
  bundle.write({ format: 'es', file: 'bundle.js' });
});