css-variants 2.0.0 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/cv.js +19 -16
- package/dist/cjs/cv.js.map +1 -1
- package/dist/cjs/scv.js +31 -16
- package/dist/cjs/scv.js.map +1 -1
- package/dist/cjs/ssv.js +29 -14
- package/dist/cjs/ssv.js.map +1 -1
- package/dist/cjs/sv.js +21 -15
- package/dist/cjs/sv.js.map +1 -1
- package/dist/esm/cv.js +19 -16
- package/dist/esm/cv.js.map +1 -1
- package/dist/esm/scv.js +31 -16
- package/dist/esm/scv.js.map +1 -1
- package/dist/esm/ssv.js +29 -14
- package/dist/esm/ssv.js.map +1 -1
- package/dist/esm/sv.js +21 -15
- package/dist/esm/sv.js.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/utils/entries.d.ts +0 -1
- package/dist/cjs/utils/entries.js +0 -7
- package/dist/cjs/utils/entries.js.map +0 -1
- package/dist/esm/utils/entries.d.ts +0 -1
- package/dist/esm/utils/entries.js +0 -4
- package/dist/esm/utils/entries.js.map +0 -1
package/dist/cjs/cv.js
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.cv = void 0;
|
|
4
4
|
const compact_1 = require("./utils/compact");
|
|
5
|
-
const entries_1 = require("./utils/entries");
|
|
6
5
|
const cx_1 = require("./cx");
|
|
7
6
|
/**
|
|
8
7
|
* Creates a class variant function that combines base classes, variants, compound variants, and default variants.
|
|
@@ -37,32 +36,36 @@ const cx_1 = require("./cx");
|
|
|
37
36
|
*/
|
|
38
37
|
const cv = (config) => {
|
|
39
38
|
const { base, variants, compoundVariants, defaultVariants, classNameResolver = cx_1.cx } = config;
|
|
39
|
+
if (!variants) {
|
|
40
|
+
return (props) => classNameResolver(base, props?.className);
|
|
41
|
+
}
|
|
40
42
|
return (props) => {
|
|
41
43
|
const { className, ...rest } = props ?? {};
|
|
42
|
-
const mergedProps = { ...defaultVariants, ...(0, compact_1.compact)(rest) };
|
|
44
|
+
const mergedProps = defaultVariants ? { ...defaultVariants, ...(0, compact_1.compact)(rest) } : rest;
|
|
43
45
|
const classValues = [];
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
for (const [key, value] of (0, entries_1.entries)(mergedProps)) {
|
|
49
|
-
const classValue = variants[key][value];
|
|
50
|
-
if (classValue) {
|
|
51
|
-
classValues.push(classValue);
|
|
52
|
-
}
|
|
46
|
+
for (const key in mergedProps) {
|
|
47
|
+
const classValue = variants[key][mergedProps[key]];
|
|
48
|
+
if (classValue) {
|
|
49
|
+
classValues.push(classValue);
|
|
53
50
|
}
|
|
54
51
|
}
|
|
55
52
|
if (compoundVariants) {
|
|
56
53
|
for (const { className: classValue, ...compoundVariant } of compoundVariants) {
|
|
57
|
-
|
|
54
|
+
let matches = true;
|
|
55
|
+
for (const key in compoundVariant) {
|
|
56
|
+
const value = compoundVariant[key];
|
|
57
|
+
const propValue = mergedProps[key];
|
|
58
|
+
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
|
|
59
|
+
matches = false;
|
|
60
|
+
break;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
if (matches) {
|
|
58
64
|
classValues.push(classValue);
|
|
59
65
|
}
|
|
60
66
|
}
|
|
61
67
|
}
|
|
62
|
-
|
|
63
|
-
classValues.push(className);
|
|
64
|
-
}
|
|
65
|
-
return classNameResolver(...classValues);
|
|
68
|
+
return classNameResolver(base, classValues, className);
|
|
66
69
|
};
|
|
67
70
|
};
|
|
68
71
|
exports.cv = cv;
|
package/dist/cjs/cv.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cv.js","sourceRoot":"","sources":["../../src/cv.ts"],"names":[],"mappings":";;;AACA,6CAAyC;AACzC,
|
|
1
|
+
{"version":3,"file":"cv.js","sourceRoot":"","sources":["../../src/cv.ts"],"names":[],"mappings":";;;AACA,6CAAyC;AACzC,6BAAqC;AAoBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACI,MAAM,EAAE,GAA0B,CAAC,MAAM,EAAE,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,iBAAiB,GAAG,OAAE,EAAE,GAAG,MAAM,CAAA;IAE5F,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CAAA;IAC7D,CAAC;IAED,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;QAE1C,MAAM,WAAW,GAA4B,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,eAAe,EAAE,GAAG,IAAA,iBAAO,EAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;QAE9G,MAAM,WAAW,GAAiB,EAAE,CAAA;QAEpC,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC9B,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,GAAG,CAAW,CAAC,CAAA;YAC5D,IAAI,UAAU,EAAE,CAAC;gBACf,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;YAC9B,CAAC;QACH,CAAC;QAED,IAAI,gBAAgB,EAAE,CAAC;YACrB,KAAK,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,IAAI,gBAAgB,EAAE,CAAC;gBAC7E,IAAI,OAAO,GAAG,IAAI,CAAA;gBAClB,KAAK,MAAM,GAAG,IAAI,eAAe,EAAE,CAAC;oBAClC,MAAM,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,CAAA;oBAClC,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,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;gBAC9B,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,CAAC,CAAA;IACxD,CAAC,CAAA;AACH,CAAC,CAAA;AAxCY,QAAA,EAAE,MAwCd;AAED,kBAAe,UAAE,CAAA"}
|
package/dist/cjs/scv.js
CHANGED
|
@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.scv = void 0;
|
|
4
4
|
const cx_1 = require("./cx");
|
|
5
5
|
const compact_1 = require("./utils/compact");
|
|
6
|
-
const entries_1 = require("./utils/entries");
|
|
7
6
|
/**
|
|
8
7
|
* Creates a slot-based class variant function that manages class names for multiple slots with variants.
|
|
9
8
|
*
|
|
@@ -42,9 +41,18 @@ const entries_1 = require("./utils/entries");
|
|
|
42
41
|
*/
|
|
43
42
|
const scv = (config) => {
|
|
44
43
|
const { slots, base, variants, compoundVariants, defaultVariants, classNameResolver = cx_1.cx } = config;
|
|
44
|
+
if (!variants) {
|
|
45
|
+
return (props) => {
|
|
46
|
+
const result = {};
|
|
47
|
+
for (const slot of slots) {
|
|
48
|
+
result[slot] = classNameResolver(base?.[slot], props?.classNames?.[slot]);
|
|
49
|
+
}
|
|
50
|
+
return result;
|
|
51
|
+
};
|
|
52
|
+
}
|
|
45
53
|
return (props) => {
|
|
46
54
|
const { classNames, ...rest } = props ?? {};
|
|
47
|
-
const mergedProps = { ...defaultVariants, ...(0, compact_1.compact)(rest) };
|
|
55
|
+
const mergedProps = defaultVariants ? { ...defaultVariants, ...(0, compact_1.compact)(rest) } : rest;
|
|
48
56
|
const slotClassValues = {};
|
|
49
57
|
for (const slot of slots) {
|
|
50
58
|
if (base?.[slot]) {
|
|
@@ -54,33 +62,40 @@ const scv = (config) => {
|
|
|
54
62
|
slotClassValues[slot] = [];
|
|
55
63
|
}
|
|
56
64
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
slotClassValues[slot].push(slotValue);
|
|
63
|
-
}
|
|
65
|
+
for (const key in mergedProps) {
|
|
66
|
+
const slotClassValue = variants[key]?.[mergedProps[key]];
|
|
67
|
+
if (slotClassValue) {
|
|
68
|
+
for (const slot in slotClassValue) {
|
|
69
|
+
slotClassValues[slot].push(slotClassValue[slot]);
|
|
64
70
|
}
|
|
65
71
|
}
|
|
66
72
|
}
|
|
67
73
|
if (compoundVariants) {
|
|
68
74
|
for (const { classNames: slotClassValue, ...compoundVariant } of compoundVariants) {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
75
|
+
let matches = true;
|
|
76
|
+
for (const key in compoundVariant) {
|
|
77
|
+
const value = compoundVariant[key];
|
|
78
|
+
const propValue = mergedProps[key];
|
|
79
|
+
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
|
|
80
|
+
matches = false;
|
|
81
|
+
break;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
if (matches) {
|
|
85
|
+
for (const slot in slotClassValue) {
|
|
86
|
+
slotClassValues[slot].push(slotClassValue[slot]);
|
|
72
87
|
}
|
|
73
88
|
}
|
|
74
89
|
}
|
|
75
90
|
}
|
|
76
91
|
if (classNames) {
|
|
77
|
-
for (const
|
|
78
|
-
slotClassValues[slot].push(
|
|
92
|
+
for (const slot in classNames) {
|
|
93
|
+
slotClassValues[slot].push(classNames[slot]);
|
|
79
94
|
}
|
|
80
95
|
}
|
|
81
96
|
const result = {};
|
|
82
|
-
for (const
|
|
83
|
-
result[slot] = classNameResolver(
|
|
97
|
+
for (const slot in slotClassValues) {
|
|
98
|
+
result[slot] = classNameResolver(slotClassValues[slot]);
|
|
84
99
|
}
|
|
85
100
|
return result;
|
|
86
101
|
};
|
package/dist/cjs/scv.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scv.js","sourceRoot":"","sources":["../../src/scv.ts"],"names":[],"mappings":";;;AACA,6BAAqC;AACrC,6CAAyC;
|
|
1
|
+
{"version":3,"file":"scv.js","sourceRoot":"","sources":["../../src/scv.ts"],"names":[],"mappings":"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"}
|
package/dist/cjs/ssv.js
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ssv = void 0;
|
|
4
4
|
const compact_1 = require("./utils/compact");
|
|
5
|
-
const entries_1 = require("./utils/entries");
|
|
6
5
|
/**
|
|
7
6
|
* Creates a slot-based style variant function that composes CSS properties based on variants and compound variants.
|
|
8
7
|
*
|
|
@@ -38,35 +37,51 @@ const entries_1 = require("./utils/entries");
|
|
|
38
37
|
*/
|
|
39
38
|
const ssv = (config) => {
|
|
40
39
|
const { slots, base, variants, compoundVariants, defaultVariants } = config;
|
|
40
|
+
if (!variants) {
|
|
41
|
+
return (props) => {
|
|
42
|
+
const result = {};
|
|
43
|
+
for (const slot of slots) {
|
|
44
|
+
result[slot] = { ...base?.[slot], ...props?.styles?.[slot] };
|
|
45
|
+
}
|
|
46
|
+
return result;
|
|
47
|
+
};
|
|
48
|
+
}
|
|
41
49
|
return (props) => {
|
|
42
50
|
const { styles, ...rest } = props ?? {};
|
|
43
|
-
const mergedProps = { ...defaultVariants, ...(0, compact_1.compact)(rest) };
|
|
51
|
+
const mergedProps = defaultVariants ? { ...defaultVariants, ...(0, compact_1.compact)(rest) } : rest;
|
|
44
52
|
const result = {};
|
|
45
53
|
for (const slot of slots) {
|
|
46
54
|
result[slot] = base?.[slot] ?? {};
|
|
47
55
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
result[slot] = { ...result[slot], ...slotValue };
|
|
54
|
-
}
|
|
56
|
+
for (const key in mergedProps) {
|
|
57
|
+
const slotStyle = variants[key]?.[mergedProps[key]];
|
|
58
|
+
if (slotStyle) {
|
|
59
|
+
for (const slot in slotStyle) {
|
|
60
|
+
result[slot] = { ...result[slot], ...slotStyle[slot] };
|
|
55
61
|
}
|
|
56
62
|
}
|
|
57
63
|
}
|
|
58
64
|
if (compoundVariants) {
|
|
59
65
|
for (const { styles: slotStyle, ...compoundVariant } of compoundVariants) {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
66
|
+
let matches = true;
|
|
67
|
+
for (const key in compoundVariant) {
|
|
68
|
+
const value = compoundVariant[key];
|
|
69
|
+
const propValue = mergedProps[key];
|
|
70
|
+
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
|
|
71
|
+
matches = false;
|
|
72
|
+
break;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
if (matches) {
|
|
76
|
+
for (const slot in slotStyle) {
|
|
77
|
+
result[slot] = { ...result[slot], ...slotStyle[slot] };
|
|
63
78
|
}
|
|
64
79
|
}
|
|
65
80
|
}
|
|
66
81
|
}
|
|
67
82
|
if (styles) {
|
|
68
|
-
for (const
|
|
69
|
-
result[slot] = { ...result[slot], ...
|
|
83
|
+
for (const slot in styles) {
|
|
84
|
+
result[slot] = { ...result[slot], ...styles[slot] };
|
|
70
85
|
}
|
|
71
86
|
}
|
|
72
87
|
return result;
|
package/dist/cjs/ssv.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ssv.js","sourceRoot":"","sources":["../../src/ssv.ts"],"names":[],"mappings":";;;AACA,6CAAyC;
|
|
1
|
+
{"version":3,"file":"ssv.js","sourceRoot":"","sources":["../../src/ssv.ts"],"names":[],"mappings":"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"}
|
package/dist/cjs/sv.js
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.sv = void 0;
|
|
4
4
|
const compact_1 = require("./utils/compact");
|
|
5
|
-
const entries_1 = require("./utils/entries");
|
|
6
5
|
/**
|
|
7
6
|
* Creates a style variant function based on the provided configuration.
|
|
8
7
|
*
|
|
@@ -33,29 +32,36 @@ const entries_1 = require("./utils/entries");
|
|
|
33
32
|
*/
|
|
34
33
|
const sv = (config) => {
|
|
35
34
|
const { base, variants, compoundVariants, defaultVariants } = config;
|
|
35
|
+
if (!variants) {
|
|
36
|
+
return (props) => ({ ...base, ...props?.style });
|
|
37
|
+
}
|
|
36
38
|
return (props) => {
|
|
37
39
|
const { style, ...rest } = props ?? {};
|
|
38
40
|
let result = { ...base };
|
|
39
|
-
const mergedProps = { ...defaultVariants, ...(0, compact_1.compact)(rest) };
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
result = { ...result, ...s };
|
|
45
|
-
}
|
|
41
|
+
const mergedProps = defaultVariants ? { ...defaultVariants, ...(0, compact_1.compact)(rest) } : rest;
|
|
42
|
+
for (const key in mergedProps) {
|
|
43
|
+
const styleValue = variants[key][mergedProps[key]];
|
|
44
|
+
if (styleValue) {
|
|
45
|
+
result = { ...result, ...styleValue };
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
if (compoundVariants) {
|
|
49
|
-
for (const { style:
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
for (const { style: styleValue, ...compoundVariant } of compoundVariants) {
|
|
50
|
+
let matches = true;
|
|
51
|
+
for (const key in compoundVariant) {
|
|
52
|
+
const value = compoundVariant[key];
|
|
53
|
+
const propValue = mergedProps[key];
|
|
54
|
+
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
|
|
55
|
+
matches = false;
|
|
56
|
+
break;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
if (matches) {
|
|
60
|
+
result = { ...result, ...styleValue };
|
|
52
61
|
}
|
|
53
62
|
}
|
|
54
63
|
}
|
|
55
|
-
|
|
56
|
-
result = { ...result, ...style };
|
|
57
|
-
}
|
|
58
|
-
return result;
|
|
64
|
+
return { ...result, ...style };
|
|
59
65
|
};
|
|
60
66
|
};
|
|
61
67
|
exports.sv = sv;
|
package/dist/cjs/sv.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sv.js","sourceRoot":"","sources":["../../src/sv.ts"],"names":[],"mappings":";;;AACA,6CAAyC;
|
|
1
|
+
{"version":3,"file":"sv.js","sourceRoot":"","sources":["../../src/sv.ts"],"names":[],"mappings":";;;AACA,6CAAyC;AAmBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACI,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,EAAE,GAAG,eAAe,EAAE,GAAG,IAAA,iBAAO,EAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;QAE9G,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC9B,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,GAAG,CAAW,CAAC,CAAA;YAC5D,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,GAAG,CAAC,CAAA;oBAClC,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;AAxCY,QAAA,EAAE,MAwCd;AAED,kBAAe,UAAE,CAAA"}
|
package/dist/esm/cv.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { compact } from './utils/compact';
|
|
2
|
-
import { entries } from './utils/entries';
|
|
3
2
|
import { cx } from './cx';
|
|
4
3
|
/**
|
|
5
4
|
* Creates a class variant function that combines base classes, variants, compound variants, and default variants.
|
|
@@ -34,32 +33,36 @@ import { cx } from './cx';
|
|
|
34
33
|
*/
|
|
35
34
|
export const cv = (config) => {
|
|
36
35
|
const { base, variants, compoundVariants, defaultVariants, classNameResolver = cx } = config;
|
|
36
|
+
if (!variants) {
|
|
37
|
+
return (props) => classNameResolver(base, props?.className);
|
|
38
|
+
}
|
|
37
39
|
return (props) => {
|
|
38
40
|
const { className, ...rest } = props ?? {};
|
|
39
|
-
const mergedProps = { ...defaultVariants, ...compact(rest) };
|
|
41
|
+
const mergedProps = defaultVariants ? { ...defaultVariants, ...compact(rest) } : rest;
|
|
40
42
|
const classValues = [];
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
for (const [key, value] of entries(mergedProps)) {
|
|
46
|
-
const classValue = variants[key][value];
|
|
47
|
-
if (classValue) {
|
|
48
|
-
classValues.push(classValue);
|
|
49
|
-
}
|
|
43
|
+
for (const key in mergedProps) {
|
|
44
|
+
const classValue = variants[key][mergedProps[key]];
|
|
45
|
+
if (classValue) {
|
|
46
|
+
classValues.push(classValue);
|
|
50
47
|
}
|
|
51
48
|
}
|
|
52
49
|
if (compoundVariants) {
|
|
53
50
|
for (const { className: classValue, ...compoundVariant } of compoundVariants) {
|
|
54
|
-
|
|
51
|
+
let matches = true;
|
|
52
|
+
for (const key in compoundVariant) {
|
|
53
|
+
const value = compoundVariant[key];
|
|
54
|
+
const propValue = mergedProps[key];
|
|
55
|
+
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
|
|
56
|
+
matches = false;
|
|
57
|
+
break;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
if (matches) {
|
|
55
61
|
classValues.push(classValue);
|
|
56
62
|
}
|
|
57
63
|
}
|
|
58
64
|
}
|
|
59
|
-
|
|
60
|
-
classValues.push(className);
|
|
61
|
-
}
|
|
62
|
-
return classNameResolver(...classValues);
|
|
65
|
+
return classNameResolver(base, classValues, className);
|
|
63
66
|
};
|
|
64
67
|
};
|
|
65
68
|
export default cv;
|
package/dist/esm/cv.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cv.js","sourceRoot":"","sources":["../../src/cv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"cv.js","sourceRoot":"","sources":["../../src/cv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,EAAE,EAAc,MAAM,MAAM,CAAA;AAoBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,EAAE,GAA0B,CAAC,MAAM,EAAE,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,iBAAiB,GAAG,EAAE,EAAE,GAAG,MAAM,CAAA;IAE5F,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CAAA;IAC7D,CAAC;IAED,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;QAE1C,MAAM,WAAW,GAA4B,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;QAE9G,MAAM,WAAW,GAAiB,EAAE,CAAA;QAEpC,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC9B,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,GAAG,CAAW,CAAC,CAAA;YAC5D,IAAI,UAAU,EAAE,CAAC;gBACf,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;YAC9B,CAAC;QACH,CAAC;QAED,IAAI,gBAAgB,EAAE,CAAC;YACrB,KAAK,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,IAAI,gBAAgB,EAAE,CAAC;gBAC7E,IAAI,OAAO,GAAG,IAAI,CAAA;gBAClB,KAAK,MAAM,GAAG,IAAI,eAAe,EAAE,CAAC;oBAClC,MAAM,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,CAAA;oBAClC,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,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;gBAC9B,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,CAAC,CAAA;IACxD,CAAC,CAAA;AACH,CAAC,CAAA;AAED,eAAe,EAAE,CAAA"}
|
package/dist/esm/scv.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { cx } from './cx';
|
|
2
2
|
import { compact } from './utils/compact';
|
|
3
|
-
import { entries } from './utils/entries';
|
|
4
3
|
/**
|
|
5
4
|
* Creates a slot-based class variant function that manages class names for multiple slots with variants.
|
|
6
5
|
*
|
|
@@ -39,9 +38,18 @@ import { entries } from './utils/entries';
|
|
|
39
38
|
*/
|
|
40
39
|
export const scv = (config) => {
|
|
41
40
|
const { slots, base, variants, compoundVariants, defaultVariants, classNameResolver = cx } = config;
|
|
41
|
+
if (!variants) {
|
|
42
|
+
return (props) => {
|
|
43
|
+
const result = {};
|
|
44
|
+
for (const slot of slots) {
|
|
45
|
+
result[slot] = classNameResolver(base?.[slot], props?.classNames?.[slot]);
|
|
46
|
+
}
|
|
47
|
+
return result;
|
|
48
|
+
};
|
|
49
|
+
}
|
|
42
50
|
return (props) => {
|
|
43
51
|
const { classNames, ...rest } = props ?? {};
|
|
44
|
-
const mergedProps = { ...defaultVariants, ...compact(rest) };
|
|
52
|
+
const mergedProps = defaultVariants ? { ...defaultVariants, ...compact(rest) } : rest;
|
|
45
53
|
const slotClassValues = {};
|
|
46
54
|
for (const slot of slots) {
|
|
47
55
|
if (base?.[slot]) {
|
|
@@ -51,33 +59,40 @@ export const scv = (config) => {
|
|
|
51
59
|
slotClassValues[slot] = [];
|
|
52
60
|
}
|
|
53
61
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
slotClassValues[slot].push(slotValue);
|
|
60
|
-
}
|
|
62
|
+
for (const key in mergedProps) {
|
|
63
|
+
const slotClassValue = variants[key]?.[mergedProps[key]];
|
|
64
|
+
if (slotClassValue) {
|
|
65
|
+
for (const slot in slotClassValue) {
|
|
66
|
+
slotClassValues[slot].push(slotClassValue[slot]);
|
|
61
67
|
}
|
|
62
68
|
}
|
|
63
69
|
}
|
|
64
70
|
if (compoundVariants) {
|
|
65
71
|
for (const { classNames: slotClassValue, ...compoundVariant } of compoundVariants) {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
72
|
+
let matches = true;
|
|
73
|
+
for (const key in compoundVariant) {
|
|
74
|
+
const value = compoundVariant[key];
|
|
75
|
+
const propValue = mergedProps[key];
|
|
76
|
+
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
|
|
77
|
+
matches = false;
|
|
78
|
+
break;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
if (matches) {
|
|
82
|
+
for (const slot in slotClassValue) {
|
|
83
|
+
slotClassValues[slot].push(slotClassValue[slot]);
|
|
69
84
|
}
|
|
70
85
|
}
|
|
71
86
|
}
|
|
72
87
|
}
|
|
73
88
|
if (classNames) {
|
|
74
|
-
for (const
|
|
75
|
-
slotClassValues[slot].push(
|
|
89
|
+
for (const slot in classNames) {
|
|
90
|
+
slotClassValues[slot].push(classNames[slot]);
|
|
76
91
|
}
|
|
77
92
|
}
|
|
78
93
|
const result = {};
|
|
79
|
-
for (const
|
|
80
|
-
result[slot] = classNameResolver(
|
|
94
|
+
for (const slot in slotClassValues) {
|
|
95
|
+
result[slot] = classNameResolver(slotClassValues[slot]);
|
|
81
96
|
}
|
|
82
97
|
return result;
|
|
83
98
|
};
|
package/dist/esm/scv.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scv.js","sourceRoot":"","sources":["../../src/scv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAc,MAAM,MAAM,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"scv.js","sourceRoot":"","sources":["../../src/scv.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/ssv.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { compact } from './utils/compact';
|
|
2
|
-
import { entries } from './utils/entries';
|
|
3
2
|
/**
|
|
4
3
|
* Creates a slot-based style variant function that composes CSS properties based on variants and compound variants.
|
|
5
4
|
*
|
|
@@ -35,35 +34,51 @@ import { entries } from './utils/entries';
|
|
|
35
34
|
*/
|
|
36
35
|
export const ssv = (config) => {
|
|
37
36
|
const { slots, base, variants, compoundVariants, defaultVariants } = config;
|
|
37
|
+
if (!variants) {
|
|
38
|
+
return (props) => {
|
|
39
|
+
const result = {};
|
|
40
|
+
for (const slot of slots) {
|
|
41
|
+
result[slot] = { ...base?.[slot], ...props?.styles?.[slot] };
|
|
42
|
+
}
|
|
43
|
+
return result;
|
|
44
|
+
};
|
|
45
|
+
}
|
|
38
46
|
return (props) => {
|
|
39
47
|
const { styles, ...rest } = props ?? {};
|
|
40
|
-
const mergedProps = { ...defaultVariants, ...compact(rest) };
|
|
48
|
+
const mergedProps = defaultVariants ? { ...defaultVariants, ...compact(rest) } : rest;
|
|
41
49
|
const result = {};
|
|
42
50
|
for (const slot of slots) {
|
|
43
51
|
result[slot] = base?.[slot] ?? {};
|
|
44
52
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
result[slot] = { ...result[slot], ...slotValue };
|
|
51
|
-
}
|
|
53
|
+
for (const key in mergedProps) {
|
|
54
|
+
const slotStyle = variants[key]?.[mergedProps[key]];
|
|
55
|
+
if (slotStyle) {
|
|
56
|
+
for (const slot in slotStyle) {
|
|
57
|
+
result[slot] = { ...result[slot], ...slotStyle[slot] };
|
|
52
58
|
}
|
|
53
59
|
}
|
|
54
60
|
}
|
|
55
61
|
if (compoundVariants) {
|
|
56
62
|
for (const { styles: slotStyle, ...compoundVariant } of compoundVariants) {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
63
|
+
let matches = true;
|
|
64
|
+
for (const key in compoundVariant) {
|
|
65
|
+
const value = compoundVariant[key];
|
|
66
|
+
const propValue = mergedProps[key];
|
|
67
|
+
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
|
|
68
|
+
matches = false;
|
|
69
|
+
break;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
if (matches) {
|
|
73
|
+
for (const slot in slotStyle) {
|
|
74
|
+
result[slot] = { ...result[slot], ...slotStyle[slot] };
|
|
60
75
|
}
|
|
61
76
|
}
|
|
62
77
|
}
|
|
63
78
|
}
|
|
64
79
|
if (styles) {
|
|
65
|
-
for (const
|
|
66
|
-
result[slot] = { ...result[slot], ...
|
|
80
|
+
for (const slot in styles) {
|
|
81
|
+
result[slot] = { ...result[slot], ...styles[slot] };
|
|
67
82
|
}
|
|
68
83
|
}
|
|
69
84
|
return result;
|
package/dist/esm/ssv.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ssv.js","sourceRoot":"","sources":["../../src/ssv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"ssv.js","sourceRoot":"","sources":["../../src/ssv.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/sv.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { compact } from './utils/compact';
|
|
2
|
-
import { entries } from './utils/entries';
|
|
3
2
|
/**
|
|
4
3
|
* Creates a style variant function based on the provided configuration.
|
|
5
4
|
*
|
|
@@ -30,29 +29,36 @@ import { entries } from './utils/entries';
|
|
|
30
29
|
*/
|
|
31
30
|
export const sv = (config) => {
|
|
32
31
|
const { base, variants, compoundVariants, defaultVariants } = config;
|
|
32
|
+
if (!variants) {
|
|
33
|
+
return (props) => ({ ...base, ...props?.style });
|
|
34
|
+
}
|
|
33
35
|
return (props) => {
|
|
34
36
|
const { style, ...rest } = props ?? {};
|
|
35
37
|
let result = { ...base };
|
|
36
|
-
const mergedProps = { ...defaultVariants, ...compact(rest) };
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
result = { ...result, ...s };
|
|
42
|
-
}
|
|
38
|
+
const mergedProps = defaultVariants ? { ...defaultVariants, ...compact(rest) } : rest;
|
|
39
|
+
for (const key in mergedProps) {
|
|
40
|
+
const styleValue = variants[key][mergedProps[key]];
|
|
41
|
+
if (styleValue) {
|
|
42
|
+
result = { ...result, ...styleValue };
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
if (compoundVariants) {
|
|
46
|
-
for (const { style:
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
for (const { style: styleValue, ...compoundVariant } of compoundVariants) {
|
|
47
|
+
let matches = true;
|
|
48
|
+
for (const key in compoundVariant) {
|
|
49
|
+
const value = compoundVariant[key];
|
|
50
|
+
const propValue = mergedProps[key];
|
|
51
|
+
if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
|
|
52
|
+
matches = false;
|
|
53
|
+
break;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
if (matches) {
|
|
57
|
+
result = { ...result, ...styleValue };
|
|
49
58
|
}
|
|
50
59
|
}
|
|
51
60
|
}
|
|
52
|
-
|
|
53
|
-
result = { ...result, ...style };
|
|
54
|
-
}
|
|
55
|
-
return result;
|
|
61
|
+
return { ...result, ...style };
|
|
56
62
|
};
|
|
57
63
|
};
|
|
58
64
|
export default sv;
|
package/dist/esm/sv.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sv.js","sourceRoot":"","sources":["../../src/sv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"sv.js","sourceRoot":"","sources":["../../src/sv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAmBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;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,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;QAE9G,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC9B,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,GAAG,CAAW,CAAC,CAAA;YAC5D,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,GAAG,CAAC,CAAA;oBAClC,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"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function entries<T extends object, TK extends Extract<keyof T, string>, TV extends T[TK], TEntry extends [TK, TV]>(obj: T): TEntry[];
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"entries.js","sourceRoot":"","sources":["../../../src/utils/entries.ts"],"names":[],"mappings":";;AAAA,0BAOC;AAPD,SAAgB,OAAO,CAKrB,GAAM;IACN,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,GAAS,CAAC,CAAC,CAAa,CAAA;AACzE,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function entries<T extends object, TK extends Extract<keyof T, string>, TV extends T[TK], TEntry extends [TK, TV]>(obj: T): TEntry[];
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"entries.js","sourceRoot":"","sources":["../../../src/utils/entries.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,OAAO,CAKrB,GAAM;IACN,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,GAAS,CAAC,CAAC,CAAa,CAAA;AACzE,CAAC"}
|