babel-plugin-transform-rebem-jsx

0.3.3 verified Sat Apr 25 auth: no javascript maintenance

Babel plugin for transforming JSX with BEM props into class names using reBEM conventions. Current version 0.3.3, last updated 2016. Allows writing BEM-style props (block, elem, mods, mix) on JSX elements, which are compiled to CSS class strings. Integrates with webpack via DefinePlugin for environment variables. Key differentiator: integrates BEM methodology directly into React JSX, avoiding manual className management. Suitable for projects using BEM naming with React.

Common errors

error Error: Cannot find module 'rebem-classname' ↓

cause Missing dependency rebem-classname

fix

npm i -S rebem-classname

error TypeError: Cannot read property 'split' of undefined ↓

cause Missing or null props on element

fix

Upgrade to >=0.3.2 or ensure props are always objects.

Warnings

gotcha process.env.NODE_ENV must be defined at build time via webpack DefinePlugin or similar; missing it will cause runtime errors. ↓

fix Add DefinePlugin to webpack config as shown in quickstart.

gotcha BEM props (block, elem, mods, mix) leak as DOM attributes if not transformed, causing React warnings. v0.3.1 fixes this for React 15.2.0+. ↓

fix Upgrade to >=0.3.1.

gotcha Error when props are missing or null; fixed in v0.3.2. ↓

fix Upgrade to >=0.3.2.

gotcha BEMJSON validation missing; fixed in v0.3.3. ↓

fix Upgrade to >=0.3.3.

Install

npm install babel-plugin-transform-rebem-jsx

yarn add babel-plugin-transform-rebem-jsx

pnpm add babel-plugin-transform-rebem-jsx

Imports

plugin

import plugin from 'babel-plugin-transform-rebem-jsx'

Plugin is a default export used in Babel config

Quickstart

Shows installation, Babel config, webpack DefinePlugin setup, and JSX usage with block and mods props.

// Install: npm i -D babel-plugin-transform-rebem-jsx
// .babelrc
{
  "plugins": ["transform-rebem-jsx"]
}

// webpack DefinePlugin to set NODE_ENV
new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})

// Component usage
const element = <div block="button" mods={{ size: 'large', disabled: true }}></div>;
// Compiles to: <div class="button button_size_large button_disabled"></div>