BEM classnames

A TypeScript utility for generating BEM modifier class names from component props.

Installation

With pnpm

pnpm add @rhapsodic/bem-classnames

Or, with npm

npm install @rhapsodic/bem-classnames

Or, with yarn

yarn add @rhapsodic/bem-classnames

Or, with bun

bun add @rhapsodic/bem-classnames

Quick start

import { bmc, flag } from '@rhapsodic/bem-classnames';

const buttonClasses = bmc('button', {
  size: true,
  variant: true,
  isDisabled: flag('state', 'disabled'),
});

const classes = buttonClasses({
  size: 'large',
  variant: 'primary',
  isDisabled: true,
});
// ['button', 'button_size_large', 'button_variant_primary', 'button_state_disabled']

Documentation

Learn more on the Documentation

Agent skills

This repository includes provider-agnostic agent skills in skills.

Install them directly from GitHub:

npx skills add rhapsodic-dev/bem-classnames --all

They can also be installed as a package:

pnpm add -D @rhapsodic/bem-classnames-skills skills-npm

Add skills-npm to the consuming project's prepare script:

{
  "scripts": {
    "prepare": "skills-npm"
  }
}

License

MIT License