css-variants 2.1.2 → 2.2.0

package/dist/esm/sv.bench.js

@@ -0,0 +1,262 @@
+import { bench, describe } from 'vitest';
+import { sv } from './sv';
+describe('sv benchmarks', () => {
+    // Simple base style only
+    const simpleVariant = sv({
+        base: { color: 'black', fontSize: '16px' },
+    });
+    bench('base style only', () => {
+        simpleVariant();
+    });
+    // Single variant
+    const singleVariant = sv({
+        base: { fontFamily: 'sans-serif' },
+        variants: {
+            color: {
+                primary: { color: 'blue', backgroundColor: '#e3f2fd' },
+                secondary: { color: 'gray', backgroundColor: '#f5f5f5' },
+                danger: { color: 'red', backgroundColor: '#ffebee' },
+            },
+        },
+    });
+    bench('single variant', () => {
+        singleVariant({ color: 'primary' });
+    });
+    // Multiple variants
+    const multipleVariants = sv({
+        base: { display: 'inline-flex', alignItems: 'center', borderRadius: '4px' },
+        variants: {
+            color: {
+                primary: { color: 'blue', backgroundColor: '#1976d2' },
+                secondary: { color: 'white', backgroundColor: '#757575' },
+                danger: { color: 'white', backgroundColor: '#d32f2f' },
+            },
+            size: {
+                sm: { padding: '4px 8px', fontSize: '12px' },
+                md: { padding: '8px 16px', fontSize: '14px' },
+                lg: { padding: '12px 24px', fontSize: '16px' },
+            },
+            fontWeight: {
+                normal: { fontWeight: '400' },
+                medium: { fontWeight: '500' },
+                bold: { fontWeight: '700' },
+            },
+        },
+    });
+    bench('multiple variants', () => {
+        multipleVariants({ color: 'primary', size: 'md', fontWeight: 'medium' });
+    });
+    // With default variants
+    const withDefaults = sv({
+        base: { display: 'flex', transition: 'all 0.2s' },
+        variants: {
+            color: {
+                primary: { color: 'blue', backgroundColor: '#1976d2' },
+                secondary: { color: 'white', backgroundColor: '#757575' },
+                danger: { color: 'white', backgroundColor: '#d32f2f' },
+            },
+            size: {
+                sm: { padding: '4px 8px', fontSize: '12px' },
+                md: { padding: '8px 16px', fontSize: '14px' },
+                lg: { padding: '12px 24px', fontSize: '16px' },
+            },
+        },
+        defaultVariants: {
+            color: 'primary',
+            size: 'md',
+        },
+    });
+    bench('with default variants (no props)', () => {
+        withDefaults();
+    });
+    bench('with default variants (override one)', () => {
+        withDefaults({ size: 'lg' });
+    });
+    // Compound variants
+    const withCompoundVariants = sv({
+        base: { display: 'inline-flex', borderRadius: '4px' },
+        variants: {
+            color: {
+                primary: { color: 'white', backgroundColor: '#1976d2' },
+                secondary: { color: 'white', backgroundColor: '#757575' },
+                danger: { color: 'white', backgroundColor: '#d32f2f' },
+            },
+            size: {
+                sm: { padding: '4px 8px', fontSize: '12px' },
+                md: { padding: '8px 16px', fontSize: '14px' },
+                lg: { padding: '12px 24px', fontSize: '16px' },
+            },
+            disabled: {
+                true: { opacity: 0.5, cursor: 'not-allowed' },
+                false: { cursor: 'pointer' },
+            },
+        },
+        compoundVariants: [
+            {
+                size: 'lg',
+                color: 'primary',
+                style: { fontWeight: '700', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' },
+            },
+            {
+                size: ['sm', 'md'],
+                color: 'danger',
+                style: { fontWeight: '600' },
+            },
+            {
+                disabled: true,
+                color: ['primary', 'secondary', 'danger'],
+                style: { pointerEvents: 'none' },
+            },
+        ],
+    });
+    bench('compound variants (no match)', () => {
+        withCompoundVariants({ color: 'secondary', size: 'sm', disabled: false });
+    });
+    bench('compound variants (single match)', () => {
+        withCompoundVariants({ color: 'primary', size: 'lg', disabled: false });
+    });
+    bench('compound variants (multiple matches)', () => {
+        withCompoundVariants({ color: 'danger', size: 'sm', disabled: true });
+    });
+    // With style override
+    const withStyleOverride = sv({
+        base: { color: 'black' },
+        variants: {
+            color: {
+                primary: { backgroundColor: '#1976d2' },
+                secondary: { backgroundColor: '#757575' },
+            },
+        },
+    });
+    bench('with style override', () => {
+        withStyleOverride({
+            color: 'primary',
+            style: { margin: '8px', border: '1px solid #ccc' },
+        });
+    });
+    // Complex real-world example
+    const complexCard = sv({
+        base: {
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: '8px',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+            overflow: 'hidden',
+            transition: 'all 0.3s ease',
+        },
+        variants: {
+            elevation: {
+                low: { boxShadow: '0 1px 3px rgba(0,0,0,0.1)' },
+                medium: { boxShadow: '0 4px 6px rgba(0,0,0,0.1)' },
+                high: { boxShadow: '0 10px 20px rgba(0,0,0,0.15)' },
+            },
+            padding: {
+                none: { padding: '0' },
+                sm: { padding: '8px' },
+                md: { padding: '16px' },
+                lg: { padding: '24px' },
+            },
+            variant: {
+                outlined: { border: '1px solid #e0e0e0', boxShadow: 'none' },
+                filled: { backgroundColor: '#f5f5f5' },
+                elevated: {},
+            },
+        },
+        compoundVariants: [
+            {
+                elevation: 'high',
+                variant: 'elevated',
+                style: {
+                    transform: 'translateY(-2px)',
+                    boxShadow: '0 12px 24px rgba(0,0,0,0.2)',
+                },
+            },
+            {
+                variant: 'outlined',
+                padding: ['sm', 'md'],
+                style: { borderRadius: '4px' },
+            },
+        ],
+        defaultVariants: {
+            elevation: 'medium',
+            padding: 'md',
+            variant: 'elevated',
+        },
+    });
+    bench('complex real-world card (defaults)', () => {
+        complexCard();
+    });
+    bench('complex real-world card (with overrides)', () => {
+        complexCard({
+            elevation: 'high',
+            padding: 'lg',
+            variant: 'elevated',
+            style: { width: '100%', maxWidth: '600px' },
+        });
+    });
+    // Boolean variants
+    const booleanVariants = sv({
+        base: { display: 'inline-block' },
+        variants: {
+            disabled: {
+                true: { opacity: 0.5, cursor: 'not-allowed', pointerEvents: 'none' },
+                false: { cursor: 'pointer' },
+            },
+            loading: {
+                true: { opacity: 0.7, cursor: 'wait' },
+                false: {},
+            },
+            fullWidth: {
+                true: { width: '100%', display: 'block' },
+                false: { width: 'auto' },
+            },
+        },
+    });
+    bench('boolean variants', () => {
+        booleanVariants({ disabled: true, loading: false, fullWidth: true });
+    });
+    // No variants (edge case)
+    const noVariants = sv({
+        base: { color: 'black', fontSize: '14px' },
+    });
+    bench('no variants (optimized path)', () => {
+        noVariants({ style: { margin: '10px' } });
+    });
+    // Many CSS properties (stress test)
+    const manyProperties = sv({
+        base: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '16px',
+            margin: '8px',
+            borderRadius: '8px',
+            backgroundColor: '#ffffff',
+            color: '#000000',
+            fontSize: '14px',
+            fontWeight: '400',
+            lineHeight: '1.5',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+            transition: 'all 0.3s ease',
+        },
+        variants: {
+            theme: {
+                light: {
+                    backgroundColor: '#ffffff',
+                    color: '#000000',
+                    borderColor: '#e0e0e0',
+                },
+                dark: {
+                    backgroundColor: '#1a1a1a',
+                    color: '#ffffff',
+                    borderColor: '#333333',
+                },
+            },
+        },
+    });
+    bench('many CSS properties', () => {
+        manyProperties({ theme: 'dark' });
+    });
+});
+//# sourceMappingURL=sv.bench.js.map

