modcn

CSS Module class name utility with clsx-compatible syntax.

Resolves class names through a CSS Module styles object without needing the styles. prefix or styles[name] bracket notation.

Particularly useful when writing CSS Modules in BEM — where modifier names like button--primary are inaccessible via dot notation (styles.button--primary is a syntax error).

Installation

npm install modcn

Usage

Bind modcn to your styles object once, then use the returned function like clsx:

import styles from './Button.module.css';
import { modcn } from 'modcn';

const cn = modcn(styles);

Basic

// instead of: className={styles.container}
cn('container')

Dynamic

// instead of: className={styles[`button--${variant}`]}
cn(`button--${variant}`)

Multiple

// instead of: className={`${styles.button} ${styles.primary}`}
cn('button', 'primary')

Conditional

cn('button', active && 'button--active', color && `button--${color}`)

Object syntax

cn('button', {
  'button--active': isActive,
  'button--disabled': isDisabled,
})

Array syntax

cn(['button', isPrimary && 'button--primary'])

How it works

modcn(styles) returns a function that resolves each class name token against the provided CSS Module styles object before passing the results to clsx. If a token is not found in the styles object it is passed through as-is, so global class names work without any extra setup.

License

MIT