This babel plugin replace bem-attributes to className attribute with bem-entity object
From:
<button block="button">
<span elem="text">clickme</span>
</button>
To:
<button className={BEMClasses({block: "button"})}>
<span className={BEMClasses({block: "button", elem: "text"})}>clickme</span>
</button>;
From:
<button
block="button"
mods={{size: "s"}}
mix={{block: 'form', elem: 'button'}}>
</button>
To:
<button className={
BEMClasses({
block: "button",
mods: {size: "s"},
mix: {block: 'form', elem: 'button'}
})
}></button>;
From:
<button block="button">
<span elem="inner">
<span elem="icon"></span>
</span>
</button>
To:
<button className={BEMClasses({block: "button"})}>
<span className={BEMClasses({block: "button", elem: "inner"})}>
<span className={BEMClasses({block: "button", elem: "icon"})}></span>
</span>
</button>;
const babel = require('babel-core');
babel.transform(yourCode, { plugins: ["syntax-jsx", "jsx-bemclasses"]}).code)