Silvestr-b / jsx-bemclasses

JSX BEMClasses

This babel plugin replace bem-attributes to className attribute with bem-entity object

Block and Elem:

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>;

Mods and mix:

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>;

Find parent block in JSX

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>;

Usage

const babel = require('babel-core');

babel.transform(yourCode, { plugins: ["syntax-jsx", "jsx-bemclasses"]}).code)