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

Transform className attributes in JSX to reference CSS Modules

babel-plugin-transform-jsx-css-modules

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

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
• Usage
• Options

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'