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>

<div class="beep"></div>
<div class="beep__boop"></div>
<div class="beep beep_foo_bar"></div>
<div class="beep boop"></div>

Notes

Environment variables

process.env.NODE_ENV must be available. For example in webpack you can do this with DefinePlugin:

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV)
        }
    })
]

Custom delimeters

Default delimeters are _ for modifiers and __ for elements, but you can change it with special environment variables:

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            REBEM_MOD_DELIM: JSON.stringify('--'),
            REBEM_ELEM_DELIM: JSON.stringify('~~')
        }
    })
]

TODO

• [x] docs
• [x] move tasks to start-runner
• [x] actual tests
• [ ] more tests