css-module-class-utils

Small TypeScript helper for composing CSS Module class names with block and modifier keys.

It is useful when you use CSS Modules with BEM-style modifier class names and want a tiny, dependency-free class name helper.

Install

npm install css-module-class-utils

Basic Usage

import { moduleClasses } from "css-module-class-utils";
import styles from "./Button.module.css";

const className = moduleClasses(
  styles,
  "button",
  {
    primary: true,
    disabled: false,
  },
  "external-class",
);

For a CSS Module like this:

.button {}
.button_primary {}
.button_disabled {}

The helper returns:

• the base class from styles.button
• truthy modifier classes like styles.button_primary
• optional external class names

API

moduleClasses(
  styles,
  block,
  modifiers,
  extra,
  options,
);

Parameters

styles

The imported CSS Module object.

import styles from "./Button.module.css";

block

The base class key to read from the CSS Module.

moduleClasses(styles, "button");

modifiers

An object where each truthy value adds a modifier class.

moduleClasses(styles, "button", {
  primary: true,
  disabled: false,
});

By default, modifiers use _ as the separator, so primary becomes button_primary.

extra

An optional external class name, or an array of external class names.

moduleClasses(styles, "button", undefined, "my-class");

moduleClasses(styles, "button", undefined, ["my-class", isActive && "active"]);

options.separator

Customize the separator between the block and modifier name.

moduleClasses(
  styles,
  "button",
  {
    primary: true,
  },
  undefined,
  {
    separator: "--",
  },
);

This looks for styles["button--primary"].

TypeScript

This package ships with TypeScript declarations. No extra type package is needed.