Registry / web-framework / babel-plugin-transform-rebem-jsx

babel-plugin-transform-rebem-jsx

library0.3.3jsnpmunverified

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.

web-framework

npm install babel-plugin-transform-rebem-jsx

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-TRANS

babel-plugin-transform-rebem-jsx

web-frameworkjavascriptv0.3.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin

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

Plugin is a default export used in Babel config

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>

Debug

Known issues

gotchaprocess.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.

affects: >=0.0.0

gotchaBEM 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.

affects: <0.3.1

gotchaError when props are missing or null; fixed in v0.3.2.

fix

Upgrade to >=0.3.2.

affects: <0.3.2

gotchaBEMJSON validation missing; fixed in v0.3.3.

fix

Upgrade to >=0.3.3.

affects: <0.3.3

Errors

Common errors & fixes

Error: Cannot find module 'rebem-classname'

Missing dependency rebem-classname

fix

npm i -S rebem-classname

TypeError: Cannot read property 'split' of undefined

Missing or null props on element

fix

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

Upgrade

Version history

0.3.3latest on npm

Audit

Dependencies

rebem-classnamerequiredGenerates BEM class names from block/elem/mods/mix props

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/rebem/rebem-jsx ↗

packagehttps://www.npmjs.com/package/babel-plugin-transform-rebem-jsx ↗