hcysunyang / rollup-plugin-postcss

Seamless integration between Rollup and PostCSS.

rollup-plugin-postcss

Seamless integration between Rollup and PostCSS.

Installation

npm install rollup-plugin-postcss

Example

config

import { rollup } from 'rollup';
import postcss from 'rollup-plugin-postcss';

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

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 = {};

rollup({
 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

License

MIT © EGOIST