1 |
|
2 | import {apply, directive, hash} from "twind";
|
3 |
|
4 |
|
5 | var includes = (value, search) => !!~value.indexOf(search);
|
6 | var hyphenate = (value) => value.replace(/[A-Z]/g, "-$&").toLowerCase();
|
7 | var evalThunk = (value, context) => {
|
8 | while (typeof value == "function") {
|
9 | value = value(context);
|
10 | }
|
11 | return value;
|
12 | };
|
13 | var isCSSProperty = (key, value) => !includes("@:&", key[0]) && (includes("rg", (typeof value)[5]) || Array.isArray(value));
|
14 | var merge = (target, source, context) => source ? Object.keys(source).reduce((target2, key) => {
|
15 | const value = evalThunk(source[key], context);
|
16 | if (isCSSProperty(key, value)) {
|
17 | target2[hyphenate(key)] = value;
|
18 | } else {
|
19 | target2[key] = key[0] == "@" && includes("figa", key[1]) ? (target2[key] || []).concat(value) : merge(target2[key] || {}, value, context);
|
20 | }
|
21 | return target2;
|
22 | }, target) : target;
|
23 | var escape = typeof CSS !== "undefined" && CSS.escape || ((className) => className.replace(/[!"'`*+.,;:\\/<=>?@#$%&^|~()[\]{}]/g, "\\$&").replace(/^\d/, "\\3$& "));
|
24 |
|
25 |
|
26 | export * from "twind/css";
|
27 | var styled$ = (rules, context) => rules.reduce((result, rule) => {
|
28 | if (typeof rule == "string") {
|
29 | rule = apply(rule);
|
30 | }
|
31 | if (typeof rule == "function") {
|
32 | return merge(result, evalThunk(rule, context), context);
|
33 | }
|
34 | if (rule) {
|
35 | return merge(result, rule, context);
|
36 | }
|
37 | return result;
|
38 | }, {});
|
39 | var buildMediaRule = (key, value) => ({
|
40 | [key[0] == "@" ? key : `@screen ${key}`]: typeof value == "string" ? apply(value) : value
|
41 | });
|
42 | var createStyle = (config = {}, base) => {
|
43 | const {base: baseStyle, variants = {}, defaults, matches = []} = config;
|
44 | const id = hash(JSON.stringify([base == null ? void 0 : base.className, baseStyle, variants, defaults, matches]));
|
45 | const className = (base ? base.className + " " : "") + id;
|
46 | const selector = (base || "") + "." + id;
|
47 | return Object.defineProperties((allProps) => {
|
48 | const {tw, css, class: localClass, className: localClassName, ...props} = {
|
49 | ...defaults,
|
50 | ...allProps
|
51 | };
|
52 | const rules = [
|
53 | base && base(props),
|
54 | {
|
55 | _: className + (localClassName ? " " + localClassName : "") + (localClass ? " " + localClass : "")
|
56 | },
|
57 | baseStyle
|
58 | ];
|
59 | Object.keys(variants).forEach((variantKey) => {
|
60 | const variant = variants[variantKey];
|
61 | const propsValue = props[variantKey];
|
62 | if (propsValue === Object(propsValue)) {
|
63 | Object.keys(propsValue).forEach((key) => {
|
64 | const value = variant[propsValue[key]];
|
65 | rules.push(key == "initial" ? value : buildMediaRule(key, value));
|
66 | });
|
67 | } else {
|
68 | rules.push(variant[propsValue]);
|
69 | }
|
70 | });
|
71 | matches.forEach((matcher) => {
|
72 | const ruleIndex = rules.push(matcher.use) - 1;
|
73 | if (!Object.keys(matcher).every((variantKey) => {
|
74 | const propsValue = props[variantKey];
|
75 | const compoundValue = String(matcher[variantKey]);
|
76 | if (propsValue === Object(propsValue)) {
|
77 | Object.keys(propsValue).forEach((key) => {
|
78 | if (key != "initial" && compoundValue == String(propsValue[key])) {
|
79 | rules.push(buildMediaRule(key, rules[ruleIndex]));
|
80 | }
|
81 | });
|
82 | return true;
|
83 | }
|
84 | return variantKey == "use" || compoundValue == String(propsValue);
|
85 | })) {
|
86 | rules.length = ruleIndex;
|
87 | }
|
88 | });
|
89 | rules.push(apply(tw), css);
|
90 | return directive(styled$, rules);
|
91 | }, {
|
92 | toString: {
|
93 | value: () => selector
|
94 | },
|
95 | className: {
|
96 | value: className
|
97 | },
|
98 | selector: {
|
99 | value: selector
|
100 | }
|
101 | });
|
102 | };
|
103 | var style = (base, config) => typeof base == "function" ? createStyle(config, base) : createStyle(base);
|
104 | export {
|
105 | style
|
106 | };
|
107 |
|