css-variants 1.1.0 → 1.1.2

package/README.md

@@ -5,22 +5,30 @@
 [![npm](https://img.shields.io/npm/dm/css-variants)](https://npmjs.com/package/css-variants)
 ![npm](https://img.shields.io/npm/v/css-variants)
 
-# A powerful and flexible package for managing style-based variants
+# css-variants
 
-Creating variants with the "traditional" CSS approach can become an arduous task; manually matching classes to props and manually adding types.
+A lightweight, flexible API for managing CSS class variants in JavaScript and TypeScript projects.
 
-`css-variants` aims to take those pain points away, allowing you to focus on the more fun aspects of UI development.
+## Overview
 
-`css-variants` is heavily inspired by [CVA](https://github.com/joe-bell/cva), [Tailwind Variants](https://github.com/nextui-org/tailwind-variants) and [Panda CSS](https://github.com/chakra-ui/panda).
+`css-variants` provides a simple yet powerful way to handle dynamic class names and inline styles based on component props or state. It's designed to work seamlessly with modern JavaScript frameworks and CSS methodologies, offering a type-safe approach to styling your UI components.
+
+`css-variants` is heavily inspired by the following excellent packages:
+
+- [CVA (Class Variance Authority)](https://github.com/joe-bell/cva): A powerful utility for creating dynamic class names with variants.
+- [Tailwind Variants](https://github.com/nextui-org/tailwind-variants): A flexible and reusable variant system for Tailwind CSS.
+- [Panda CSS](https://github.com/chakra-ui/panda): A CSS-in-JS solution with a focus on developer experience and performance.
+
+Thank you to the authors and contributors of these projects for their innovative work.
 
 ## Features
-- First-class variant API
-- Inline-style support
-- Slots support
-- Fully type-safe
-- Framework agnostic
-- Supports custom strategies like `tailwind-merge`
-- Light-weight without any dependencies
+
+- 🎨 Dynamic class name generation based on variants
+- 🔧 Support for inline styles alongside class names
+- 🧩 Slot-based variant system for complex components
+- 📦 Zero dependencies
+- 🔒 Fully type-safe with TypeScript
+- 🚀 Framework-agnostic
 
 ## Table of Contents
 * [Installation](#installation)
@@ -33,6 +41,9 @@ Creating variants with the "traditional" CSS approach can become an arduous task
 * [Slots](#events)
   * [Basic Usage](#basic-usage)
   * [Slots with variants](#slots-with-variants)
+* [Overriding styles](#overriding-styles)
+  * [Overriding styles on a single component](#overriding-styles-on-a-single-component)
+  * [Overriding styles on a component with slots](#overriding-styles-on-a-component-with-slots)
 * [Handling Style Conflicts](#handling-style-conflicts)
 * [TypeScript](#typeScript)
 * [Contribute](#contribute)
@@ -255,7 +266,7 @@ const notification = cv({
       style: { fontSize: 16 },
     },
   },
-});
+})
 
 notification()
 /**
@@ -304,7 +315,7 @@ const notification = cv({
       },
     }
   },
-});
+})
 
 notification({ color: 'primary' })
 /**
@@ -345,13 +356,95 @@ notification({ color: 'secondary' })
  */
 ```
 
+## Overriding styles
+
+`css-variants` allows you to override or extend the styles of your components. This feature is useful when you need to add custom styles or modify existing ones without changing the original component definition.
+
+### Overriding styles on a single component
+
+You can override or extend styles for a single component by passing additional `className` and `style` properties when calling the component function. These will be merged with the existing styles.
+
+```ts
+import { cv } from 'css-variants'
+ 
+const button = cv({
+  base: 'font-semibold',
+  variants: {
+    color: {
+      primary: 'bg-blue-500 hover:bg-blue-700',
+      secondary: 'bg-purple-500 hover:bg-purple-700',
+    }
+  }
+})
+ 
+button({
+  color: 'secondary',
+  className: 'border-purple-600',
+  style: {
+    color: 'purple',
+  },
+})
+ 
+/**
+ * Result:
+ * {
+ *    className: 'bg-purple-500 hover:bg-purple-700 border-purple-600',
+ *    style: { color: 'purple' },
+ * }
+ */
+```
+
+### Overriding styles on a component with slots
+
+For components with slots, you can override styles using the `classNames` and `styles` properties. These allow you to target specific slots and apply custom classes or inline styles.
+
+```ts
+import { csv } from 'css-variants'
+
+const notification = cv({
+  slots: ['root', 'title'],
+  base: {
+    root: 'root',
+    title: {
+      className: 'title',
+      style: { fontSize: 16 },
+    },
+  },
+})
+
+notification({
+  classNames: {
+    root: 'root-custom-class',
+  },
+  styles: {
+    title: {
+      fontSize: 20,
+    }
+  },
+})
+/**
+ * Result:
+ * {
+ *    root: {
+ *      className: 'root-custom-class',
+ *      style: {},
+ *    },
+ *    title: {
+ *      className: 'title',
+ *      style: { fontSize: 20 },
+ *    },
+ * }
+ */
+
+```
+
 ## Handling Style Conflicts
 
-Although `css-variants` is designed to help you avoid styling conflicts, there's still a small margin of error.
+Although `css-variants` is designed to help you avoid styling conflicts, there's still a small margin of error when combining multiple classes or variants. To further minimize these conflicts and ensure consistent styling, you can integrate `tailwind-merge` into your project.
 
-If you're keen to lift that burden altogether, check out the wonderful `tailwind-merge` package.
+`tailwind-merge` is a utility that intelligently combines Tailwind CSS classes, resolving conflicts by giving precedence to the latter class when two classes target the same style property. By incorporating `tailwind-merge` with `css-variants`, you can create more robust components that automatically handle class conflicts.
 
-For bulletproof components, wrap your `cx`, `cv`, `csv` component with `twMerge`.
+The following example demonstrates how to extend functions from `css-variants` to use `tailwind-merge`. This integration ensures that your components will have consistent styling, even when multiple classes or variants are applied.
 
 ```ts
 import { twMerge } from 'tailwind-merge'

package/dist/cjs/csv.js

@@ -3,20 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.csv = void 0;
 const utils_1 = require("./utils");
 const push = (data, key, value) => {
-    if (value) {
-        if (data[key] === undefined) {
-            data[key] = { className: '', style: {} };
+    if (data[key] === undefined)
+        data[key] = { className: '', style: {} };
+    if (typeof value === 'string') {
+        data[key].className && (data[key].className += ' ');
+        data[key].className += value;
+    }
+    else {
+        if (value.className) {
+            data[key].className && (data[key].className += ' ');
+            data[key].className += value.className;
         }
-        if (typeof value === 'string') {
-            data[key].className += (data[key].className ? ' ' : '') + value.trim();
-        }
-        else {
-            if (value.className) {
-                data[key].className += (data[key].className ? ' ' : '') + value.className.trim();
-            }
-            if (value.style) {
-                data[key].style = { ...data[key].style, ...value.style };
-            }
+        if (value.style) {
+            data[key].style = { ...data[key].style, ...value.style };
         }
     }
 };
@@ -24,28 +23,49 @@ const csv = (config) => {
     const { slots, base, variants, compoundVariants, defaultVariants, onDone } = config;
     return (props) => {
         const { classNames: propClassNames, styles: propStyles, ...rest } = props ?? {};
-        const data = {};
         const variantProps = { ...defaultVariants, ...(0, utils_1.compact)(rest) };
-        for (const [key, value] of (0, utils_1.entries)(base)) {
-            push(data, key, value);
+        const data = {};
+        let tmp;
+        if (base) {
+            for (const [key, value] of (0, utils_1.entries)(base)) {
+                if (value) {
+                    push(data, key, value);
+                }
+            }
         }
-        for (const [propKey, propValue] of (0, utils_1.entries)(variantProps)) {
-            for (const [key, value] of (0, utils_1.entries)(variants?.[propKey]?.[propValue])) {
-                push(data, key, value);
+        if (variants) {
+            for (const [key, variant] of (0, utils_1.entries)(variants)) {
+                if ((tmp = variant[variantProps[key]])) {
+                    for (const [key, value] of (0, utils_1.entries)(tmp)) {
+                        if (value) {
+                            push(data, key, value);
+                        }
+                    }
+                }
             }
         }
-        for (const { classNames: cvClassNames, styles: cvStyles, ...compoundVariant } of compoundVariants ?? []) {
-            if ((0, utils_1.match)(compoundVariant, variantProps)) {
-                for (const [key, value] of (0, utils_1.entries)(cvClassNames))
-                    push(data, key, { className: value });
-                for (const [key, value] of (0, utils_1.entries)(cvStyles))
-                    push(data, key, { style: value });
+        if (compoundVariants) {
+            for (const { classNames: cvClassNames, styles: cvStyles, ...compoundVariant } of compoundVariants) {
+                if ((0, utils_1.match)(compoundVariant, variantProps)) {
+                    if (cvClassNames) {
+                        for (const [key, value] of (0, utils_1.entries)(cvClassNames))
+                            push(data, key, { className: value });
+                    }
+                    if (cvStyles) {
+                        for (const [key, value] of (0, utils_1.entries)(cvStyles))
+                            push(data, key, { style: value });
+                    }
+                }
             }
         }
-        for (const [key, value] of (0, utils_1.entries)(propClassNames))
-            push(data, key, { className: value });
-        for (const [key, value] of (0, utils_1.entries)(propStyles))
-            push(data, key, { style: value });
+        if (propClassNames) {
+            for (const [key, value] of (0, utils_1.entries)(propClassNames))
+                push(data, key, { className: value });
+        }
+        if (propStyles) {
+            for (const [key, value] of (0, utils_1.entries)(propStyles))
+                push(data, key, { style: value });
+        }
         const css = (0, utils_1.fromEntries)(slots.map((slot) => [
             slot,
             {

package/dist/cjs/csv.js.map

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

package/dist/cjs/cv.js

@@ -4,11 +4,13 @@ exports.cv = void 0;
 const utils_1 = require("./utils");
 const push = (data, value) => {
     if (typeof value === 'string') {
-        data.className += (data.className ? ' ' : '') + value.trim();
+        data.className && (data.className += ' ');
+        data.className += value.trim();
     }
     else {
         if (value?.className) {
-            data.className += (data.className ? ' ' : '') + value.className.trim();
+            data.className && (data.className += ' ');
+            data.className += value.className.trim();
         }
         if (value?.style) {
             data.style = { ...data.style, ...value.style };
@@ -19,18 +21,20 @@ const cv = (config) => {
     const { base, variants, compoundVariants, defaultVariants, onDone } = config;
     return (props) => {
         const { className: propClassName, style: propStyle, ...rest } = props ?? {};
-        const css = { className: '', style: {} };
         const variantProps = { ...defaultVariants, ...(0, utils_1.compact)(rest) };
+        const css = { className: '', style: {} };
+        let tmp;
         if (base) {
             push(css, base);
         }
-        for (const [propKey, propValue] of (0, utils_1.entries)(variantProps)) {
-            const value = variants?.[propKey]?.[propValue];
-            if (value) {
-                push(css, value);
+        if (variants) {
+            for (const [key, variant] of (0, utils_1.entries)(variants)) {
+                if ((tmp = variant[variantProps[key]])) {
+                    push(css, tmp);
+                }
             }
         }
-        if (compoundVariants?.length) {
+        if (compoundVariants) {
             for (const { className: cvClassName, style: cvStyle, ...compoundVariant } of compoundVariants) {
                 if ((0, utils_1.match)(compoundVariant, variantProps)) {
                     push(css, { className: cvClassName, style: cvStyle });
@@ -38,7 +42,8 @@ const cv = (config) => {
             }
         }
         if (propClassName) {
-            css.className += (css.className ? ' ' : '') + propClassName;
+            css.className && (css.className += ' ');
+            css.className += propClassName;
         }
         if (propStyle) {
             css.style = { ...css.style, ...propStyle };

package/dist/cjs/cv.js.map

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

package/dist/cjs/cx.js

@@ -10,7 +10,7 @@ const cx = (...args) => {
         if ((arg = args[i])) {
             if (typeof arg === 'string') {
                 className && (className += ' ');
-                className += arg.trim();
+                className += arg;
             }
             else if (typeof arg === 'number') {
                 className && (className += ' ');

package/dist/cjs/cx.js.map

@@ -1 +1 @@
-{"version":3,"file":"cx.js","sourceRoot":"","sources":["../../src/cx.ts"],"names":[],"mappings":";;;AAEO,MAAM,EAAE,GAAG,CAAC,GAAG,IAAqB,EAAE,EAAE;IAC7C,IAAI,SAAS,GAAG,EAAE,CAAA;IAClB,IAAI,CAAC,GAAG,CAAC,CAAA;IACT,IAAI,GAAgB,CAAA;IACpB,IAAI,IAAY,CAAA;IAEhB,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACpB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC5B,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;gBAC/B,SAAS,IAAI,GAAG,CAAC,IAAI,EAAE,CAAA;YACzB,CAAC;iBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACnC,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;gBAC/B,SAAS,IAAI,GAAG,CAAA;YAClB,CAAC;iBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACnC,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;oBACvB,IAAI,CAAC,IAAI,GAAG,IAAA,UAAE,EAAC,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC;wBACxB,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;wBAC/B,SAAS,IAAI,IAAI,CAAA;oBACnB,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;wBACtB,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;4BACb,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;4BAC/B,SAAS,IAAI,GAAG,CAAA;wBAClB,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAjCY,QAAA,EAAE,MAiCd;AAED,kBAAe,UAAE,CAAA"}
+{"version":3,"file":"cx.js","sourceRoot":"","sources":["../../src/cx.ts"],"names":[],"mappings":";;;AAEO,MAAM,EAAE,GAAG,CAAC,GAAG,IAAqB,EAAE,EAAE;IAC7C,IAAI,SAAS,GAAG,EAAE,CAAA;IAClB,IAAI,CAAC,GAAG,CAAC,CAAA;IACT,IAAI,GAAgB,CAAA;IACpB,IAAI,IAAY,CAAA;IAEhB,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACpB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC5B,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;gBAC/B,SAAS,IAAI,GAAG,CAAA;YAClB,CAAC;iBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACnC,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;gBAC/B,SAAS,IAAI,GAAG,CAAA;YAClB,CAAC;iBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACnC,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;oBACvB,IAAI,CAAC,IAAI,GAAG,IAAA,UAAE,EAAC,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC;wBACxB,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;wBAC/B,SAAS,IAAI,IAAI,CAAA;oBACnB,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;wBACtB,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;4BACb,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;4BAC/B,SAAS,IAAI,GAAG,CAAA;wBAClB,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAjCY,QAAA,EAAE,MAiCd;AAED,kBAAe,UAAE,CAAA"}

package/dist/cjs/types.d.ts

@@ -5,7 +5,9 @@ export type PartialRecord<S extends string, T> = Partial<Record<S, T>>;
 export type RequireAtLeastOne<T> = {
     [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>;
 }[keyof T];
-export type CssProperties = Properties<string | number>;
+export type CssProperties = Properties<string | number> & {
+    [key: `--${string}`]: string | number;
+};
 export type VariantStyle = {
     className: string;
     style: CssProperties;

package/dist/cjs/utils.d.ts

@@ -1,4 +1,4 @@
-export declare const entries: <T extends object, TK extends Extract<keyof T, string>, TV extends T[TK], TEntry extends [TK, TV]>(obj?: T) => TEntry[];
+export declare const entries: <T extends object, TK extends Extract<keyof T, string>, TV extends T[TK], TEntry extends [TK, TV]>(obj: T) => TEntry[];
 export declare function fromEntries<A extends symbol | string | number, B>(entries: [A, B][]): {
     [key in A]: B;
 };

package/dist/cjs/utils.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.match = exports.compact = exports.entries = void 0;
 exports.fromEntries = fromEntries;
 const entries = (obj) => {
-    if (!obj)
-        return [];
     return Object.entries(obj);
 };
 exports.entries = entries;

package/dist/cjs/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":";;;AAYA,kCAMC;AAlBM,MAAM,OAAO,GAAG,CAMrB,GAAO,EACG,EAAE;IACZ,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,CAAA;IACnB,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG,CAAa,CAAA;AACxC,CAAC,CAAA;AAVY,QAAA,OAAO,WAUnB;AAED,SAAgB,WAAW,CAAwC,OAAiB;IAClF,MAAM,MAAM,GAAsB,EAAuB,CAAA;IACzD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACvC,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAEM,MAAM,OAAO,GAAG,CAAoC,GAAM,EAAE,EAAE;IACnE,MAAM,MAAM,GAAG,EAAO,CAAA;IAEtB,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;QACpB,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE,CAAC;YACzB,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QACpB,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAVY,QAAA,OAAO,WAUnB;AAEM,MAAM,KAAK,GAAG,CAAuC,IAAQ,EAAE,IAAQ,EAAE,EAAE;IAChF,KAAK,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAwB,CAAC,CAAA;QAC3C,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAAE,OAAO,KAAK,CAAA;QACxC,CAAC;aAAM,CAAC;YACN,IAAK,IAAgB,KAAK,IAAI;gBAAE,OAAO,KAAK,CAAA;QAC9C,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAXY,QAAA,KAAK,SAWjB"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":";;;AAWA,kCAMC;AAjBM,MAAM,OAAO,GAAG,CAMrB,GAAM,EACI,EAAE;IACZ,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG,CAAa,CAAA;AACxC,CAAC,CAAA;AATY,QAAA,OAAO,WASnB;AAED,SAAgB,WAAW,CAAwC,OAAiB;IAClF,MAAM,MAAM,GAAsB,EAAuB,CAAA;IACzD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACvC,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAEM,MAAM,OAAO,GAAG,CAAoC,GAAM,EAAE,EAAE;IACnE,MAAM,MAAM,GAAG,EAAO,CAAA;IAEtB,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;QACpB,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE,CAAC;YACzB,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QACpB,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAVY,QAAA,OAAO,WAUnB;AAEM,MAAM,KAAK,GAAG,CAAuC,IAAQ,EAAE,IAAQ,EAAE,EAAE;IAChF,KAAK,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAwB,CAAC,CAAA;QAC3C,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAAE,OAAO,KAAK,CAAA;QACxC,CAAC;aAAM,CAAC;YACN,IAAK,IAAgB,KAAK,IAAI;gBAAE,OAAO,KAAK,CAAA;QAC9C,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAXY,QAAA,KAAK,SAWjB"}

package/dist/esm/csv.js

@@ -1,19 +1,18 @@
 import { compact, entries, fromEntries, match } from './utils';
 const push = (data, key, value) => {
-    if (value) {
-        if (data[key] === undefined) {
-            data[key] = { className: '', style: {} };
+    if (data[key] === undefined)
+        data[key] = { className: '', style: {} };
+    if (typeof value === 'string') {
+        data[key].className && (data[key].className += ' ');
+        data[key].className += value;
+    }
+    else {
+        if (value.className) {
+            data[key].className && (data[key].className += ' ');
+            data[key].className += value.className;
         }
-        if (typeof value === 'string') {
-            data[key].className += (data[key].className ? ' ' : '') + value.trim();
-        }
-        else {
-            if (value.className) {
-                data[key].className += (data[key].className ? ' ' : '') + value.className.trim();
-            }
-            if (value.style) {
-                data[key].style = { ...data[key].style, ...value.style };
-            }
+        if (value.style) {
+            data[key].style = { ...data[key].style, ...value.style };
         }
     }
 };
@@ -21,28 +20,49 @@ export const csv = (config) => {
     const { slots, base, variants, compoundVariants, defaultVariants, onDone } = config;
     return (props) => {
         const { classNames: propClassNames, styles: propStyles, ...rest } = props ?? {};
-        const data = {};
         const variantProps = { ...defaultVariants, ...compact(rest) };
-        for (const [key, value] of entries(base)) {
-            push(data, key, value);
+        const data = {};
+        let tmp;
+        if (base) {
+            for (const [key, value] of entries(base)) {
+                if (value) {
+                    push(data, key, value);
+                }
+            }
         }
-        for (const [propKey, propValue] of entries(variantProps)) {
-            for (const [key, value] of entries(variants?.[propKey]?.[propValue])) {
-                push(data, key, value);
+        if (variants) {
+            for (const [key, variant] of entries(variants)) {
+                if ((tmp = variant[variantProps[key]])) {
+                    for (const [key, value] of entries(tmp)) {
+                        if (value) {
+                            push(data, key, value);
+                        }
+                    }
+                }
             }
         }
-        for (const { classNames: cvClassNames, styles: cvStyles, ...compoundVariant } of compoundVariants ?? []) {
-            if (match(compoundVariant, variantProps)) {
-                for (const [key, value] of entries(cvClassNames))
-                    push(data, key, { className: value });
-                for (const [key, value] of entries(cvStyles))
-                    push(data, key, { style: value });
+        if (compoundVariants) {
+            for (const { classNames: cvClassNames, styles: cvStyles, ...compoundVariant } of compoundVariants) {
+                if (match(compoundVariant, variantProps)) {
+                    if (cvClassNames) {
+                        for (const [key, value] of entries(cvClassNames))
+                            push(data, key, { className: value });
+                    }
+                    if (cvStyles) {
+                        for (const [key, value] of entries(cvStyles))
+                            push(data, key, { style: value });
+                    }
+                }
             }
         }
-        for (const [key, value] of entries(propClassNames))
-            push(data, key, { className: value });
-        for (const [key, value] of entries(propStyles))
-            push(data, key, { style: value });
+        if (propClassNames) {
+            for (const [key, value] of entries(propClassNames))
+                push(data, key, { className: value });
+        }
+        if (propStyles) {
+            for (const [key, value] of entries(propStyles))
+                push(data, key, { style: value });
+        }
         const css = fromEntries(slots.map((slot) => [
             slot,
             {

package/dist/esm/csv.js.map

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

package/dist/esm/cv.js

@@ -1,11 +1,13 @@
 import { compact, entries, match } from './utils';
 const push = (data, value) => {
     if (typeof value === 'string') {
-        data.className += (data.className ? ' ' : '') + value.trim();
+        data.className && (data.className += ' ');
+        data.className += value.trim();
     }
     else {
         if (value?.className) {
-            data.className += (data.className ? ' ' : '') + value.className.trim();
+            data.className && (data.className += ' ');
+            data.className += value.className.trim();
         }
         if (value?.style) {
             data.style = { ...data.style, ...value.style };
@@ -16,18 +18,20 @@ export const cv = (config) => {
     const { base, variants, compoundVariants, defaultVariants, onDone } = config;
     return (props) => {
         const { className: propClassName, style: propStyle, ...rest } = props ?? {};
-        const css = { className: '', style: {} };
         const variantProps = { ...defaultVariants, ...compact(rest) };
+        const css = { className: '', style: {} };
+        let tmp;
         if (base) {
             push(css, base);
         }
-        for (const [propKey, propValue] of entries(variantProps)) {
-            const value = variants?.[propKey]?.[propValue];
-            if (value) {
-                push(css, value);
+        if (variants) {
+            for (const [key, variant] of entries(variants)) {
+                if ((tmp = variant[variantProps[key]])) {
+                    push(css, tmp);
+                }
             }
         }
-        if (compoundVariants?.length) {
+        if (compoundVariants) {
             for (const { className: cvClassName, style: cvStyle, ...compoundVariant } of compoundVariants) {
                 if (match(compoundVariant, variantProps)) {
                     push(css, { className: cvClassName, style: cvStyle });
@@ -35,7 +39,8 @@ export const cv = (config) => {
             }
         }
         if (propClassName) {
-            css.className += (css.className ? ' ' : '') + propClassName;
+            css.className && (css.className += ' ');
+            css.className += propClassName;
         }
         if (propStyle) {
             css.style = { ...css.style, ...propStyle };

package/dist/esm/cv.js.map

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

package/dist/esm/cx.js

@@ -7,7 +7,7 @@ export const cx = (...args) => {
         if ((arg = args[i])) {
             if (typeof arg === 'string') {
                 className && (className += ' ');
-                className += arg.trim();
+                className += arg;
             }
             else if (typeof arg === 'number') {
                 className && (className += ' ');

package/dist/esm/cx.js.map

@@ -1 +1 @@
-{"version":3,"file":"cx.js","sourceRoot":"","sources":["../../src/cx.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAqB,EAAE,EAAE;IAC7C,IAAI,SAAS,GAAG,EAAE,CAAA;IAClB,IAAI,CAAC,GAAG,CAAC,CAAA;IACT,IAAI,GAAgB,CAAA;IACpB,IAAI,IAAY,CAAA;IAEhB,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACpB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC5B,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;gBAC/B,SAAS,IAAI,GAAG,CAAC,IAAI,EAAE,CAAA;YACzB,CAAC;iBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACnC,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;gBAC/B,SAAS,IAAI,GAAG,CAAA;YAClB,CAAC;iBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACnC,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;oBACvB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC;wBACxB,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;wBAC/B,SAAS,IAAI,IAAI,CAAA;oBACnB,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;wBACtB,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;4BACb,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;4BAC/B,SAAS,IAAI,GAAG,CAAA;wBAClB,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED,eAAe,EAAE,CAAA"}
+{"version":3,"file":"cx.js","sourceRoot":"","sources":["../../src/cx.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAqB,EAAE,EAAE;IAC7C,IAAI,SAAS,GAAG,EAAE,CAAA;IAClB,IAAI,CAAC,GAAG,CAAC,CAAA;IACT,IAAI,GAAgB,CAAA;IACpB,IAAI,IAAY,CAAA;IAEhB,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACpB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC5B,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;gBAC/B,SAAS,IAAI,GAAG,CAAA;YAClB,CAAC;iBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACnC,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;gBAC/B,SAAS,IAAI,GAAG,CAAA;YAClB,CAAC;iBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACnC,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;oBACvB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC;wBACxB,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;wBAC/B,SAAS,IAAI,IAAI,CAAA;oBACnB,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;wBACtB,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;4BACb,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;4BAC/B,SAAS,IAAI,GAAG,CAAA;wBAClB,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED,eAAe,EAAE,CAAA"}

package/dist/esm/types.d.ts

@@ -5,7 +5,9 @@ export type PartialRecord<S extends string, T> = Partial<Record<S, T>>;
 export type RequireAtLeastOne<T> = {
     [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>;
 }[keyof T];
-export type CssProperties = Properties<string | number>;
+export type CssProperties = Properties<string | number> & {
+    [key: `--${string}`]: string | number;
+};
 export type VariantStyle = {
     className: string;
     style: CssProperties;

package/dist/esm/utils.d.ts

@@ -1,4 +1,4 @@
-export declare const entries: <T extends object, TK extends Extract<keyof T, string>, TV extends T[TK], TEntry extends [TK, TV]>(obj?: T) => TEntry[];
+export declare const entries: <T extends object, TK extends Extract<keyof T, string>, TV extends T[TK], TEntry extends [TK, TV]>(obj: T) => TEntry[];
 export declare function fromEntries<A extends symbol | string | number, B>(entries: [A, B][]): {
     [key in A]: B;
 };

package/dist/esm/utils.js

@@ -1,6 +1,4 @@
 export const entries = (obj) => {
-    if (!obj)
-        return [];
     return Object.entries(obj);
 };
 export function fromEntries(entries) {

package/dist/esm/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,CAMrB,GAAO,EACG,EAAE;IACZ,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,CAAA;IACnB,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG,CAAa,CAAA;AACxC,CAAC,CAAA;AAED,MAAM,UAAU,WAAW,CAAwC,OAAiB;IAClF,MAAM,MAAM,GAAsB,EAAuB,CAAA;IACzD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACvC,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAoC,GAAM,EAAE,EAAE;IACnE,MAAM,MAAM,GAAG,EAAO,CAAA;IAEtB,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;QACpB,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE,CAAC;YACzB,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QACpB,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAuC,IAAQ,EAAE,IAAQ,EAAE,EAAE;IAChF,KAAK,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAwB,CAAC,CAAA;QAC3C,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAAE,OAAO,KAAK,CAAA;QACxC,CAAC;aAAM,CAAC;YACN,IAAK,IAAgB,KAAK,IAAI;gBAAE,OAAO,KAAK,CAAA;QAC9C,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,CAMrB,GAAM,EACI,EAAE;IACZ,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG,CAAa,CAAA;AACxC,CAAC,CAAA;AAED,MAAM,UAAU,WAAW,CAAwC,OAAiB;IAClF,MAAM,MAAM,GAAsB,EAAuB,CAAA;IACzD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACvC,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAoC,GAAM,EAAE,EAAE;IACnE,MAAM,MAAM,GAAG,EAAO,CAAA;IAEtB,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;QACpB,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE,CAAC;YACzB,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;QACpB,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAuC,IAAQ,EAAE,IAAQ,EAAE,EAAE;IAChF,KAAK,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAwB,CAAC,CAAA;QAC3C,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAAE,OAAO,KAAK,CAAA;QACxC,CAAC;aAAM,CAAC;YACN,IAAK,IAAgB,KAAK,IAAI;gBAAE,OAAO,KAAK,CAAA;QAC9C,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-variants",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Variant API for plain class names",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",