BEM class names generator for Webpack CSS modules

Simple BEM class name generator for Webpack CSS modules.

Rationale

Webpack generated CSS modules, that compress each css name. In production we have short css names like 'FAfaf', but in code base we have human names like 'input', 'input__label', 'input_type_text' etc.

We set up Webpack for modulality css files

loader: {
    'css-loader',
    options: {
        localIdentName: '[hash:base64:5]', // or may be '[local]' for dev.
        modules: true
    }
}

We have some css with BEM CSS naming

// form-payment.styl
.form
    display: block
    &__label
        color: blue
        &_error
            color: red
    &__title
        font-size: 18px

Now we can import css files inside Javascript files with short names(compressed by Webpack).

Example (without BEM generator)

Javascript component

import style from './form-payment.styl';

/**
    stylus is object like Map<realName, hashedName>
    {
        form: 'Daffg',
        form__title: 'FGsgT',
        form__label: 'RtHuS',
        form__label_error: 'AFGHs',
    }
*/

export default () => {
    return (
        <div className={stylus.form}>
            {/* We get className from imported style module*/}
            <h1 className={stylus['form__title']}>Title</h1>
            <label className={stylus['form__label']}>
                Simple label
            </label>
            <label className={stylus['form__label'] + ' ' + stylus['form__label_error']}>
                Label Error
            </label>
        </div>
    );
}

If we have many elements with a lot of modifiers, then it is difficult to concat the class name.
With bem-css-modules we can simplify component code with BEM generator for imported module.

Example (with BEM generator)

import style from './form-payment.styl';
import block from 'bem-css-modules';

const b = block(style); // Create BEM Generator for current CSS module

export default () => {
    return (
        <div className={b()}>
            <h1 className={b('title')}>Title</h1>
            <label className={b('label')}>
                Simple label
            </label>
            <label className={b('label', {error: true})}>
                Label Error
            </label>
        </div>
    );
}

API

import style from './input.css';
import block from 'bem-css-modules';

const b = block(style);// Create BEM Generator for current CSS module
/*
style is object like this
{
    input: 'HASH_INPUT',
    input__field: 'HASH_INPUT_FIELD',
    input__field_disabled: 'HASH_INPUT_FIELD_DISABLED',
    input__field_type_text: 'HASH_INPUT_FIELD_TYPE_TEXT',
    input__field_type_phone: 'HASH_INPUT_FIELD_TYPE_PHONE',
    input__icon: 'HASH_INPUT_ICON',
    'is-active': 'HASH_IS_ACTIVE',
    'is-removed': 'HASH_IS_REMOVED',
}
*/

b(); // 'HASH_INPUT'
b('field'); // 'HASH_INPUT_FIELD'  (form BEM's input__field)
b('field', {type: 'text'}); // 'HASH_INPUT_FIELD HASH_INPUT_FIELD_TYPE_TEXT'  (form BEM's 'input__field input__field_type_text')
b('field', {disabled: true}); // 'HASH_INPUT_FIELD HASH_INPUT_FIELD_DISABLED'  (form BEM's 'input__field input__field_disabled')
b('icon', null, {active: true, removed: false); // 'HASH_INPUT_ICON HASH_IS_ACTIVE' (from BEM's 'input__icon is-active')
b('icon', {active: true, removed: false); // 'HASH_INPUT_ICON HASH_IS_ACTIVE' (from BEM's 'input__icon is-active')

Flow and Typescript

Flow and Typescript definitions already included.

Options

Type: Object

throwOnError

Type: Boolean
Default: false

elementDelimiter

Type: String
Default: __

modifierDelimiter

Type: String
Default: _

Set settings

const block = require('bem-css-modules');
block.setSettings({
    throwOnError: true,
    modifierDelimiter: '--'
});

Throw exception if mod, element or state didn't found.

1.4.3

Fix types for Flow

1.4.2

Minor fix for error messages

1.4.1

Fix Flow types

1.4.0

Added alternative bem delimiters via settings.

1.3.3

Allow undefined value as mod/state

1.3.2

Fix TS types link

1.3.1

Use tsc instead of babel for complile

1.3.0

Allow mods without block

1.2.2

Typo fixes

1.2.1

Minor fixes for Flow

1.2.0

Now no throw error in dev mode on wrong properties. But it still enable via settings.throwOnError; add: Method setSettings()

1.1.0

Add option for skip element in first param

1.0.1

Fix Flow types

1.0.0

Stable release