babel-plugin-transform-rebem-jsx

Babel plugin allowing you to use JSX with reBEM.

Install

$ npm i -S babel-plugin-transform-rebem-jsx

.babelrc

// without options
{
  "plugins": ["transform-rebem-jsx"]
}
// with options
{
  "plugins": [
    ["transform-rebem-jsx", {
      "externalHelper": false // default is true
    }]
  ]
}

Usage

BEM

import { BEM } from 'rebem';

<BEM tag="span" />
<BEM block="beep" />
<BEM block="beep" elem="boop" />
<BEM block="beep" mods={{ foo: 'bar' }} />
<BEM block="beep" mix={{ block: 'boop' }} />

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

blockFactory

import { blockFactory } from 'rebem';

// since it's a custom element it should be capitalized
const Block = blockFactory('beep');

<Block />
<Block elem="boop" />
<Block mods={{ foo: 'bar' }} />
<Block mix={{ block: 'boop' }} />

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

TODO

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