babel-plugin-react-cssmoduleify

babel-plugin-react-cssmoduleify

Note: this plugin now requires Babel 6. To use the Babel 5 support ensure you continue using the pre 1.0 release.

For those who have tasted CSS Modules it is hard to imagine life without it. At Walmart we have a large number of core components that still use traditional CSS classNames and global CSS. This babel plugin is used to convert all global styles into CSS Modules to allow teams to opt-in to CSS Modules.

Previously this attempted to be rather aggressive in it’s resolving of className calls. The current implementation is much simpler and therefore should also support more use cases. Currently classNames must be a string, so we can take any complex assignment and do the lookup on the fly.

It detects the correct className calls in both JSX, React.createElement, and compiled JSX output.

Usage

• npm install --save babel-plugin-react-cssmoduleify

.babelrc

{
  "plugins": [
    ["babel-plugin-react-cssmoduleify", {
      // this string is applied to the current path to transform or bail out.
      // This is because this plugin is often used on external code.
      "path": "node_modules/regex-path-"
      "cssmodule": "client/styles/base.styl"
      "modules": "es6",
      "log": true
    }]
  ],
}

Options:

• path: string: string applied as a regex to each compiled file
• cssmodule: string: path from process.cwd() to global CSS file
• modules: "es6"|"commonjs" the type of module system cssmodule should be required as.
• log: boolean log potentially unhandled cases. Default to false.

Examples

Look at the unit tests.

Caveats

This assumes that you can get all exports into one file. Most CSS Preprocessors build on the global nature of CSS and have their own internal global worlds. Importing all of your traditional files into a single file in Stylus or Sass will likely accomplish this.

MIT License

Copyright (c) 2015 Walmart Labs