@webstudio-is/css-engine 0.182.0 → 0.185.0
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/lib/index.js +25 -23
- package/lib/types/core/atomic.d.ts +2 -1
- package/lib/types/core/merger.d.ts +31 -147
- package/lib/types/schema.d.ts +859 -3123
- package/package.json +4 -4
package/lib/index.js
CHANGED
|
@@ -84,13 +84,21 @@ var UnsetValue = z.object({
|
|
|
84
84
|
value: z.literal(""),
|
|
85
85
|
hidden: z.boolean().optional()
|
|
86
86
|
});
|
|
87
|
+
var VarFallback = z.union([UnparsedValue, KeywordValue]);
|
|
88
|
+
var VarValue = z.object({
|
|
89
|
+
type: z.literal("var"),
|
|
90
|
+
value: z.string(),
|
|
91
|
+
fallback: VarFallback.optional(),
|
|
92
|
+
hidden: z.boolean().optional()
|
|
93
|
+
});
|
|
87
94
|
var TupleValueItem = z.union([
|
|
88
95
|
UnitValue,
|
|
89
96
|
KeywordValue,
|
|
90
97
|
UnparsedValue,
|
|
91
98
|
ImageValue,
|
|
92
99
|
RgbValue,
|
|
93
|
-
FunctionValue
|
|
100
|
+
FunctionValue,
|
|
101
|
+
VarValue
|
|
94
102
|
]);
|
|
95
103
|
var TupleValue = z.object({
|
|
96
104
|
type: z.literal("tuple"),
|
|
@@ -105,14 +113,15 @@ var LayerValueItem = z.union([
|
|
|
105
113
|
TupleValue,
|
|
106
114
|
RgbValue,
|
|
107
115
|
InvalidValue,
|
|
108
|
-
FunctionValue
|
|
116
|
+
FunctionValue,
|
|
117
|
+
VarValue
|
|
109
118
|
]);
|
|
110
119
|
var LayersValue = z.object({
|
|
111
120
|
type: z.literal("layers"),
|
|
112
121
|
value: z.array(LayerValueItem),
|
|
113
122
|
hidden: z.boolean().optional()
|
|
114
123
|
});
|
|
115
|
-
var
|
|
124
|
+
var StyleValue = z.union([
|
|
116
125
|
ImageValue,
|
|
117
126
|
LayersValue,
|
|
118
127
|
UnitValue,
|
|
@@ -122,20 +131,7 @@ var ValidStaticStyleValue = z.union([
|
|
|
122
131
|
UnparsedValue,
|
|
123
132
|
TupleValue,
|
|
124
133
|
FunctionValue,
|
|
125
|
-
GuaranteedInvalidValue
|
|
126
|
-
]);
|
|
127
|
-
var isValidStaticStyleValue = (styleValue) => {
|
|
128
|
-
const staticStyleValue = styleValue;
|
|
129
|
-
return staticStyleValue.type === "image" || staticStyleValue.type === "layers" || staticStyleValue.type === "unit" || staticStyleValue.type === "keyword" || staticStyleValue.type === "fontFamily" || staticStyleValue.type === "rgb" || staticStyleValue.type === "unparsed" || staticStyleValue.type === "tuple" || staticStyleValue.type === "function" || staticStyleValue.type === "guaranteedInvalid";
|
|
130
|
-
};
|
|
131
|
-
var VarValue = z.object({
|
|
132
|
-
type: z.literal("var"),
|
|
133
|
-
value: z.string(),
|
|
134
|
-
fallbacks: z.array(ValidStaticStyleValue),
|
|
135
|
-
hidden: z.boolean().optional()
|
|
136
|
-
});
|
|
137
|
-
var StyleValue = z.union([
|
|
138
|
-
ValidStaticStyleValue,
|
|
134
|
+
GuaranteedInvalidValue,
|
|
139
135
|
InvalidValue,
|
|
140
136
|
UnsetValue,
|
|
141
137
|
VarValue
|
|
@@ -189,11 +185,13 @@ var toValue = (styleValue, transformValue) => {
|
|
|
189
185
|
return families.join(", ");
|
|
190
186
|
}
|
|
191
187
|
if (value.type === "var") {
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
188
|
+
if (value.hidden) {
|
|
189
|
+
return "";
|
|
190
|
+
}
|
|
191
|
+
let fallbacksString = "";
|
|
192
|
+
if (value.fallback) {
|
|
193
|
+
fallbacksString = `, ${toValue(value.fallback, transformValue)}`;
|
|
195
194
|
}
|
|
196
|
-
const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
|
|
197
195
|
return `var(--${value.value}${fallbacksString})`;
|
|
198
196
|
}
|
|
199
197
|
if (value.type === "keyword") {
|
|
@@ -254,7 +252,7 @@ var isLonghandValue = (value) => {
|
|
|
254
252
|
return false;
|
|
255
253
|
}
|
|
256
254
|
if (value.type === "var") {
|
|
257
|
-
const fallback = value.
|
|
255
|
+
const fallback = value.fallback;
|
|
258
256
|
if (fallback?.type === "keyword" && cssWideKeywords.has(fallback.value)) {
|
|
259
257
|
return false;
|
|
260
258
|
}
|
|
@@ -876,6 +874,10 @@ var generateAtomic = (sheet, options) => {
|
|
|
876
874
|
for (const rule of sheet.nestingRules.values()) {
|
|
877
875
|
const descendantSuffix = rule.getDescendantSuffix();
|
|
878
876
|
const groupKey = getKey(rule);
|
|
877
|
+
if (groupKey === void 0) {
|
|
878
|
+
atomicRules.set(rule.getSelector(), rule);
|
|
879
|
+
continue;
|
|
880
|
+
}
|
|
879
881
|
let classList = classes.get(groupKey);
|
|
880
882
|
if (classList === void 0) {
|
|
881
883
|
classList = [];
|
|
@@ -917,6 +919,7 @@ export {
|
|
|
917
919
|
TupleValueItem,
|
|
918
920
|
UnitValue,
|
|
919
921
|
UnparsedValue,
|
|
922
|
+
VarFallback,
|
|
920
923
|
compareMedia,
|
|
921
924
|
createRegularStyleSheet,
|
|
922
925
|
cssWideKeywords,
|
|
@@ -925,7 +928,6 @@ export {
|
|
|
925
928
|
generateAtomic,
|
|
926
929
|
generateStyleMap,
|
|
927
930
|
hyphenateProperty,
|
|
928
|
-
isValidStaticStyleValue,
|
|
929
931
|
matchMedia,
|
|
930
932
|
mergeStyles,
|
|
931
933
|
prefixStyles,
|
|
@@ -2,7 +2,8 @@ import type { StyleSheet } from "./style-sheet";
|
|
|
2
2
|
import { NestingRule } from "./rules";
|
|
3
3
|
import { type TransformValue } from "./to-value";
|
|
4
4
|
type Options = {
|
|
5
|
-
|
|
5
|
+
/** in case of undefined the rule will not be split into atomics */
|
|
6
|
+
getKey: (rule: NestingRule) => string | undefined;
|
|
6
7
|
transformValue?: TransformValue;
|
|
7
8
|
classes?: Map<string, string[]>;
|
|
8
9
|
};
|
|
@@ -40,13 +40,9 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
40
40
|
};
|
|
41
41
|
hidden?: boolean | undefined;
|
|
42
42
|
} | {
|
|
43
|
-
type: "
|
|
44
|
-
value:
|
|
45
|
-
|
|
46
|
-
value: number;
|
|
47
|
-
unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
|
|
48
|
-
hidden?: boolean | undefined;
|
|
49
|
-
} | {
|
|
43
|
+
type: "var";
|
|
44
|
+
value: string;
|
|
45
|
+
fallback?: {
|
|
50
46
|
type: "keyword";
|
|
51
47
|
value: string;
|
|
52
48
|
hidden?: boolean | undefined;
|
|
@@ -54,36 +50,10 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
54
50
|
type: "unparsed";
|
|
55
51
|
value: string;
|
|
56
52
|
hidden?: boolean | undefined;
|
|
57
|
-
} |
|
|
58
|
-
type: "rgb";
|
|
59
|
-
r: number;
|
|
60
|
-
g: number;
|
|
61
|
-
b: number;
|
|
62
|
-
alpha: number;
|
|
63
|
-
hidden?: boolean | undefined;
|
|
64
|
-
} | {
|
|
65
|
-
type: "function";
|
|
66
|
-
name: string;
|
|
67
|
-
args: StyleValue;
|
|
68
|
-
hidden?: boolean;
|
|
69
|
-
} | {
|
|
70
|
-
type: "image";
|
|
71
|
-
value: {
|
|
72
|
-
type: "asset";
|
|
73
|
-
value: string;
|
|
74
|
-
} | {
|
|
75
|
-
type: "url";
|
|
76
|
-
url: string;
|
|
77
|
-
};
|
|
78
|
-
hidden?: boolean | undefined;
|
|
79
|
-
})[];
|
|
53
|
+
} | undefined;
|
|
80
54
|
hidden?: boolean | undefined;
|
|
81
55
|
} | {
|
|
82
|
-
type: "
|
|
83
|
-
value: string;
|
|
84
|
-
hidden?: boolean | undefined;
|
|
85
|
-
} | {
|
|
86
|
-
type: "layers";
|
|
56
|
+
type: "tuple";
|
|
87
57
|
value: ({
|
|
88
58
|
type: "unit";
|
|
89
59
|
value: number;
|
|
@@ -120,13 +90,9 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
120
90
|
};
|
|
121
91
|
hidden?: boolean | undefined;
|
|
122
92
|
} | {
|
|
123
|
-
type: "
|
|
124
|
-
value:
|
|
125
|
-
|
|
126
|
-
value: number;
|
|
127
|
-
unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
|
|
128
|
-
hidden?: boolean | undefined;
|
|
129
|
-
} | {
|
|
93
|
+
type: "var";
|
|
94
|
+
value: string;
|
|
95
|
+
fallback?: {
|
|
130
96
|
type: "keyword";
|
|
131
97
|
value: string;
|
|
132
98
|
hidden?: boolean | undefined;
|
|
@@ -134,47 +100,17 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
134
100
|
type: "unparsed";
|
|
135
101
|
value: string;
|
|
136
102
|
hidden?: boolean | undefined;
|
|
137
|
-
} |
|
|
138
|
-
type: "rgb";
|
|
139
|
-
r: number;
|
|
140
|
-
g: number;
|
|
141
|
-
b: number;
|
|
142
|
-
alpha: number;
|
|
143
|
-
hidden?: boolean | undefined;
|
|
144
|
-
} | {
|
|
145
|
-
type: "function";
|
|
146
|
-
name: string;
|
|
147
|
-
args: StyleValue;
|
|
148
|
-
hidden?: boolean;
|
|
149
|
-
} | {
|
|
150
|
-
type: "image";
|
|
151
|
-
value: {
|
|
152
|
-
type: "asset";
|
|
153
|
-
value: string;
|
|
154
|
-
} | {
|
|
155
|
-
type: "url";
|
|
156
|
-
url: string;
|
|
157
|
-
};
|
|
158
|
-
hidden?: boolean | undefined;
|
|
159
|
-
})[];
|
|
160
|
-
hidden?: boolean | undefined;
|
|
161
|
-
} | {
|
|
162
|
-
type: "invalid";
|
|
163
|
-
value: string;
|
|
103
|
+
} | undefined;
|
|
164
104
|
hidden?: boolean | undefined;
|
|
165
105
|
})[];
|
|
166
106
|
hidden?: boolean | undefined;
|
|
167
107
|
} | {
|
|
168
|
-
type: "
|
|
169
|
-
|
|
170
|
-
} | {
|
|
171
|
-
type: "unset";
|
|
172
|
-
value: "";
|
|
108
|
+
type: "invalid";
|
|
109
|
+
value: string;
|
|
173
110
|
hidden?: boolean | undefined;
|
|
174
111
|
} | {
|
|
175
|
-
type: "
|
|
176
|
-
value:
|
|
177
|
-
fallbacks: ({
|
|
112
|
+
type: "layers";
|
|
113
|
+
value: ({
|
|
178
114
|
type: "unit";
|
|
179
115
|
value: number;
|
|
180
116
|
unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
|
|
@@ -187,10 +123,6 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
187
123
|
type: "unparsed";
|
|
188
124
|
value: string;
|
|
189
125
|
hidden?: boolean | undefined;
|
|
190
|
-
} | {
|
|
191
|
-
type: "fontFamily";
|
|
192
|
-
value: string[];
|
|
193
|
-
hidden?: boolean | undefined;
|
|
194
126
|
} | {
|
|
195
127
|
type: "rgb";
|
|
196
128
|
r: number;
|
|
@@ -214,13 +146,9 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
214
146
|
};
|
|
215
147
|
hidden?: boolean | undefined;
|
|
216
148
|
} | {
|
|
217
|
-
type: "
|
|
218
|
-
value:
|
|
219
|
-
|
|
220
|
-
value: number;
|
|
221
|
-
unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
|
|
222
|
-
hidden?: boolean | undefined;
|
|
223
|
-
} | {
|
|
149
|
+
type: "var";
|
|
150
|
+
value: string;
|
|
151
|
+
fallback?: {
|
|
224
152
|
type: "keyword";
|
|
225
153
|
value: string;
|
|
226
154
|
hidden?: boolean | undefined;
|
|
@@ -228,32 +156,10 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
228
156
|
type: "unparsed";
|
|
229
157
|
value: string;
|
|
230
158
|
hidden?: boolean | undefined;
|
|
231
|
-
} |
|
|
232
|
-
type: "rgb";
|
|
233
|
-
r: number;
|
|
234
|
-
g: number;
|
|
235
|
-
b: number;
|
|
236
|
-
alpha: number;
|
|
237
|
-
hidden?: boolean | undefined;
|
|
238
|
-
} | {
|
|
239
|
-
type: "function";
|
|
240
|
-
name: string;
|
|
241
|
-
args: StyleValue;
|
|
242
|
-
hidden?: boolean;
|
|
243
|
-
} | {
|
|
244
|
-
type: "image";
|
|
245
|
-
value: {
|
|
246
|
-
type: "asset";
|
|
247
|
-
value: string;
|
|
248
|
-
} | {
|
|
249
|
-
type: "url";
|
|
250
|
-
url: string;
|
|
251
|
-
};
|
|
252
|
-
hidden?: boolean | undefined;
|
|
253
|
-
})[];
|
|
159
|
+
} | undefined;
|
|
254
160
|
hidden?: boolean | undefined;
|
|
255
161
|
} | {
|
|
256
|
-
type: "
|
|
162
|
+
type: "tuple";
|
|
257
163
|
value: ({
|
|
258
164
|
type: "unit";
|
|
259
165
|
value: number;
|
|
@@ -290,13 +196,9 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
290
196
|
};
|
|
291
197
|
hidden?: boolean | undefined;
|
|
292
198
|
} | {
|
|
293
|
-
type: "
|
|
294
|
-
value:
|
|
295
|
-
|
|
296
|
-
value: number;
|
|
297
|
-
unit: "number" | "%" | "deg" | "grad" | "rad" | "turn" | "db" | "fr" | "hz" | "khz" | "cm" | "mm" | "q" | "in" | "pt" | "pc" | "px" | "em" | "rem" | "ex" | "rex" | "cap" | "rcap" | "ch" | "rch" | "ic" | "ric" | "lh" | "rlh" | "vw" | "svw" | "lvw" | "dvw" | "vh" | "svh" | "lvh" | "dvh" | "vi" | "svi" | "lvi" | "dvi" | "vb" | "svb" | "lvb" | "dvb" | "vmin" | "svmin" | "lvmin" | "dvmin" | "vmax" | "svmax" | "lvmax" | "dvmax" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "dpi" | "dpcm" | "dppx" | "x" | "st" | "s" | "ms";
|
|
298
|
-
hidden?: boolean | undefined;
|
|
299
|
-
} | {
|
|
199
|
+
type: "var";
|
|
200
|
+
value: string;
|
|
201
|
+
fallback?: {
|
|
300
202
|
type: "keyword";
|
|
301
203
|
value: string;
|
|
302
204
|
hidden?: boolean | undefined;
|
|
@@ -304,39 +206,21 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
|
|
|
304
206
|
type: "unparsed";
|
|
305
207
|
value: string;
|
|
306
208
|
hidden?: boolean | undefined;
|
|
307
|
-
} |
|
|
308
|
-
type: "rgb";
|
|
309
|
-
r: number;
|
|
310
|
-
g: number;
|
|
311
|
-
b: number;
|
|
312
|
-
alpha: number;
|
|
313
|
-
hidden?: boolean | undefined;
|
|
314
|
-
} | {
|
|
315
|
-
type: "function";
|
|
316
|
-
name: string;
|
|
317
|
-
args: StyleValue;
|
|
318
|
-
hidden?: boolean;
|
|
319
|
-
} | {
|
|
320
|
-
type: "image";
|
|
321
|
-
value: {
|
|
322
|
-
type: "asset";
|
|
323
|
-
value: string;
|
|
324
|
-
} | {
|
|
325
|
-
type: "url";
|
|
326
|
-
url: string;
|
|
327
|
-
};
|
|
328
|
-
hidden?: boolean | undefined;
|
|
329
|
-
})[];
|
|
330
|
-
hidden?: boolean | undefined;
|
|
331
|
-
} | {
|
|
332
|
-
type: "invalid";
|
|
333
|
-
value: string;
|
|
209
|
+
} | undefined;
|
|
334
210
|
hidden?: boolean | undefined;
|
|
335
211
|
})[];
|
|
336
212
|
hidden?: boolean | undefined;
|
|
337
213
|
} | {
|
|
338
|
-
type: "
|
|
214
|
+
type: "invalid";
|
|
215
|
+
value: string;
|
|
339
216
|
hidden?: boolean | undefined;
|
|
340
217
|
})[];
|
|
341
218
|
hidden?: boolean | undefined;
|
|
219
|
+
} | {
|
|
220
|
+
type: "guaranteedInvalid";
|
|
221
|
+
hidden?: boolean | undefined;
|
|
222
|
+
} | {
|
|
223
|
+
type: "unset";
|
|
224
|
+
value: "";
|
|
225
|
+
hidden?: boolean | undefined;
|
|
342
226
|
}>;
|