rebem-jsx's Introduction

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

docs
move tasks to start-runner
actual tests
more tests

rebem-jsx's People

Contributors

Stargazers

Watchers

rebem-jsx's Issues

Is there a way to use custom separators?

In our company we use the following conventions:

element: '__',
modifier: '--'
modValue: '-'

Warnings

I have this warnings, any chance to remove them?

Add inheriting the parent block

I want use it like this:

<div block="button">
  <span elem="text">{props.children || props.text}</span>
</div>

Current api is not cool, because className="button__text" is more short and simple than block="button" elem="text"

Is it possible?

What are the plans, when will you push the current version on github (0.3.0) to npm registry (0.2.1)?
I tried to install directly from github, but you did not push the build folder there.
I need the newer version, with newer rebem-classname, because I need to set the delimiters.

Thanks

Recommend Projects

rebem / rebem-jsx Goto Github PK