babel-plugin-postcss-cssmodules-transform

Babel plugin transform and extract PostCSS and CSS Modules to static CSS

Status

This plugin is still at a very early stage and features are incomplete.

This plugin does two things:

// index.js
import styles from './index.module.css'


// or
const styles = require('./index.module.css')

/* index.module.css */
.root {
  display: flex;
}

Into an object that has properties mirroring the styles name in the compiled JS file:

// index.js
var styles = {"root":"_root_amfqe_1"};

And extract to styles.css

/* styles.css */
._root_amfqe_1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

Usage

Install from NPM

$ yarn add @envato/babel-plugin-postcss-cssmodules-transform -D

Add the plugin to .babelrc.

{
  "presets": [
    ["@babel/env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }],
    "@babel/stage-3",
    "@babel/react",
    "@babel/typescript"
  ],
  "plugins": [
    ["@envato/babel-plugin-postcss-cssmodules-transform", {
      "extractCss": "./dist/styles.css"
    }]
  ]
}

Check the /example folder for a complete example.

Todo

• support postcss.config.js
• unit test

Alternatives

This plugin is based on the two plugins below, and modified to support extractCss option with full postcss plugin support.

• babel-plugin-css-modules-transform
• babel-plugin-transform-postcss

License

MIT