babel-plugin-transform-jsx-bemed
v1.0.0
Published
JSX with BEM format via Babel
Downloads
4
Readme
babel-plugin-transform-jsx-bemed
Babel plugin for BEM class names generation in JSX. It was developed for using in React in combination with postcss plugin.
Install
Just require it as any other babel plugin and add bemed
package to your dependencies
(so Webpack/Brunch.io/etc. can use it for frontend).
$ npm install babel-plugin-transform-jsx-bemed --save-dev
$ npm install bemed --save
{
presets: ['es2015'],
plugins: ['transform-jsx-bemed']
}
Usage
Just add BEM properties into your tag and plugin will construct className
for you.
className
will be a JavaScript expression which calls function from bemed
. Header will have this function definition, so it just works out of the box by
default.
If className
is already in tag then nothing will be done (for back-compatibility).
Properties
block Block property. Must be a string.
elem Element property. Must be a string.
mods
Modifier property. Can be a string or JavaScript expressions (inside {
}
). Expression must return string, array or object.
mix
Mixin property. Can be a string or JavaScript expressions (inside {
}
). Expression must return string or array.
Scopes
block
property creates a scope and should be used only for top-level JSX tag. Can be omitted if JSX is placed inside class or named arrow function.
Examples
Base usage
Input
<div block="Main" mix="panel" mods={{ warning: true }}>
<div elem="header" mods="header">Title</div>
<div elem="body">Text</div>
</div>
Output
<div className={_bem("Main", null, { warning: true }, "panel")}>
<div className={_bem("Main", "header", "header")}>Title</div>
<div className={_bem("Main", "body")}>Text</div>
</div>
Input
const Message = ({ type, title, text}) => {
return <div mods={{ type }} >
<div elem="header">{ title }</div>
<div elem="body">{ text }</div>
</div>
}
Output
const Message = ({ type, title, text }) => {
return <div className={_bem("Message", null, { type })}>
<div className={_bem("Message", "header")}>{title}</div>
<div className={_bem("Message", "body")}>{text}</div>
</div>;
};
Input
class Message extends Component {
...
render() {
...
return <div mods={this.getMods()}>
<div elem="header">{ title }</div>
<div elem="body">{ text }</div>
</div>
}
}
Output
class Message extends Component {
...
render() {
...
return <div className={_bem("Message", null, this.getMods())}>
<div className={_bem("Message", "header")}>{title}</div>
<div className={_bem("Message", "body")}>{text}</div>
</div>;
}
}
Options
rules
Set custom properties naming. Default is
properties: {
block: 'block',
element: 'elem',
modifiers: 'mods',
mixin: 'mix'
}
separators
Set custom bem separators. Default is
separators: {
element: '__',
modifier: '--',
value: '-'
}