babel-plugin-transform-rebem-jsx
Babel plugin allowing you to use BEM props for composing classNames in JSX like in reBEM.
Install
$ npm i -S babel-plugin-transform-rebem-jsx
.babelrc
"plugins": "transform-rebem-jsx"
Usage
<div block="beep"></div><div block="beep" elem="boop"></div><div block="beep" mods= foo: 'bar' ></div><div block="beep" mix= block: 'boop' ></div>
Notes
Environment variables
process.env.NODE_ENV
must be available. For example in webpack you can do this with DefinePlugin
:
plugins: 'process.env': NODE_ENV: JSON
Custom delimeters
Default delimeters are _
for modifiers and __
for elements, but you can change it with special environment variables:
plugins: 'process.env': REBEM_MOD_DELIM: JSON REBEM_ELEM_DELIM: JSON
TODO
- docs
- move tasks to start-runner
- actual tests
- more tests