babel-plugin-transform-rebem-jsx

0.3.3 • Public • Published

babel-plugin-transform-rebem-jsx

npm travis deps

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

  • docs
  • move tasks to start-runner
  • actual tests
  • more tests

Readme

Keywords

Package Sidebar

Install

npm i babel-plugin-transform-rebem-jsx

Weekly Downloads

1,173

Version

0.3.3

License

MIT

Last publish

Collaborators

  • mistadikay