rollup-plugin-cssnext

Easy integration between Rollup and postcss-preset-env.

Installation

npm install --save-dev rollup-plugin-cssnext

Usage

First, configure Rollup:

import cssnext from 'rollup-plugin-cssnext'

const rollupOptions = {
  plugins: [
    cssnext({
      include: '**/*.css',
      exclude: null,
      dynamic: true,
      minify: true
    })
  ]
}

Then, import a CSS file as a string:

import style from './style.css'

console.log(style)

Options

minify

Minify CSS using cssnano. Default: false.

dynamic

Return a template function instead of a string. Default: false.

The template function takes a single argument containing the replacements for every var() in the CSS. For example, take the following CSS:

:root {
  --bgColor: brown;
}

body {
  background-color: var(--bgColor);
  color: var(--fgColor);
}

With { dynamic: true }, you'd use this stylesheet as follows:

import buildCss from './style.css'

const styleSheet = buildCss({
  fgColor: 'white'
})
console.log(styleSheet)

include and exclude

From rollup-pluginutils.

postcssOptions

Options for postcss.

presetEnvOptions

Options for postcss-preset-env.

Author

Tim De Pauw

License

MIT