BEM class names generator for Webpack CSS modules

Simple BEM class name generator for Webpack CSS modules.

$3

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
``js
loader: {
'css-loader',
options: {
localIdentName: '[hash:base64:5]', // or may be '[local]' for dev.
modules: true
}
}
`

We have some css with BEM CSS naming
`stylus
// 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).

$3


Javascript component
`jsx
import style from './form-payment.styl';

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

export default () => {
return (

{/ We get className from imported style module/}

Title

Simple label


Label Error

);
}
`
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.

$3

`jsx
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 (

Title

Simple label


Label Error

);
}
`

#API
`js
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')
`

$3

Flow and Typescript definitions already included.

$3


Type: Object

##### throwOnError
Type: Boolean
Default: false

##### elementDelimiter
Type: String
Default: __

##### modifierDelimiter
Type: String
Default: _

#### Set settings

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

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