cn utility
cn is a clsx-style concatenator. It does not resolve conflicting utilities. Arrays nest, objects contribute keys whose values are truthy, and falsy values are skipped.
Intended import (source)
At git tag v1.5.0, src/index.ts exports:
import { cn, uv } from 'unocss-variants';
cn('px-2 py-1', 'px-4');
// 'px-2 py-1 px-4'
cn('color-blue-500', 'color-red-500');
// 'color-blue-500 color-red-500'
cn('text-sm', { 'font-bold': true, 'hidden': false });
// 'text-sm font-bold'
cn('a', null, undefined, false, 'b');
// 'a b'
Use cn when you need to join extra classes outside a recipe. Inside uv, joining is already handled.
npm 1.5.0 JavaScript bundle
The published unocss-variants@1.5.0 tarball ships a stale dist/:
| Name | Types (dist/index.d.ts) | Runtime (dist/index.mjs) |
|---|---|---|
uv | yes | yes |
cn | declared | not exported |
cnBase | declared | yes (the concatenator) |
createUv | declared | yes (no-config uv factory; not in current source) |
Verified against the hub's installed package: import { cn } from 'unocss-variants' throws. cnBase concatenates and keeps conflicts, same as source cn:
import { cnBase } from 'unocss-variants';
cnBase('px-2 py-1', 'px-4'); // 'px-2 py-1 px-4'
cnBase('color-blue-500', 'color-red-500'); // 'color-blue-500 color-red-500'
cnBase('text-sm', { 'font-bold': true, 'hidden': false }); // 'text-sm font-bold'
Until the package is rebuilt and republished, import cnBase from npm and treat cn as types-only. After a matching publish, prefer cn as in source.
There is no cx, cnMerge, or merge config callback.
ClassValue vs cn
uv options type ClassValue as strings, arrays, null, undefined, 0, 0n, and false — not class dictionaries.
The concatenator (cn / cnBase) additionally accepts numbers, booleans, and { [className]: any } objects. That wider input is CnOptions in the types.