Transform className attributes in JSX to reference CSS Modules
MIT License
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).
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>
)
Install plugin
npm install --save-dev babel-plugin-transform-jsx-css-modules
Add plugin to your .babelrc
file
{
"plugins": [
"transform-jsx-css-modules"
]
}
Name | Type | Default | Description |
---|---|---|---|
pathToStyles |
RegExp |
/^\.\/styles\.css$/ |
It specifies what imports should be transformedNote: 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'