@prague-digi/class-names

Improved classnames library implementation, which allows an array of CSS modules and/or additional class names to be bound and handles spaces in them correctly. The rightmost CSS modules have priority over ones to the left.

Usage

This library can be used the same way as Jed Watson's classnames library.

Additionally, one may bind a (possibly heterogenous) array of CSS modules and additional class names. If you pass a class name with a space, it is handled correctly (each word is parsed separately).

import classNames from '@prague-digi/class-names'
import styles from '@prague-digi/ui-styles' // contains classes: foo, bar

import theme from './theme.css' // contains classes: bar, custom

const cx = classNames.bind([styles, theme, 'custom'])

cx('bar baz', { foo: true, bar: null }) // 'theme_bar baz styles_foo theme_custom'

// Explanation:
// 'bar' is found in theme.css and resolves to 'theme_bar' (priority over ui-styles)
// 'baz' is not present in any CSS module, so it is returned as is
// 'foo' is found in @prague-digi/ui-styles and resolves to 'styles_foo'
// 'custom' is applied additionally and resolves to 'theme_custom' in theme.css