babel-plugin-transform-rebem-jsx

Babel plugin for reBEM JSX transformations

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-transform-rebem-jsx
2800.3.37 years ago7 years agoMinified + gzip package size for babel-plugin-transform-rebem-jsx in KB

Readme

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

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