NogsMPLS / babel-plugin-css-modules-transform

Extract css class names from required css module files, so we can render it on server.

babel-plugin-css-modules-transform [Babel 6 only]

This Babel plugin finds all requires for css module files and replace them with a hash where keys are class names and values are generated css class names.

This plugin is based on the fantastic css-modules-require-hook.

Warning

This plugin is experimental, pull requests are welcome.

Do not run this plugin as part of webpack frontend configuration. This plugin is intended only for backend compilation.

Example

/* test.css */

.someClass {
    color: red;
}

// component.js
const styles = require('./test.css');

console.log(styles.someClass);

// transformed file
const styles = {
    'someClass': 'Test__someClass___2Frqu'
}

console.log(styles.someClass); // prints Test__someClass___2Frqu

Installation

npm install --save-dev babel-plugin-css-modules-transform

Include plugin to .babelrc

{
    "plugins": ["css-modules-transform"]
}

With custom options css-modules-require-hook options

{
    "plugins": [
        ["css-modules-transform", { "generateScopedName": "[name]__[local]___[hash:base64:5]" }]
    ]
}

License

MIT