purebem

A function for creating BEM compatible CSS classnames

Install

yarn add purebem

Usage

import purebem from 'purebem';

See types for exported types.

purebem

const block = purebem('block')

block();
// "block"

block('element');
// "block__element"

block({
    boolean: true,
    falsy: false,
    text: 'string',
    empty: '',
    camelCase: true,
});
// "block block--boolean block--string block--camel-case"

block('element', { objectLiteralKey: true });
// "block__element block__element--object-literal-key"

block(['value-in-array']);
// "block--value-in-arry"

block('element', ['value-in-array']);
// "block__element block__element--value-in-array"

block('element', { objectLiteralKey: true }, ['value-in-array']);
// "block__element block__element--object-literal-key block__element--value-in-array"

purebem.many('block1', 'block2');
// "block1 block2"

import styles from './styles.module.scss'
// const styles = { block: 'random-value' }

const block = purebem.module('block', styles);
block();
// "random-value"

Note

This library is being published with our use cases in mind and is not necessarily meant to be consumed by the broader public. We probably won't take your feature requests unless they align with our own needs.

License

MIT