Package Exports

babel-plugin-css-modules-transform

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 (babel-plugin-css-modules-transform) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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]", // in case you don't want to use a function
                "generateScopedName": "./path/to/module-exporting-a-function.js", // in case you want to use a function
                "generateScopedName": "npm-module-name",
                "preprocessCss": "./path/to/module-exporting-a-function.js",
                "preprocessCss": "npm-module-name",
                "processCss": "./path/to/module-exporting-a-function.js",
                "processCss": "npm-module-name",
                "append": [
                    "npm-module-name",
                    "./path/to/module-exporting-a-function.js"
                ],
                "prepend": [
                    "npm-module-name",
                    "./path/to/module-exporting-a-function.js"
                ],
            }
        ]
    ]
}

License

MIT