module-clsx

Simple and fast BEM class names helper for CSS Modules. Inspired by clsx and bem-cn

• No dependencies.
• Useful for React
• TypeScript definitions.
• Configurable
• Mixins

Installation

$ npm install module-clsx --save

or

$ yarn add module-clsx

Usage

.element {
    &_modifier {
        disaply: block;
    }
    &_modifier_value {
        display: flex;
    }
}

import block from 'module-clsx'
import styles from './Component.module.scss'

const b = block(styles)

Element

b('element');
// => 'element_HASH' 
b('element', { modifier: true });
// => 'element_HASH element_modifier_HASH'
b('element', { modifier: 'value' });
// => 'element_HASH element_modifier_value_HASH'
b('element', 'mixin');
// 'element_HASH mixin'
b('element', { modifier: 'value' }, 'mixin');
//=> 'element_HASH element_modifier_value_HASH mixin'
b('element', { modifier: 'value' }, 'mixin', null, false, undefined, 'mix');
//=> 'element_HASH element_modifier_value_HASH mixin mix'

React example

import React from 'react'
import block from 'bem-clsx'
import styles from './UserInfo.module.scss'

interface IProps {
  userName: string
  avatarUrl: string
  online: boolean
  className?: string
}

const b = block(styles)

const UserInfo: React.FC<IProps> = ({
  className,
  userName,
  avatarUrl,
  online
 }) => (
   <div className={b('root', className)}>
     <img className={b('avatar')} src={avatarUrl}/>
     <span className={b('name', { active: online })}>{userName}<span>
     <div className={b('status', { online })}/>
   </div>
 )

If props className is user-info and online is true, the result would be the following HTML:

<div class="root_HASH user-info">
  <img class="avatar_HASH" src="https://images.com/test" />
  <span class="name_HASH name_active_HASH">Some User</span>
  <div class="status_HASH status_online_HASH" />
</div>

Custom separators

For using custom element and modifier separators, you can easily create your own module that calls the original with configuration options:

// ./src/helpers/bem.ts
import block from 'module-clsx'

const  customConfig  = {
  modifierSeparator: '--',
  modifierValueSeparator: '-',
}

const customBlock = (styles: {[key: string]: string}) => (
  block(styles, customConfig)
)

export default customBlock

Now you can use this function in your application. Example:

import block from 'helpers/bem'
import styles from './Component.module.scss'

const b = block(styles)

b('element', { modifier: 'value' }, 'mixin', null, false, undefined, 'mix') 
// => 'element_HASH element--modifier-value_HASH mixin mix'

Default options

{
  modifierSeparator: '_',
  modifierValueSeparator: '_',
}

License

The package is available as open source under the terms of the MIT License.