css-variants 2.1.0 → 2.1.1

package/README.md

@@ -3,24 +3,38 @@
 [![npm](https://img.shields.io/npm/dm/css-variants)](https://npmjs.com/package/css-variants)
 ![npm](https://img.shields.io/npm/v/css-variants)
 
-# css-variants
+# css-variants — Compose class names & styles with variants
 
-A lightweight, flexible API for managing CSS class variants and inline styles in JavaScript and TypeScript projects.
+Lightweight helpers to compose class names and inline styles using "variants". Zero runtime deps, small bundle, and first-class TypeScript support.
+
+<p align="center">
+  <img src="/.github/assets/logo.png" alt="css-variants" />
+</p>
 
 ## Features
 
-- 🎨 Dynamic class name generation with variant support
-- 💅 First-class inline styles support alongside class names  
-- 🧩 Powerful slot-based variant system for complex components
-- 📦 Zero dependencies
-- 🔒 Fully type-safe with TypeScript
-- 🚀 Framework-agnostic
-- 🪶 Lightweight (~2KB gzipped)
-- 🔥 Strong tree-shaking support
-- ⚡️ Optimal runtime performance
+🌱 **Zero deps** — No runtime dependencies; tiny bundle and minimal maintenance.
+
+🐪 **Tailwind-friendly** — First-class compatibility with Tailwind via `tw-merge` (see "Tailwind Integration (tw-merge)"), so conflicting utilities are resolved predictably.
+
+🔒 **TypeScript-safe** — Strong inference and mapped-type helpers keep variant props typed correctly.
+
+🧩 **Variants & compound rules** — Simple `variants` maps plus `compoundVariants` for combination rules (e.g., size + color).
+
+🧭 **Slot support** — `scv` / `ssv` manage multiple named slots with per-slot `base`, `variants`, and overrides.
+
+⚙️ **Flexible resolver** — Default `cx`, with an option to pass a custom `classNameResolver` (recommended: `twMerge(cx(...))`).
+
+⚡ **Performance & tree-shaking** — Minimal runtime and tree-shakeable code paths for small bundles.
+
+🧪 **Developer ergonomics** — Colocated `*.test.ts` (Vitest), clear build scripts (`yarn build`) and linting (`yarn lint`).
+
+Use cases: design-system components, Tailwind + component libraries, SSR-friendly UI primitives.
 
 ## Installation
 
+Install with your preferred package manager:
+
 ```bash
 # npm
 npm install css-variants
@@ -28,22 +42,46 @@ npm install css-variants
 # yarn
 yarn add css-variants
 
-# pnpm 
+# pnpm
 pnpm add css-variants
 ```
 
+TypeScript types are included. Import the package in ESM or CJS projects:
+
+```ts
+// ESM
+import { cv, scv, cx } from 'css-variants'
+
+// CJS
+const { cv, scv, cx } = require('css-variants')
+```
+
 ## Core Utilities
 
-css-variants provides four main utilities:
+Quick reference for the main exports. Each utility has full examples below.
 
-- [cv](#class-variants-cv) - Class Variants for managing single component class names
-- [sv](#style-variants-sv) - Style Variants for managing single component inline styles
-- [scv](#slot-class-variants-scv) - Slot Class Variants for managing multiple slot class names
-- [ssv](#slot-style-variants-ssv) - Slot Style Variants for managing multiple slot inline styles
-- [cx](#class-merger-cx) - Utility for composing class names conditionally.
+- 🧩 [`cv`](#cv---class-variants) — Class Variants (single element)
+  - Use to compose class names for one element. Supports `base`, `variants`, `compoundVariants`, and `defaultVariants`.
+  - Quick: `const btn = cv({ base: 'btn', variants: { size: { sm: 'p-2', lg: 'p-4' } } })`
 
-### Class Variants ([cv](./src/cv.ts))
-For managing class names for a single component:
+- 🎨 [`sv`](#sv---style-variants) — Style Variants (single element)
+  - Compose inline style objects similarly to `cv` but returning CSS props.
+  - Quick: `const s = sv({ base: { display: 'flex' }, variants: { size: { sm: { gap: '4px' } } } })`
+
+- 🧰 [`scv`](#scv-slot-class-variants) — Slot Class Variants (multi-slot)
+  - Manage class names across named slots (`slots: ['root','title']`) with per-slot `base`, `variants`, and `classNames` overrides.
+  - Quick: `const card = scv({ slots: ['root','title'], base: { root: 'card' } })`
+
+- 🧾 [`ssv`](#ssv---slot-style-variants) — Slot Style Variants (multi-slot styles)
+  - Same as `scv` but composes inline style objects per slot.
+
+- ⚙️ [`cx`](#cx---class-merger) — Class merger
+  - Small, typed `clsx`-like utility used as the default `classNameResolver`.
+  - Quick: `cx('a', { b: true }, ['c']) // => 'a b c'`
+
+### [cv](./src/cv.ts) - Class Variants
+Compose class names for a single element. Config keys: `base`, `variants`, `defaultVariants`, `compoundVariants`, and optional `classNameResolver` (defaults to `cx`).
+`cv` returns a typed function you call with variant props (and optional `className`) to get the final class string.
 
 ```ts
 import { cv } from 'css-variants'
@@ -81,9 +119,10 @@ button({ size: 'lg' }) // => 'font-bold rounded-lg bg-blue-500 text-white text-l
 button({ size: 'lg', className: 'custom' }) // => 'font-bold rounded-lg bg-blue-500 text-white text-lg px-4 py-2 uppercase custom'
 ```
 
-### Style Variants ([sv](./src/sv.ts))
+### [sv](./src/sv.ts) - Style Variants
 
-For managing inline styles:
+Compose inline style objects for a single element. Config keys: `base`, `variants`, `defaultVariants`, and `compoundVariants`.
+`sv` returns a typed function that accepts variant props and an optional `style` object which is shallow-merged into the result.
 
 ```ts
 import { sv } from 'css-variants'
@@ -118,9 +157,13 @@ button({
 // => { fontWeight: 'bold', borderRadius: '8px', backgroundColor: 'gray', color: 'white', padding: '4px' }
 ```
 
-### Slot Class Variants ([scv](./src/scv.ts))
+### [scv](./src/scv.ts) - Slot Class Variants
 
-For managing class names across multiple slots/elements:
+Compose and merge class names across named slots.
+`scv` accepts `slots` plus per-slot `base`, `variants`, `compoundVariants`,
+and runtime `classNames` overrides, and returns an object mapping each slot to
+its final merged class string. Ideal for components with multiple sub-elements
+(for example: `root`, `title`, `content`).
 
 ```ts
 import { scv } from 'css-variants'
@@ -167,9 +210,13 @@ card({
 // }
 ```
 
-### Slot Style Variants ([ssv](./src/ssv.ts))
+### [ssv](./src/ssv.ts) - Slot Style Variants
 
-For managing inline styles across multiple slots:
+Compose and merge inline style objects across named slots.
+`ssv` accepts `slots` plus per-slot `base`, `variants`, `compoundVariants`,
+and runtime `styles` overrides, and returns an object mapping each slot to
+its final merged style. Useful for components with multiple styled
+sub-elements (for example: `root`, `title`, `content`).
 
 ```ts
 import { ssv } from 'css-variants'
@@ -215,7 +262,7 @@ card({
 // }
 ```
 
-### Class Merger ([cx](./src/cx.ts))
+### [cx](./src/cx.ts) - Class Merger
 
 Similar to `clsx/classnames` but with better TypeScript support.
 
@@ -247,95 +294,30 @@ cx('foo', {
 cx('foo', null, undefined, false, 0, '') // => 'foo'
 ```
 
-## Advanced Features
-
-### Boolean Variants
-
-Support for boolean variants to toggle styles conditionally:
-
-```ts
-import { cv } from 'css-variants'
-
-const button = cv({
-  variants: {
-    disabled: {
-      true: 'opacity-50 cursor-not-allowed'
-    }
-  }
-})
-
-button({ disabled: true }) // => 'opacity-50 cursor-not-allowed'
-```
-
-### Compound Variants
+## Tailwind Integration (tw-merge)
 
-Apply styles based on combinations of variants:
+Use a resolver that combines `cx` with `tw-merge` to properly merge Tailwind classes
+and let `tw-merge` remove conflicting utility classes (recommended for Tailwind users).
 
 ```ts
-import { cv } from 'css-variants'
+import { cv, cx } from 'css-variants'
+import { twMerge } from 'tailwind-merge'
 
 const button = cv({
+  base: 'btn',
   variants: {
     color: {
       primary: 'bg-blue-500',
-      danger: 'bg-red-500'  
-    },
-    size: {
-      sm: 'text-sm',
-      lg: 'text-lg'
+      danger: 'bg-red-500'
     }
   },
-  compoundVariants: [
-    {
-      color: 'danger',
-      size: 'lg',
-      className: 'animate-pulse'
-    }
-  ]
+  // recommended resolver: compose `cx` then `twMerge`
+  classNameResolver: (...args) => twMerge(cx(...args))
 })
 
-button({ color: 'danger', size: 'lg' }) // => 'bg-red-500 text-lg animate-pulse'
-```
-
-### Default Variants
-
-Specify default variant values:
-
-```ts
-import { cv } from 'css-variants'
-
-const button = cv({
-  variants: {
-    size: {
-      sm: 'text-sm',
-      lg: 'text-lg'  
-    }
-  },
-  defaultVariants: {
-    size: 'sm'
-  }
-})
-
-button() // => 'text-sm'
-```
-
-### Custom Class Name Resolver
-
-Use your preferred class name utility:
-
-```ts
-import { cv } from 'css-variants'
-import { clsx } from 'clsx'
-
-const button = cv({
-  base: 'btn',
-  variants: {
-    color: {
-      primary: 'btn-primary'
-    }
-  },
-  classNameResolver: clsx
-})
+// Later classes and conflicting utilities are resolved by `tw-merge`:
+button({ color: 'primary', className: 'bg-red-600' })
+// => 'btn bg-red-600'  (tw-merge will prefer the later `bg-red-600` value)
 ```
 
 ## TypeScript Support
@@ -365,9 +347,17 @@ This library is inspired by several excellent projects:
 - [CVA (Class Variance Authority)](https://github.com/joe-bell/cva)
 - [Panda CSS](https://github.com/chakra-ui/panda)
 
+## Developer commands
+
+```bash
+yarn test   # run vitest tests
+yarn build  # build CJS + ESM artifacts into dist/
+yarn lint   # eslint + prettier
+```
+
 ## Contribute
 
-If you would like to contribute to the project, please read how to contribute here [CONTRIBUTING.md](./CONTRIBUTING.md).
+Please open PRs with focused changes and unit tests under `src/*.test.ts`. Keep runtime footprint minimal and preserve the exported API (`cv`, `sv`, `scv`, `ssv`, `cx`). See [CONTRIBUTING.md](./CONTRIBUTING.md) for process details.
 
 ## License
 

package/dist/cjs/scv.js

@@ -63,15 +63,15 @@ const scv = (config) => {
             }
         }
         for (const key in mergedProps) {
-            const slotClassValue = variants[key]?.[mergedProps[key]];
-            if (slotClassValue) {
-                for (const slot in slotClassValue) {
-                    slotClassValues[slot].push(slotClassValue[slot]);
+            const cls = variants[key]?.[mergedProps[key]];
+            if (cls) {
+                for (const slot in cls) {
+                    slotClassValues[slot]?.push(cls[slot]);
                 }
             }
         }
         if (compoundVariants) {
-            for (const { classNames: slotClassValue, ...compoundVariant } of compoundVariants) {
+            for (const { classNames: cls, ...compoundVariant } of compoundVariants) {
                 let matches = true;
                 for (const key in compoundVariant) {
                     const value = compoundVariant[key];
@@ -82,15 +82,15 @@ const scv = (config) => {
                     }
                 }
                 if (matches) {
-                    for (const slot in slotClassValue) {
-                        slotClassValues[slot].push(slotClassValue[slot]);
+                    for (const slot in cls) {
+                        slotClassValues[slot]?.push(cls[slot]);
                     }
                 }
             }
         }
         if (classNames) {
             for (const slot in classNames) {
-                slotClassValues[slot].push(classNames[slot]);
+                slotClassValues[slot]?.push(classNames[slot]);
             }
         }
         const result = {};

package/dist/cjs/scv.js.map

@@ -1 +1 @@
-{"version":3,"file":"scv.js","sourceRoot":"","sources":["../../src/scv.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"scv.js","sourceRoot":"","sources":["../../src/scv.ts"],"names":[],"mappings":"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"}

package/dist/cjs/utils/types.d.ts

@@ -5,10 +5,10 @@ export type RequireAtLeastOne<T> = {
     [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>;
 }[keyof T];
 export type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
-export type ObjectKeyPicker<T> = keyof never extends keyof T ? Record<string, unknown> : {
+export type ObjectKeyPicker<T> = [keyof T] extends [never] ? Record<string, unknown> : {
     [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined;
 };
-export type ObjectKeyArrayPicker<T> = keyof never extends keyof T ? Record<string, unknown> : {
+export type ObjectKeyArrayPicker<T> = [keyof T] extends [never] ? Record<string, unknown> : {
     [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined;
 };
 export type CssProperties = Properties<string | number>;

package/dist/esm/scv.js

@@ -60,15 +60,15 @@ export const scv = (config) => {
             }
         }
         for (const key in mergedProps) {
-            const slotClassValue = variants[key]?.[mergedProps[key]];
-            if (slotClassValue) {
-                for (const slot in slotClassValue) {
-                    slotClassValues[slot].push(slotClassValue[slot]);
+            const cls = variants[key]?.[mergedProps[key]];
+            if (cls) {
+                for (const slot in cls) {
+                    slotClassValues[slot]?.push(cls[slot]);
                 }
             }
         }
         if (compoundVariants) {
-            for (const { classNames: slotClassValue, ...compoundVariant } of compoundVariants) {
+            for (const { classNames: cls, ...compoundVariant } of compoundVariants) {
                 let matches = true;
                 for (const key in compoundVariant) {
                     const value = compoundVariant[key];
@@ -79,15 +79,15 @@ export const scv = (config) => {
                     }
                 }
                 if (matches) {
-                    for (const slot in slotClassValue) {
-                        slotClassValues[slot].push(slotClassValue[slot]);
+                    for (const slot in cls) {
+                        slotClassValues[slot]?.push(cls[slot]);
                     }
                 }
             }
         }
         if (classNames) {
             for (const slot in classNames) {
-                slotClassValues[slot].push(classNames[slot]);
+                slotClassValues[slot]?.push(classNames[slot]);
             }
         }
         const result = {};

package/dist/esm/scv.js.map

@@ -1 +1 @@
-{"version":3,"file":"scv.js","sourceRoot":"","sources":["../../src/scv.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"scv.js","sourceRoot":"","sources":["../../src/scv.ts"],"names":[],"mappings":"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"}

package/dist/esm/utils/types.d.ts

@@ -5,10 +5,10 @@ export type RequireAtLeastOne<T> = {
     [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>;
 }[keyof T];
 export type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
-export type ObjectKeyPicker<T> = keyof never extends keyof T ? Record<string, unknown> : {
+export type ObjectKeyPicker<T> = [keyof T] extends [never] ? Record<string, unknown> : {
     [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined;
 };
-export type ObjectKeyArrayPicker<T> = keyof never extends keyof T ? Record<string, unknown> : {
+export type ObjectKeyArrayPicker<T> = [keyof T] extends [never] ? Record<string, unknown> : {
     [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined;
 };
 export type CssProperties = Properties<string | number>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "css-variants",
-  "version": "2.1.0",
-  "description": "A lightweight, flexible API for managing CSS class variants.",
+  "version": "2.1.1",
+  "description": "Lightweight helpers to compose class names and inline styles using variants. Zero runtime deps, small bundle, and first-class TypeScript support.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",