package/dist/esm/sv.bench.js.map

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

package/dist/esm/sv.js

@@ -33,32 +33,37 @@ export const sv = (config) => {
         return (props) => ({ ...base, ...props?.style });
     }
     return (props) => {
-        const { style, ...rest } = props ?? {};
-        let result = { ...base };
-        const mergedProps = defaultVariants ? mergeProps(defaultVariants, rest) : rest;
+        const result = { ...base };
+        const mergedProps = mergeProps(defaultVariants, props, ['style']);
         for (const key in mergedProps) {
             const styleValue = variants[key]?.[mergedProps[key]];
             if (styleValue) {
-                result = { ...result, ...styleValue };
+                Object.assign(result, styleValue);
             }
         }
         if (compoundVariants) {
-            for (const { style: styleValue, ...compoundVariant } of compoundVariants) {
+            for (let i = 0; i < compoundVariants.length; i++) {
+                const compound = compoundVariants[i];
                 let matches = true;
-                for (const key in compoundVariant) {
-                    const value = compoundVariant[key];
+                for (const key in compound) {
+                    if (key === 'style')
+                        continue;
+                    const value = compound[key];
                     const propValue = mergedProps[key];
                     if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
                         matches = false;
                         break;
                     }
                 }
-                if (matches) {
-                    result = { ...result, ...styleValue };
+                if (matches && compound.style) {
+                    Object.assign(result, compound.style);
                 }
             }
         }
-        return { ...result, ...style };
+        if (props?.style) {
+            Object.assign(result, props.style);
+        }
+        return result;
     };
 };
 export default sv;

package/dist/esm/sv.js.map

@@ -1 +1 @@
-{"version":3,"file":"sv.js","sourceRoot":"","sources":["../../src/sv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAuBhD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,EAAE,GAA0B,CAAC,MAAM,EAAE,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,MAAM,CAAA;IAEpE,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC,CAAA;IAClD,CAAC;IAED,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;QAEtC,IAAI,MAAM,GAAkB,EAAE,GAAG,IAAI,EAAE,CAAA;QAEvC,MAAM,WAAW,GAA4B,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;QAEvG,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC9B,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG,CAAW,CAAC,CAAA;YAC9D,IAAI,UAAU,EAAE,CAAC;gBACf,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,UAAU,EAAE,CAAA;YACvC,CAAC;QACH,CAAC;QAED,IAAI,gBAAgB,EAAE,CAAC;YACrB,KAAK,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,IAAI,gBAAgB,EAAE,CAAC;gBACzE,IAAI,OAAO,GAAG,IAAI,CAAA;gBAClB,KAAK,MAAM,GAAG,IAAI,eAAe,EAAE,CAAC;oBAClC,MAAM,KAAK,GAAG,eAAe,CAAC,GAAmC,CAAC,CAAA;oBAClE,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC,CAAA;oBAClC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;wBAC5E,OAAO,GAAG,KAAK,CAAA;wBACf,MAAK;oBACP,CAAC;gBACH,CAAC;gBACD,IAAI,OAAO,EAAE,CAAC;oBACZ,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,UAAU,EAAE,CAAA;gBACvC,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,CAAA;IAChC,CAAC,CAAA;AACH,CAAC,CAAA;AAED,eAAe,EAAE,CAAA"}
+{"version":3,"file":"sv.js","sourceRoot":"","sources":["../../src/sv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAuBhD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,EAAE,GAA0B,CAAC,MAAM,EAAE,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,MAAM,CAAA;IAEpE,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC,CAAA;IAClD,CAAC;IAED,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,MAAM,GAAkB,EAAE,GAAG,IAAI,EAAE,CAAA;QAEzC,MAAM,WAAW,GAAG,UAAU,CAAC,eAAe,EAAE,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;QAEjE,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC9B,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG,CAAW,CAAC,CAAA;YAC9D,IAAI,UAAU,EAAE,CAAC;gBACf,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;YACnC,CAAC;QACH,CAAC;QAED,IAAI,gBAAgB,EAAE,CAAC;YACrB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,gBAAgB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACjD,MAAM,QAAQ,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAA;gBACpC,IAAI,OAAO,GAAG,IAAI,CAAA;gBAClB,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;oBAC3B,IAAI,GAAG,KAAK,OAAO;wBAAE,SAAQ;oBAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,GAA4B,CAAC,CAAA;oBACpD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC,CAAA;oBAClC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;wBAC5E,OAAO,GAAG,KAAK,CAAA;wBACf,MAAK;oBACP,CAAC;gBACH,CAAC;gBACD,IAAI,OAAO,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC;oBAC9B,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;gBACvC,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,KAAK,EAAE,KAAK,EAAE,CAAC;YACjB,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;QACpC,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC,CAAA;AACH,CAAC,CAAA;AAED,eAAe,EAAE,CAAA"}

package/dist/esm/utils/merge-props.d.ts

@@ -1 +1 @@
-export declare function mergeProps<T extends Record<string, unknown>>(defaultProps: T, props: T): T;
+export declare function mergeProps<T extends Record<string, unknown>, P extends Record<string, unknown>>(defaultProps: T | undefined, props: P | undefined, omitKeys?: (keyof P)[]): Record<string, unknown>;

package/dist/esm/utils/merge-props.js

@@ -1,10 +1,12 @@
-export function mergeProps(defaultProps, props) {
-    const newObj = { ...defaultProps };
-    for (const k in props) {
-        if (props[k] !== undefined) {
-            newObj[k] = props[k];
+export function mergeProps(defaultProps, props, omitKeys) {
+    const merged = { ...defaultProps };
+    if (props) {
+        for (const k in props) {
+            if (props[k] !== undefined && (!omitKeys || !omitKeys.includes(k))) {
+                merged[k] = props[k];
+            }
         }
     }
-    return newObj;
+    return merged;
 }
 //# sourceMappingURL=merge-props.js.map

package/dist/esm/utils/merge-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"merge-props.js","sourceRoot":"","sources":["../../../src/utils/merge-props.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,UAAU,CAAoC,YAAe,EAAE,KAAQ;IACrF,MAAM,MAAM,GAAG,EAAE,GAAG,YAAY,EAAE,CAAA;IAElC,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;QACtB,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE,CAAC;YAC3B,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;QACtB,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC"}
+{"version":3,"file":"merge-props.js","sourceRoot":"","sources":["../../../src/utils/merge-props.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,UAAU,CACxB,YAA2B,EAC3B,KAAoB,EACpB,QAAsB;IAEtB,MAAM,MAAM,GAA4B,EAAE,GAAG,YAAY,EAAE,CAAA;IAE3D,IAAI,KAAK,EAAE,CAAC;QACV,KAAK,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC;YACtB,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACnE,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;YACtB,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-variants",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "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",
@@ -57,7 +57,7 @@
     "@eslint/js": "^9.17.0",
     "@types/eslint__js": "^8.42.3",
     "@types/node": "^20.12.12",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/coverage-v8": "^4.0.15",
     "csstype": "^3.1.3",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
@@ -66,6 +66,6 @@
     "rimraf": "^5.0.7",
     "typescript": "^5.4.5",
     "typescript-eslint": "^7.16.1",
-    "vitest": "^2.1.8"
+    "vitest": "^4.0.15"
   }
 }