rollup-plugin-cssnext

0.1.1 verified Mon Apr 27 auth: no javascript deprecated

Rollup plugin for processing CSS files with postcss-preset-env. Current stable version 0.1.1 (last release 2018). Unmaintained: postcss-preset-env v7+ requires different plugin setup. Replaced by rollup-plugin-postcss with postcss-preset-env. Features include CSS minification via cssnano, dynamic CSS variable injection, and include/exclude filters. No TypeScript support, requires Node >=8.

Common errors

error Cannot find module 'rollup-plugin-cssnext' ↓

cause Package not installed or devDependency not installed.

fix

Run 'npm install --save-dev rollup-plugin-cssnext'.

error TypeError: cssnext is not a function ↓

cause Probably imported as named export instead of default.

fix

Use 'import cssnext from 'rollup-plugin-cssnext'' or 'const cssnext = require('rollup-plugin-cssnext')'.

error Error: PostCSS plugin postcss-preset-env requires PostCSS 8. ↓

cause rollup-plugin-cssnext v0.1.1 uses PostCSS 7, which is incompatible with postcss-preset-env v7+.

fix

Downgrade postcss-preset-env to v6 or switch to rollup-plugin-postcss.

Warnings

deprecated Package is unmaintained; postcss-preset-env v7+ requires different plugin setup. ↓

fix Migrate to rollup-plugin-postcss with postcss-preset-env as a PostCSS plugin.

breaking PostCSS 8+ compatibility: rollup-plugin-cssnext v0.1.1 uses PostCSS 7 internally. ↓

fix If using PostCSS 8 in other plugins, switch to rollup-plugin-postcss with postcss-preset-env v7+.

gotcha Dynamic mode returns a function, not a string. Using the result as a string will fail. ↓

fix When 'dynamic: true' is set, invoke the result as a function: const style = buildCss({}).

gotcha Include/exclude patterns use rollup-pluginutils; glob patterns differ from native Rollup filters. ↓

fix Ensure patterns match rollup-pluginutils createFilter syntax (e.g., '**/*.css').

breaking CSS import returns a string; bundler must handle CSS imports manually or via plugin. ↓

fix Ensure CSS imports are handled only in contexts where plugin is active; server-side imports may cause errors.

Install

npm install rollup-plugin-cssnext

yarn add rollup-plugin-cssnext

pnpm add rollup-plugin-cssnext

Imports

cssnext

wrong

const { cssnext } = require('rollup-plugin-cssnext')

correct

import cssnext from 'rollup-plugin-cssnext'

Default export only. Named import will produce undefined.

cssnext (ESM)

wrong

import * as cssnext from 'rollup-plugin-cssnext'

correct

import cssnext from 'rollup-plugin-cssnext'

Namespace import results in object with default property.

cssnext (CJS)

wrong

const { cssnext } = require('rollup-plugin-cssnext')

correct

const cssnext = require('rollup-plugin-cssnext')

CJS exports default as a single function, not a named export.

Quickstart

Basic Rollup configuration using rollup-plugin-cssnext to process CSS files via postcss-preset-env with minification.

// rollup.config.js
import cssnext from 'rollup-plugin-cssnext';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    cssnext({
      include: '**/*.css',
      exclude: null,
      minify: true,
      dynamic: false,
      postcssOptions: {},
      presetEnvOptions: {
        stage: 2
      }
    })
  ]
};