/babel-plugin-transform-jsx-css-modules

Transform className attributes in JSX to reference CSS Modules

Primary LanguageJavaScriptMIT LicenseMIT

babel-plugin-transform-jsx-css-modules

Transforms className attributes in JSX to get css-modules' references.

npm version CI Status

Note: It does not turn on CSS Modules in your project, it assumes that you made it yourself (via webpack and css-loader for example).

Example

import './styles.css'

const Component = () => (
  <div styleName="root">
    <h1 className="paragraph">Hello World</h1>
    <p className="global" styleName="local">I'm an example!</p>
  </div>
)

Will be transpiled into

import __CSSM__ from './styles.css'

const Component = () => (
  <div className={__CSSM__['root']}>
    <h1 className="paragraph">Hello World</h1>
    <p className={["global", __CSSM__["local"]].join(" ")}>I'm an example!</p>
  </div>
)

Usage

  1. Install plugin

    npm install --save-dev babel-plugin-transform-jsx-css-modules
  2. Add plugin to your .babelrc file

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

Options

Name Type Default Description
pathToStyles RegExp /^\.\/styles\.css$/ It specifies what imports should be transformed
Note: Escape symbols if you specify it as a string

pathToStyles

If you set it to /^\.\/module\.scss$/ it will handle imports which start and end with ./module.scss:

{
  "plugins": [
    ["transform-jsx-css-modules", {
      "pathToStyles": "^\\.\\/module\\.scss$"
    }]
  ]
}
import './module.scss'

Will be transformed into:

import __CSSM__ from './module.scss'