babel-plugin-transform-bem-jsx

Transform BEM attributes (b,e,m) into concatenated classNames or inline styles!

This plugin is designed to use with Babel 6.

Modes

1. Class Names Before/After Instalation Usage
2. Inline Styles Before/After — Instalation — Usage

Class Names

This is the common mode of this plugin — just for classnames concatenation by BEM attributes.

class Map {
  render() {
    const {
      countries,
      points,
    } = this.props;
    
    const countryNode = (
      <div e='country' />
    );
    
    const countriesNodes = countries
      .map((country) => (
        <div e='country'>
          {countryNode}
        </div>
      ));
  
    return (
      <div b='Map'>
        <div e='countries'>
          {countriesNodes}
        </div>
        <div e='points'>
          {points.map((point) => {         
            const flagNode = (
              <div e='flag' />
            );
            return (
              <div e='point'>
                {flagNode}
                {
                  point.name 
                  ? 
                  <span e='name'>
                    {point.name}
                  </span>
                  : 
                  null
                }
              </div>
            )
          })}
        </div>
      </div>
    )
  }
}

For classNames

Install plugin and save it to the devDependencies:

npm install --save-dev babel-plugin-transform-bem-jsx

Via NPM

Inline Styles