Package Exports

rollup-plugin-postcss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rollup-plugin-postcss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rollup-plugin-postcss

Seamless integration between Rollup and PostCSS.

Features

CSS modules support
Extract CSS file
Custom pre-processor support (like Stylus and Sass)

Installation

yarn add rollup-plugin-postcss --dev

Examples

Basic

config

import postcss from 'rollup-plugin-postcss';

export default {
  entry: 'main.js',
  plugins: [
    postcss({
      plugins: [
        // cssnext(),
        // yourPostcssPlugin()
      ],
      //sourceMap: false, // default value
      //extract: false, // default value
      extensions: ['.css', '.sss']  // default value
      // parser: sugarss
    })
  ]
}

entry

import '/path/to/some_random_file.css';

Use with CSS modules

The postcss-modules plugin allows you to use CSS modules in PostCSS, it requires some additional setup to use in Rollup:

import postcss from 'rollup-plugin-postcss';
import postcssModules from 'postcss-modules';

const cssExportMap = {};

export default {
 plugins: [
    postcss({
      plugins: [
        postcssModules({
          getJSON (id, exportTokens) {
            cssExportMap[id] = exportTokens;
          }
        })
      ],
      getExport (id) {
        return cssExportMap[id];
      }
    })
 ]
}

That's it, you can now use CSS modules and import CSS like this:

import style from './style.css';

console.log(style.className); // .className_echwj_1

You also can import only a specific CSS className like this:

import {className} from './style.css';

console.log(className); // .className_echwj_2

Extract CSS

import postcss from 'rollup-plugin-postcss';

export default {
  plugins: [
    postcss({
      sourceMap: true, // true, "inline" or false
      extract : '/path/to/style.css'
    })
  ]
}

When extract is set to true the plugin will automatically generate a css file in the same place where the js is created by rollup. The css file will have the same name as the js file.

Minimize

Simply use the cssnano plugin:

import postcss from 'rollup-plugin-postcss';
import cssnano from 'cssnano';

export default {
  plugins: [
    postcss({
      plugins: [cssnano()]
    })
  ]
}

Custom pre-processor

For example, you want to run stylus or sass before postcss:

import postcss from 'rollup-plugin-postcss';
import stylus from 'stylus';

const preprocessor = (content, id) => new Promise((resolve, reject) => {
  const renderer = stylus(content, {
    filename: id,
    sourcemap: {inline: true}
  });
  renderer.render((err, code) => {
    if (err) {
      return reject(err);
    }
    resolve({code, map: renderer.sourcemap});
  });
});

export default {
  plugins: [
    postcss({
      preprocessor,
      extensions: ['.styl']
    })
  ]
}

Then you can import './your-stylus.styl'!