cls-variant

A small, typed utility for generating class names from variant configurations. Designed to be simple, strongly-typed, and composable with other class utilities. Lightweight alternative to clsx, treeshakable alterantive to cva.

Install

npm i cls-variant

yarn add cls-variant

pnpm add cls-variant

Usage

import { cls, clsv, clsvDefault, clsvCompound } from 'cls-variant'

cls('btn', ['rounded', ['bg-black']], true && 'b-2', null, 0, false && ['text-red'])
// 'btn rounded bg-black b-2'

const button = clsv('btn', {
  size: {
    sm: 'text-sm px-2',
    md: 'text-base px-4',
    lg: 'text-lg px-6'
  },
  color: {
    primary: 'bg-blue-500',
    secondary: 'bg-gray-500'
  }
})

button({ size: 'sm', color: 'primary' }, 'custom', true && 'cls')
// 'btn text-sm px-2 bg-blue-500 custom cls'

const defaultButton = clsvDefault(button, {
  size: 'sm',
  color: 'primary'
})

defaultButton()
// 'btn text-sm px-2 bg-blue-500 custom cls'

defaultButton({ size: 'lg' })
// 'btn text-lg px-6 bg-blue-500 custom cls'

const compoundButton = clsvCompound(button, [
  ['shadow', { size: 'md' }],
  ['rounded', { size: 'lg', color: ['primary', 'secondary'] }],
])

compoundButton({ size: 'lg', color: 'primary' })
// 'btn text-sm px-2 bg-blue-500 rounded custom cls'

Util Type

import type { VariantProps } from 'cls-variant'

type ButtonVariant = VariantProps<typeof button>

cva() like

import { cva } from 'cls-variant/cva'

const button = cva('btn', {
  variants: {
    intent: { primary: 'btn-primary', secondary: 'btn-secondary' },
    size: { sm: 'btn-sm', md: 'btn-md' },
  },
  defaultVariants: {
    intent: 'primary',
    size: 'md',
  },
  compoundVariants: [
    { intent: 'primary', size: 'sm', class: 'btn-primary-sm' },
  ],
})

// returns a string of classes (base + variant classes + compound + extra)
const classes = button({ intent: 'primary', size: 'sm' }, 'mx-2')