Set of helpers for composing and parsing BEM classNames.

Install

npm i -S rebem-classname

Usage

stringify

import { stringify } from 'rebem-classname';

const className = stringify(props);

props:

block

Reference.

stringify({
    block: 'beep'
});
// "beep"

elem

Reference.

stringify({
    block: 'beep',
    elem: 'boop'
});
// "beep__boop"

mods

Reference.

stringify({
    block: 'beep',
    mods: {
        foo: 'bar'
    }
});
// "beep beep_foo_bar"

stringify({
    block: 'beep',
    mods: {
        foo: true,
        bar: false
    }
});
// "beep beep_foo"

stringify({
    block: 'beep',
    elem: 'boop',
    mods: {
        foo: 'bar'
    }
});
// "beep__boop beep__boop_foo_bar"

mix

Reference.

stringify({
    block: 'beep',
    mix: {
        block: 'boop',
        elem: 'foo'
    }
});
// "beep boop__foo"

stringify({
    block: 'beep',
    mix: [
        {
            block: 'boop',
            elem: 'foo'
        },
        {
            block: 'bar',
            elem: 'baz',
            mods: {
                test: true
            }
        }
    ]
});
// "beep boop__foo bar__baz bar__baz_test"

className

stringify({
    block: 'boop'
    className: 'beep'
});
// "boop beep"

parse

TODO

Environment variables

NODE_ENV

process.env.NODE_ENV must be available. For example in webpack you can do this with DefinePlugin:

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV)
        }
    })
]

Custom delimeters

Default delimeters are _ for modifiers and __ for elements, but you can change it with special environment variables:

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            REBEM_MOD_DELIM: JSON.stringify('--'),
            REBEM_ELEM_DELIM: JSON.stringify('~~')
        }
    })
]