suitnames

suitnames is a simple utility to manage CSS modules with SUIT CSS -like naming conventions on React.

Shamefully based on bem-classnames, which is in turn inspired by classnames.

npm install suitnames

Usage

var styles = require('style.css');
var sx = require('suitnames').bind(styles);
 
sx('elementSelector')
sx('BlockSelector', this.props)
sx(/* [...props|className] */);

Simple

Attention: classes would be added only if they are exported from cssmodules style, otherwise they would be skipped. Works best with localIdentName=[name]-[local].

var styles = require('Button.css');
var sx = require('suitnames').bind(styles);
 
sx('Button', { color: 'green', block: true });  // "Button-Button Button--color-green Button--block"
sx({ disabled: true });  // "Button--disabled"
sx('a b', ['c', 'd']);  // "Button-a Button-b Button-c Button-d"

Custom prefix

// Default prefixes:
//
// sx.settings = {
//   prefix: '-',
//   separator: '-'
// };
 
sx.settings.prefix = '_';
sx.settings.separator = '---';
sx(styles, { flat: true });  // => styles['_flat']
sx(styles, { country: 'gb' });  // => styles['_country---gb']