Utility for constructing CSS class names based on variants
- JavaScript 56.5%
- TypeScript 43.5%
| .vscode | initial commit | |
| lib | refactor: reduce calls to cx | |
| .editorconfig | initial commit | |
| .gitignore | initial commit | |
| bench.js | refactor: reduce calls to cx | |
| dprint.json | initial commit | |
| LICENSE | initial commit | |
| package.json | v0.1.3 | |
| pnpm-lock.yaml | initial commit | |
| README.md | refactor: reduce calls to cx | |
| tsconfig.json | initial commit | |
| tsconfig.node.json | initial commit | |
| vite.config.ts | initial commit | |
cv
Utility for constructing CSS class names based on variants.
Fast, almost drop-in replacement for cva
import { cv } from '@intrnl/cv';
const button = cv('button', {
variants: {
variant: {
contained: 'button--variant-contained',
text: 'button--variant-text',
outlined: 'button--variant-outlined',
},
color: {
primary: '',
error: '',
},
rounded: {
true: 'button--rounded',
false: null,
},
},
defaultVariants: {
variant: 'text',
rounded: true,
},
compoundVariants: [
{
variant: 'contained',
color: 'primary',
className: 'button--contained-primary',
},
],
});
Benchmarks
These benchmark cases are taken from an actual project, your mileage may vary, however.
Node.js 19.5.0 / V8
$ pnpm exec vite-node bench.js
cpu: AMD Ryzen 7 5700U with Radeon Graphics
runtime: node v19.5.0 (x64-linux)
benchmark time (avg) (min ... max) p75 p99 p995
------------------------------------------------- -----------------------------
• paper
------------------------------------------------- -----------------------------
cv 271.26 ns/iter (256.93 ns ... 539.72 ns) 280.49 ns 507.75 ns 539.72 ns
cva 4.51 μs/iter (4.43 μs ... 4.73 μs) 4.54 μs 4.73 μs 4.73 μs
summary for paper
cv
16.64x faster than cva
• button
------------------------------------------------- -----------------------------
cv 14.43 μs/iter (11.64 μs ... 3.95 ms) 13.24 μs 19.02 μs 30.02 μs
cva 112.13 μs/iter (93.11 μs ... 4.14 ms) 98.16 μs 239.55 μs 322.11 μs
summary for button
cv
7.77x faster than cva
• iconButton
------------------------------------------------- -----------------------------
cv 5.88 μs/iter (5.48 μs ... 5.98 μs) 5.93 μs 5.98 μs 5.98 μs
cva 14.28 μs/iter (12.8 μs ... 3.92 ms) 13.75 μs 16.46 μs 17.07 μs
summary for iconButton
cv
2.43x faster than cva
• tableCell
------------------------------------------------- -----------------------------
cv 114.64 ns/iter (88.12 ns ... 259.32 ns) 163.09 ns 207.77 ns 221.94 ns
cva 5.07 μs/iter (4.97 μs ... 5.17 μs) 5.11 μs 5.17 μs 5.17 μs
summary for tableCell
cv
44.22x faster than cva
Bun 0.5.3 / JavaScriptCore
$ bun bench.js
cpu: AMD Ryzen 7 5700U with Radeon Graphics
runtime: bun 0.5.3 (x64-linux)
benchmark time (avg) (min ... max) p75 p99 p995
------------------------------------------------- -----------------------------
• paper
------------------------------------------------- -----------------------------
cv 229.81 ns/iter (213.94 ns ... 501.96 ns) 226.23 ns 309.87 ns 334.39 ns
cva 1.5 μs/iter (1.44 μs ... 2.28 μs) 1.48 μs 2.28 μs 2.28 μs
summary for paper
cv
6.53x faster than cva
• button
------------------------------------------------- -----------------------------
cv 4.47 μs/iter (4.05 μs ... 458.12 μs) 4.51 μs 6.76 μs 7.08 μs
cva 34.69 μs/iter (30.68 μs ... 1.5 ms) 34.58 μs 73.02 μs 77.1 μs
summary for button
cv
7.76x faster than cva
• iconButton
------------------------------------------------- -----------------------------
cv 1.81 μs/iter (1.79 μs ... 1.86 μs) 1.83 μs 1.86 μs 1.86 μs
cva 5.75 μs/iter (5.69 μs ... 6.16 μs) 5.74 μs 6.16 μs 6.16 μs
summary for iconButton
cv
3.17x faster than cva
• tableCell
------------------------------------------------- -----------------------------
cv 134.43 ns/iter (125.64 ns ... 285.45 ns) 131.5 ns 221.18 ns 279.19 ns
cva 1.1 μs/iter (1.08 μs ... 1.27 μs) 1.11 μs 1.27 μs 1.27 μs
summary for tableCell
cv
8.22x faster than cva