1 |
|
2 | import {apply, hash, directive} from "twind";
|
3 |
|
4 |
|
5 | var includes = (value, search) => !!~value.indexOf(search);
|
6 | var join = (parts, separator = "-") => parts.join(separator);
|
7 | var hyphenate = (value) => value.replace(/[A-Z]/g, "-$&").toLowerCase();
|
8 | var evalThunk = (value, context) => {
|
9 | while (typeof value == "function") {
|
10 | value = value(context);
|
11 | }
|
12 | return value;
|
13 | };
|
14 | var isCSSProperty = (key, value) => !includes("@:&", key[0]) && (includes("rg", (typeof value)[5]) || Array.isArray(value));
|
15 | var merge = (target, source, context) => source ? Object.keys(source).reduce((target2, key) => {
|
16 | const value = evalThunk(source[key], context);
|
17 | if (isCSSProperty(key, value)) {
|
18 | target2[hyphenate(key)] = value;
|
19 | } else {
|
20 | target2[key] = key[0] == "@" && includes("figa", key[1]) ? (target2[key] || []).concat(value) : merge(target2[key] || {}, value, context);
|
21 | }
|
22 | return target2;
|
23 | }, target) : target;
|
24 | var escape = typeof CSS !== "undefined" && CSS.escape || ((className) => className.replace(/[!"'`*+.,;:\\/<=>?@#$%&^|~()[\]{}]/g, "\\$&").replace(/^\d/, "\\3$& "));
|
25 | var buildMediaQuery = (screen2) => {
|
26 | if (!Array.isArray(screen2)) {
|
27 | screen2 = [screen2];
|
28 | }
|
29 | return "@media " + join(screen2.map((screen3) => {
|
30 | if (typeof screen3 == "string") {
|
31 | screen3 = {min: screen3};
|
32 | }
|
33 | return screen3.raw || join(Object.keys(screen3).map((feature) => `(${feature}-width:${screen3[feature]})`), " and ");
|
34 | }), ",");
|
35 | };
|
36 |
|
37 |
|
38 | export * from "twind";
|
39 | var translate = (tokens, context) => {
|
40 | const collect = (target, token) => Array.isArray(token) ? token.reduce(collect, target) : merge(target, evalThunk(token, context), context);
|
41 | return tokens.reduce(collect, {});
|
42 | };
|
43 | var newRule = /\s*(?:([\w-%@]+)\s*:?\s*([^{;]+?)\s*(?:;|$|})|([^;}{]*?)\s*{)|(})/gi;
|
44 | var ruleClean = /\/\*[\s\S]*?\*\/|\s+|\n/gm;
|
45 | var decorate = (selectors, currentBlock) => selectors.reduceRight((rules, selector) => ({[selector]: rules}), currentBlock);
|
46 | var saveBlock = (rules, selectors, currentBlock) => {
|
47 | if (currentBlock) {
|
48 | rules.push(decorate(selectors, currentBlock));
|
49 | }
|
50 | };
|
51 | var interleave = (strings, interpolations, context) => {
|
52 | let buffer = strings[0];
|
53 | const result = [];
|
54 | for (let index = 0; index < interpolations.length; ) {
|
55 | const interpolation = evalThunk(interpolations[index], context);
|
56 | if (interpolation && typeof interpolation == "object") {
|
57 | result.push(buffer, interpolation);
|
58 | buffer = strings[++index];
|
59 | } else {
|
60 | buffer += (interpolation || "") + strings[++index];
|
61 | }
|
62 | }
|
63 | result.push(buffer);
|
64 | return result;
|
65 | };
|
66 | var astish = (values, context) => {
|
67 | const selectors = [];
|
68 | const rules = [];
|
69 | let currentBlock;
|
70 | let match;
|
71 | for (let index = 0; index < values.length; index++) {
|
72 | const value = values[index];
|
73 | if (typeof value == "string") {
|
74 | while (match = newRule.exec(value.replace(ruleClean, " "))) {
|
75 | if (!match[0])
|
76 | continue;
|
77 | if (match[4]) {
|
78 | currentBlock = saveBlock(rules, selectors, currentBlock);
|
79 | selectors.pop();
|
80 | }
|
81 | if (match[3]) {
|
82 | currentBlock = saveBlock(rules, selectors, currentBlock);
|
83 | selectors.push(match[3]);
|
84 | } else if (!match[4]) {
|
85 | if (!currentBlock)
|
86 | currentBlock = {};
|
87 | const value2 = match[2] && /\S/.test(match[2]) ? match[2] : values[++index];
|
88 | if (value2) {
|
89 | if (match[1] == "@apply") {
|
90 | merge(currentBlock, evalThunk(apply(value2), context), context);
|
91 | } else {
|
92 | currentBlock[match[1]] = value2;
|
93 | }
|
94 | }
|
95 | }
|
96 | }
|
97 | } else {
|
98 | currentBlock = saveBlock(rules, selectors, currentBlock);
|
99 | rules.push(decorate(selectors, value));
|
100 | }
|
101 | }
|
102 | saveBlock(rules, selectors, currentBlock);
|
103 | return rules;
|
104 | };
|
105 | var cssFactory = (tokens, context) => translate(Array.isArray(tokens[0]) && Array.isArray(tokens[0].raw) ? astish(interleave(tokens[0], tokens.slice(1), context), context) : tokens, context);
|
106 | var css = (...tokens) => directive(cssFactory, tokens);
|
107 | var keyframesFactory = (tokens, context) => {
|
108 | const waypoints = cssFactory(tokens, context);
|
109 | const id = hash(JSON.stringify(waypoints));
|
110 | context.tw(() => ({[`@keyframes ${id}`]: waypoints}));
|
111 | return id;
|
112 | };
|
113 | var keyframes = (...tokens) => directive(keyframesFactory, tokens);
|
114 | var animation = (value, waypoints) => waypoints === void 0 ? (...args) => animation(value, keyframes(...args)) : css({
|
115 | ...value && typeof value == "object" ? value : {animation: value},
|
116 | animationName: typeof waypoints == "function" ? waypoints : keyframes(waypoints)
|
117 | });
|
118 | var screenFactory = ({size, rules}, context) => {
|
119 | const media = buildMediaQuery(context.theme("screens", size));
|
120 | return rules === void 0 ? media : {
|
121 | [media]: typeof rules == "function" ? evalThunk(rules, context) : cssFactory([rules], context)
|
122 | };
|
123 | };
|
124 | var screen = (size, rules) => directive(screenFactory, {size, rules});
|
125 | export {
|
126 | animation,
|
127 | css,
|
128 | keyframes,
|
129 | screen
|
130 | };
|
131 |
|