rollup-plugin-postcss

What is rollup-plugin-postcss?

rollup-plugin-postcss is a Rollup plugin that allows you to import and process CSS files with PostCSS. It supports various PostCSS plugins, CSS modules, and can even extract CSS into separate files.

What are rollup-plugin-postcss's main functionalities?

Importing CSS

This feature allows you to import CSS files directly into your JavaScript or TypeScript files. The imported styles can then be used within your components.

import styles from './styles.css';

Using PostCSS Plugins

This feature allows you to use PostCSS plugins like autoprefixer to process your CSS. The example demonstrates how to configure the plugin to use autoprefixer.

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

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      plugins: [
        autoprefixer()
      ]
    })
  ]
};

Extracting CSS

This feature allows you to extract CSS into a separate file instead of including it in the JavaScript bundle. The example shows how to configure the plugin to extract CSS.

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      extract: true
    })
  ]
};

CSS Modules

This feature allows you to use CSS Modules, which scope CSS by automatically creating unique class names. The example demonstrates how to enable CSS Modules in the plugin configuration.

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      modules: true
    })
  ]
};

Other packages similar to rollup-plugin-postcss

rollup-plugin-css-only

rollup-plugin-css-only is a Rollup plugin that allows you to import CSS files and extract them into a separate file. Unlike rollup-plugin-postcss, it does not support PostCSS plugins or CSS Modules.

rollup-plugin-sass

rollup-plugin-sass is a Rollup plugin that allows you to import and compile Sass/SCSS files. It supports extracting CSS into separate files and can be used in conjunction with PostCSS plugins. However, it is specifically designed for Sass/SCSS rather than general CSS processing.

rollup-plugin-styles

rollup-plugin-styles is a versatile Rollup plugin that supports importing and processing CSS, Sass, Less, and Stylus files. It also supports PostCSS plugins and CSS Modules, making it a more comprehensive solution compared to rollup-plugin-postcss.

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;
          }
        })
      ],
      getExportNamed: false, //Default false, when set to true it will also named export alongside default export your class names
      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

Important, when importing specific classNames (getExportNamed), the following will happen :

• dashed class names will be transformed by replacing all the dashes to $ sign wrapped underlines, eg. -- => $__$
• js protected names used as your style class names, will be transformed by wrapping the names between $ signs, eg. switch => $switch$

All transformed names will be logged in your terminal like:

use `foo$__$bar` to import `foo--bar` className
use `$switch$` to import `switch` className

The original will not be removed from the locals. For example:

.class-name {}
.class--name {}
.switch {}

import style, { class$_$name, class$__$name, $switch$ } from './style.css';
console.log(style['class-name'] === class$_$name) // true
console.log(style['class--name'] === class$__$name) // true
console.log(style['switch'] === $switch$) // true

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'!

License

MIT © EGOIST