@webstudio-is/css-engine 0.272.0 → 0.273.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 +202 -204
- package/lib/types/core/merger.d.ts +1 -1
- package/lib/types/schema.d.ts +39 -39
- package/package.json +2 -2
package/lib/index.js
CHANGED
|
@@ -36,16 +36,22 @@ var prefixStyles = (styleMap) => {
|
|
|
36
36
|
return newStyleMap;
|
|
37
37
|
};
|
|
38
38
|
|
|
39
|
-
// src/
|
|
40
|
-
|
|
39
|
+
// src/css.ts
|
|
40
|
+
var cssWideKeywords = /* @__PURE__ */ new Set([
|
|
41
|
+
"initial",
|
|
42
|
+
"inherit",
|
|
43
|
+
"unset",
|
|
44
|
+
"revert",
|
|
45
|
+
"revert-layer"
|
|
46
|
+
]);
|
|
41
47
|
|
|
42
48
|
// src/core/to-value.ts
|
|
43
49
|
import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
|
|
44
|
-
var fallbackTransform = (
|
|
45
|
-
if (
|
|
50
|
+
var fallbackTransform = (styleValue2) => {
|
|
51
|
+
if (styleValue2.type !== "fontFamily") {
|
|
46
52
|
return;
|
|
47
53
|
}
|
|
48
|
-
let { value } =
|
|
54
|
+
let { value } = styleValue2;
|
|
49
55
|
if (value.length === 0) {
|
|
50
56
|
value = [DEFAULT_FONT_FALLBACK];
|
|
51
57
|
}
|
|
@@ -59,12 +65,12 @@ var fallbackTransform = (styleValue) => {
|
|
|
59
65
|
};
|
|
60
66
|
};
|
|
61
67
|
var sanitizeCssUrl = (str) => JSON.stringify(str);
|
|
62
|
-
var toValue = (
|
|
63
|
-
if (
|
|
68
|
+
var toValue = (styleValue2, transformValue) => {
|
|
69
|
+
if (styleValue2 === void 0) {
|
|
64
70
|
return "";
|
|
65
71
|
}
|
|
66
|
-
const transformedValue = transformValue?.(
|
|
67
|
-
const value = transformedValue ??
|
|
72
|
+
const transformedValue = transformValue?.(styleValue2) ?? fallbackTransform(styleValue2);
|
|
73
|
+
const value = transformedValue ?? styleValue2;
|
|
68
74
|
if (value.type === "unit") {
|
|
69
75
|
return value.value + (value.unit === "number" ? "" : value.unit);
|
|
70
76
|
}
|
|
@@ -195,184 +201,6 @@ var toValue = (styleValue, transformValue) => {
|
|
|
195
201
|
return "";
|
|
196
202
|
};
|
|
197
203
|
|
|
198
|
-
// src/schema.ts
|
|
199
|
-
var Unit = z.string();
|
|
200
|
-
var UnitValue = z.object({
|
|
201
|
-
type: z.literal("unit"),
|
|
202
|
-
unit: Unit,
|
|
203
|
-
value: z.number(),
|
|
204
|
-
hidden: z.boolean().optional()
|
|
205
|
-
});
|
|
206
|
-
var KeywordValue = z.object({
|
|
207
|
-
type: z.literal("keyword"),
|
|
208
|
-
// @todo use exact type
|
|
209
|
-
value: z.string(),
|
|
210
|
-
hidden: z.boolean().optional()
|
|
211
|
-
});
|
|
212
|
-
var UnparsedValue = z.object({
|
|
213
|
-
type: z.literal("unparsed"),
|
|
214
|
-
value: z.string(),
|
|
215
|
-
// For the builder we want to be able to hide background-image
|
|
216
|
-
hidden: z.boolean().optional()
|
|
217
|
-
});
|
|
218
|
-
var FontFamilyValue = z.object({
|
|
219
|
-
type: z.literal("fontFamily"),
|
|
220
|
-
value: z.array(z.string()),
|
|
221
|
-
hidden: z.boolean().optional()
|
|
222
|
-
});
|
|
223
|
-
var RgbValue = z.object({
|
|
224
|
-
type: z.literal("rgb"),
|
|
225
|
-
r: z.number(),
|
|
226
|
-
g: z.number(),
|
|
227
|
-
b: z.number(),
|
|
228
|
-
alpha: z.number(),
|
|
229
|
-
hidden: z.boolean().optional()
|
|
230
|
-
});
|
|
231
|
-
var ColorValue = z.object({
|
|
232
|
-
type: z.literal("color"),
|
|
233
|
-
// all these color spaces are defined by design tokens specification
|
|
234
|
-
colorSpace: z.union([
|
|
235
|
-
z.literal("hex"),
|
|
236
|
-
z.literal("srgb"),
|
|
237
|
-
z.literal("p3"),
|
|
238
|
-
z.literal("srgb-linear"),
|
|
239
|
-
z.literal("hsl"),
|
|
240
|
-
z.literal("hwb"),
|
|
241
|
-
z.literal("lab"),
|
|
242
|
-
z.literal("lch"),
|
|
243
|
-
z.literal("oklab"),
|
|
244
|
-
z.literal("oklch"),
|
|
245
|
-
z.literal("a98rgb"),
|
|
246
|
-
z.literal("prophoto"),
|
|
247
|
-
z.literal("rec2020"),
|
|
248
|
-
z.literal("xyz-d65"),
|
|
249
|
-
z.literal("xyz-d50")
|
|
250
|
-
]),
|
|
251
|
-
components: z.tuple([z.number(), z.number(), z.number()]),
|
|
252
|
-
alpha: z.union([z.number(), z.lazy(() => VarValue)]),
|
|
253
|
-
hidden: z.boolean().optional()
|
|
254
|
-
});
|
|
255
|
-
var FunctionValue = z.object({
|
|
256
|
-
type: z.literal("function"),
|
|
257
|
-
name: z.string(),
|
|
258
|
-
args: z.lazy(() => StyleValue),
|
|
259
|
-
hidden: z.boolean().optional()
|
|
260
|
-
});
|
|
261
|
-
var ImageValue = z.object({
|
|
262
|
-
type: z.literal("image"),
|
|
263
|
-
value: z.union([
|
|
264
|
-
z.object({ type: z.literal("asset"), value: z.string() }),
|
|
265
|
-
// url is not stored in db and only used by css-engine transformValue
|
|
266
|
-
// to prepare image value for rendering
|
|
267
|
-
z.object({ type: z.literal("url"), url: z.string() })
|
|
268
|
-
]),
|
|
269
|
-
// For the builder we want to be able to hide images
|
|
270
|
-
hidden: z.boolean().optional()
|
|
271
|
-
});
|
|
272
|
-
var GuaranteedInvalidValue = z.object({
|
|
273
|
-
type: z.literal("guaranteedInvalid"),
|
|
274
|
-
hidden: z.boolean().optional()
|
|
275
|
-
});
|
|
276
|
-
var InvalidValue = z.object({
|
|
277
|
-
type: z.literal("invalid"),
|
|
278
|
-
value: z.string(),
|
|
279
|
-
hidden: z.boolean().optional()
|
|
280
|
-
});
|
|
281
|
-
var UnsetValue = z.object({
|
|
282
|
-
type: z.literal("unset"),
|
|
283
|
-
value: z.literal(""),
|
|
284
|
-
hidden: z.boolean().optional()
|
|
285
|
-
});
|
|
286
|
-
var VarFallback = z.union([
|
|
287
|
-
UnparsedValue,
|
|
288
|
-
KeywordValue,
|
|
289
|
-
UnitValue,
|
|
290
|
-
ColorValue,
|
|
291
|
-
RgbValue
|
|
292
|
-
]);
|
|
293
|
-
var toVarFallback = (styleValue, transformValue) => {
|
|
294
|
-
if (styleValue.type === "unparsed" || styleValue.type === "keyword" || styleValue.type === "unit" || styleValue.type === "color" || styleValue.type === "rgb") {
|
|
295
|
-
return styleValue;
|
|
296
|
-
}
|
|
297
|
-
styleValue;
|
|
298
|
-
return { type: "unparsed", value: toValue(styleValue, transformValue) };
|
|
299
|
-
};
|
|
300
|
-
var VarValue = z.object({
|
|
301
|
-
type: z.literal("var"),
|
|
302
|
-
value: z.string(),
|
|
303
|
-
fallback: VarFallback.optional(),
|
|
304
|
-
hidden: z.boolean().optional()
|
|
305
|
-
});
|
|
306
|
-
var TupleValueItem = z.union([
|
|
307
|
-
UnitValue,
|
|
308
|
-
KeywordValue,
|
|
309
|
-
UnparsedValue,
|
|
310
|
-
ImageValue,
|
|
311
|
-
ColorValue,
|
|
312
|
-
RgbValue,
|
|
313
|
-
FunctionValue,
|
|
314
|
-
VarValue
|
|
315
|
-
]);
|
|
316
|
-
var TupleValue = z.object({
|
|
317
|
-
type: z.literal("tuple"),
|
|
318
|
-
value: z.array(TupleValueItem),
|
|
319
|
-
hidden: z.boolean().optional()
|
|
320
|
-
});
|
|
321
|
-
var ShadowValue = z.object({
|
|
322
|
-
type: z.literal("shadow"),
|
|
323
|
-
hidden: z.boolean().optional(),
|
|
324
|
-
position: z.union([z.literal("inset"), z.literal("outset")]),
|
|
325
|
-
offsetX: z.union([UnitValue, VarValue]),
|
|
326
|
-
offsetY: z.union([UnitValue, VarValue]),
|
|
327
|
-
blur: z.union([UnitValue, VarValue]).optional(),
|
|
328
|
-
spread: z.union([UnitValue, VarValue]).optional(),
|
|
329
|
-
color: z.union([ColorValue, RgbValue, KeywordValue, VarValue]).optional()
|
|
330
|
-
});
|
|
331
|
-
var LayerValueItem = z.union([
|
|
332
|
-
UnitValue,
|
|
333
|
-
KeywordValue,
|
|
334
|
-
UnparsedValue,
|
|
335
|
-
ImageValue,
|
|
336
|
-
TupleValue,
|
|
337
|
-
ShadowValue,
|
|
338
|
-
ColorValue,
|
|
339
|
-
RgbValue,
|
|
340
|
-
InvalidValue,
|
|
341
|
-
FunctionValue,
|
|
342
|
-
VarValue
|
|
343
|
-
]);
|
|
344
|
-
var LayersValue = z.object({
|
|
345
|
-
type: z.literal("layers"),
|
|
346
|
-
value: z.array(LayerValueItem),
|
|
347
|
-
hidden: z.boolean().optional()
|
|
348
|
-
});
|
|
349
|
-
var StyleValue = z.union([
|
|
350
|
-
ImageValue,
|
|
351
|
-
LayersValue,
|
|
352
|
-
UnitValue,
|
|
353
|
-
KeywordValue,
|
|
354
|
-
FontFamilyValue,
|
|
355
|
-
ColorValue,
|
|
356
|
-
RgbValue,
|
|
357
|
-
UnparsedValue,
|
|
358
|
-
TupleValue,
|
|
359
|
-
FunctionValue,
|
|
360
|
-
GuaranteedInvalidValue,
|
|
361
|
-
InvalidValue,
|
|
362
|
-
UnsetValue,
|
|
363
|
-
VarValue,
|
|
364
|
-
ShadowValue
|
|
365
|
-
]);
|
|
366
|
-
|
|
367
|
-
// src/css.ts
|
|
368
|
-
var cssWideKeywords = /* @__PURE__ */ new Set([
|
|
369
|
-
"initial",
|
|
370
|
-
"inherit",
|
|
371
|
-
"unset",
|
|
372
|
-
"revert",
|
|
373
|
-
"revert-layer"
|
|
374
|
-
]);
|
|
375
|
-
|
|
376
204
|
// src/core/merger.ts
|
|
377
205
|
var isLonghandValue = (value) => {
|
|
378
206
|
if (value === void 0) {
|
|
@@ -419,8 +247,8 @@ var mergeWhiteSpaceAndTextWrap = (styleMap) => {
|
|
|
419
247
|
const collapse = toValue(collapseValue);
|
|
420
248
|
const modeValue = styleMap.get("text-wrap-mode");
|
|
421
249
|
const mode = toValue(modeValue);
|
|
422
|
-
const
|
|
423
|
-
const style = toValue(
|
|
250
|
+
const styleValue2 = styleMap.get("text-wrap-style");
|
|
251
|
+
const style = toValue(styleValue2);
|
|
424
252
|
styleMap.delete("text-wrap-mode");
|
|
425
253
|
styleMap.delete("text-wrap-style");
|
|
426
254
|
if (collapse === "collapse" || collapse === "initial" || mode === "wrap" || mode === "initial") {
|
|
@@ -448,7 +276,7 @@ var mergeWhiteSpaceAndTextWrap = (styleMap) => {
|
|
|
448
276
|
if (style === "balance" || style === "stable" || style === "pretty") {
|
|
449
277
|
styleMap.set("text-wrap", { type: "keyword", value: style });
|
|
450
278
|
}
|
|
451
|
-
const textWrap = (
|
|
279
|
+
const textWrap = (styleValue2?.type !== "keyword" ? styleValue2 : void 0) ?? (modeValue?.type !== "keyword" ? modeValue : void 0);
|
|
452
280
|
if (textWrap) {
|
|
453
281
|
styleMap.set("text-wrap", textWrap);
|
|
454
282
|
}
|
|
@@ -1080,6 +908,176 @@ var generateAtomic = (sheet, options) => {
|
|
|
1080
908
|
return { cssText, classes };
|
|
1081
909
|
};
|
|
1082
910
|
|
|
911
|
+
// src/schema.ts
|
|
912
|
+
import { z } from "zod";
|
|
913
|
+
var unit = z.string();
|
|
914
|
+
var unitValue = z.object({
|
|
915
|
+
type: z.literal("unit"),
|
|
916
|
+
unit,
|
|
917
|
+
value: z.number(),
|
|
918
|
+
hidden: z.boolean().optional()
|
|
919
|
+
});
|
|
920
|
+
var keywordValue = z.object({
|
|
921
|
+
type: z.literal("keyword"),
|
|
922
|
+
// @todo use exact type
|
|
923
|
+
value: z.string(),
|
|
924
|
+
hidden: z.boolean().optional()
|
|
925
|
+
});
|
|
926
|
+
var unparsedValue = z.object({
|
|
927
|
+
type: z.literal("unparsed"),
|
|
928
|
+
value: z.string(),
|
|
929
|
+
// For the builder we want to be able to hide background-image
|
|
930
|
+
hidden: z.boolean().optional()
|
|
931
|
+
});
|
|
932
|
+
var fontFamilyValue = z.object({
|
|
933
|
+
type: z.literal("fontFamily"),
|
|
934
|
+
value: z.array(z.string()),
|
|
935
|
+
hidden: z.boolean().optional()
|
|
936
|
+
});
|
|
937
|
+
var rgbValue = z.object({
|
|
938
|
+
type: z.literal("rgb"),
|
|
939
|
+
r: z.number(),
|
|
940
|
+
g: z.number(),
|
|
941
|
+
b: z.number(),
|
|
942
|
+
alpha: z.number(),
|
|
943
|
+
hidden: z.boolean().optional()
|
|
944
|
+
});
|
|
945
|
+
var colorValue = z.object({
|
|
946
|
+
type: z.literal("color"),
|
|
947
|
+
// all these color spaces are defined by design tokens specification
|
|
948
|
+
colorSpace: z.union([
|
|
949
|
+
z.literal("hex"),
|
|
950
|
+
z.literal("srgb"),
|
|
951
|
+
z.literal("p3"),
|
|
952
|
+
z.literal("srgb-linear"),
|
|
953
|
+
z.literal("hsl"),
|
|
954
|
+
z.literal("hwb"),
|
|
955
|
+
z.literal("lab"),
|
|
956
|
+
z.literal("lch"),
|
|
957
|
+
z.literal("oklab"),
|
|
958
|
+
z.literal("oklch"),
|
|
959
|
+
z.literal("a98rgb"),
|
|
960
|
+
z.literal("prophoto"),
|
|
961
|
+
z.literal("rec2020"),
|
|
962
|
+
z.literal("xyz-d65"),
|
|
963
|
+
z.literal("xyz-d50")
|
|
964
|
+
]),
|
|
965
|
+
components: z.tuple([z.number(), z.number(), z.number()]),
|
|
966
|
+
alpha: z.union([z.number(), z.lazy(() => varValue)]),
|
|
967
|
+
hidden: z.boolean().optional()
|
|
968
|
+
});
|
|
969
|
+
var functionValue = z.object({
|
|
970
|
+
type: z.literal("function"),
|
|
971
|
+
name: z.string(),
|
|
972
|
+
args: z.lazy(() => styleValue),
|
|
973
|
+
hidden: z.boolean().optional()
|
|
974
|
+
});
|
|
975
|
+
var imageValue = z.object({
|
|
976
|
+
type: z.literal("image"),
|
|
977
|
+
value: z.union([
|
|
978
|
+
z.object({ type: z.literal("asset"), value: z.string() }),
|
|
979
|
+
// url is not stored in db and only used by css-engine transformValue
|
|
980
|
+
// to prepare image value for rendering
|
|
981
|
+
z.object({ type: z.literal("url"), url: z.string() })
|
|
982
|
+
]),
|
|
983
|
+
// For the builder we want to be able to hide images
|
|
984
|
+
hidden: z.boolean().optional()
|
|
985
|
+
});
|
|
986
|
+
var guaranteedInvalidValue = z.object({
|
|
987
|
+
type: z.literal("guaranteedInvalid"),
|
|
988
|
+
hidden: z.boolean().optional()
|
|
989
|
+
});
|
|
990
|
+
var invalidValue = z.object({
|
|
991
|
+
type: z.literal("invalid"),
|
|
992
|
+
value: z.string(),
|
|
993
|
+
hidden: z.boolean().optional()
|
|
994
|
+
});
|
|
995
|
+
var unsetValue = z.object({
|
|
996
|
+
type: z.literal("unset"),
|
|
997
|
+
value: z.literal(""),
|
|
998
|
+
hidden: z.boolean().optional()
|
|
999
|
+
});
|
|
1000
|
+
var varFallback = z.union([
|
|
1001
|
+
unparsedValue,
|
|
1002
|
+
keywordValue,
|
|
1003
|
+
unitValue,
|
|
1004
|
+
colorValue,
|
|
1005
|
+
rgbValue
|
|
1006
|
+
]);
|
|
1007
|
+
var toVarFallback = (styleValue2, transformValue) => {
|
|
1008
|
+
if (styleValue2.type === "unparsed" || styleValue2.type === "keyword" || styleValue2.type === "unit" || styleValue2.type === "color" || styleValue2.type === "rgb") {
|
|
1009
|
+
return styleValue2;
|
|
1010
|
+
}
|
|
1011
|
+
styleValue2;
|
|
1012
|
+
return { type: "unparsed", value: toValue(styleValue2, transformValue) };
|
|
1013
|
+
};
|
|
1014
|
+
var varValue = z.object({
|
|
1015
|
+
type: z.literal("var"),
|
|
1016
|
+
value: z.string(),
|
|
1017
|
+
fallback: varFallback.optional(),
|
|
1018
|
+
hidden: z.boolean().optional()
|
|
1019
|
+
});
|
|
1020
|
+
var tupleValueItem = z.union([
|
|
1021
|
+
unitValue,
|
|
1022
|
+
keywordValue,
|
|
1023
|
+
unparsedValue,
|
|
1024
|
+
imageValue,
|
|
1025
|
+
colorValue,
|
|
1026
|
+
rgbValue,
|
|
1027
|
+
functionValue,
|
|
1028
|
+
varValue
|
|
1029
|
+
]);
|
|
1030
|
+
var tupleValue = z.object({
|
|
1031
|
+
type: z.literal("tuple"),
|
|
1032
|
+
value: z.array(tupleValueItem),
|
|
1033
|
+
hidden: z.boolean().optional()
|
|
1034
|
+
});
|
|
1035
|
+
var shadowValue = z.object({
|
|
1036
|
+
type: z.literal("shadow"),
|
|
1037
|
+
hidden: z.boolean().optional(),
|
|
1038
|
+
position: z.union([z.literal("inset"), z.literal("outset")]),
|
|
1039
|
+
offsetX: z.union([unitValue, varValue]),
|
|
1040
|
+
offsetY: z.union([unitValue, varValue]),
|
|
1041
|
+
blur: z.union([unitValue, varValue]).optional(),
|
|
1042
|
+
spread: z.union([unitValue, varValue]).optional(),
|
|
1043
|
+
color: z.union([colorValue, rgbValue, keywordValue, varValue]).optional()
|
|
1044
|
+
});
|
|
1045
|
+
var layerValueItem = z.union([
|
|
1046
|
+
unitValue,
|
|
1047
|
+
keywordValue,
|
|
1048
|
+
unparsedValue,
|
|
1049
|
+
imageValue,
|
|
1050
|
+
tupleValue,
|
|
1051
|
+
shadowValue,
|
|
1052
|
+
colorValue,
|
|
1053
|
+
rgbValue,
|
|
1054
|
+
invalidValue,
|
|
1055
|
+
functionValue,
|
|
1056
|
+
varValue
|
|
1057
|
+
]);
|
|
1058
|
+
var layersValue = z.object({
|
|
1059
|
+
type: z.literal("layers"),
|
|
1060
|
+
value: z.array(layerValueItem),
|
|
1061
|
+
hidden: z.boolean().optional()
|
|
1062
|
+
});
|
|
1063
|
+
var styleValue = z.union([
|
|
1064
|
+
imageValue,
|
|
1065
|
+
layersValue,
|
|
1066
|
+
unitValue,
|
|
1067
|
+
keywordValue,
|
|
1068
|
+
fontFamilyValue,
|
|
1069
|
+
colorValue,
|
|
1070
|
+
rgbValue,
|
|
1071
|
+
unparsedValue,
|
|
1072
|
+
tupleValue,
|
|
1073
|
+
functionValue,
|
|
1074
|
+
guaranteedInvalidValue,
|
|
1075
|
+
invalidValue,
|
|
1076
|
+
unsetValue,
|
|
1077
|
+
varValue,
|
|
1078
|
+
shadowValue
|
|
1079
|
+
]);
|
|
1080
|
+
|
|
1083
1081
|
// src/color.ts
|
|
1084
1082
|
import * as colorjs from "colorjs.io/fn";
|
|
1085
1083
|
colorjs.ColorSpace.register(colorjs.sRGB);
|
|
@@ -1190,42 +1188,42 @@ var serializeColor = (color2) => {
|
|
|
1190
1188
|
return `rgb(${red}, ${green}, ${blue})`;
|
|
1191
1189
|
};
|
|
1192
1190
|
export {
|
|
1193
|
-
ColorValue,
|
|
1194
1191
|
FakeStyleElement,
|
|
1195
|
-
FunctionValue,
|
|
1196
|
-
GuaranteedInvalidValue,
|
|
1197
|
-
ImageValue,
|
|
1198
|
-
InvalidValue,
|
|
1199
|
-
KeywordValue,
|
|
1200
|
-
LayersValue,
|
|
1201
|
-
ShadowValue,
|
|
1202
|
-
StyleValue,
|
|
1203
|
-
TupleValue,
|
|
1204
|
-
TupleValueItem,
|
|
1205
|
-
UnitValue,
|
|
1206
|
-
UnparsedValue,
|
|
1207
|
-
VarFallback,
|
|
1208
1192
|
color,
|
|
1209
1193
|
colorDistance,
|
|
1194
|
+
colorValue,
|
|
1210
1195
|
compareMedia,
|
|
1211
1196
|
createRegularStyleSheet,
|
|
1212
1197
|
cssWideKeywords,
|
|
1213
1198
|
equalMedia,
|
|
1214
1199
|
findApplicableMedia,
|
|
1200
|
+
functionValue,
|
|
1215
1201
|
generateAtomic,
|
|
1216
1202
|
generateStyleMap,
|
|
1203
|
+
guaranteedInvalidValue,
|
|
1217
1204
|
hyphenateProperty,
|
|
1205
|
+
imageValue,
|
|
1206
|
+
invalidValue,
|
|
1207
|
+
keywordValue,
|
|
1208
|
+
layersValue,
|
|
1218
1209
|
lerpColor,
|
|
1219
1210
|
matchMedia,
|
|
1220
1211
|
mergeStyles,
|
|
1221
1212
|
parseColor,
|
|
1222
1213
|
prefixStyles,
|
|
1223
1214
|
serializeColor,
|
|
1215
|
+
shadowValue,
|
|
1224
1216
|
srgbColor,
|
|
1217
|
+
styleValue,
|
|
1225
1218
|
toColorComponent,
|
|
1226
1219
|
toColorSpace,
|
|
1227
1220
|
toValue,
|
|
1228
1221
|
toVarFallback,
|
|
1229
1222
|
transparentColor,
|
|
1223
|
+
tupleValue,
|
|
1224
|
+
tupleValueItem,
|
|
1225
|
+
unitValue,
|
|
1226
|
+
unparsedValue,
|
|
1227
|
+
varFallback,
|
|
1230
1228
|
whiteColor
|
|
1231
1229
|
};
|
package/lib/types/schema.d.ts
CHANGED
|
@@ -5,9 +5,9 @@ export type CustomProperty = `--${string}`;
|
|
|
5
5
|
export type StyleProperty = CamelCasedProperty | CustomProperty;
|
|
6
6
|
export type CssProperty = HyphenatedProperty | CustomProperty;
|
|
7
7
|
export type CssStyleMap = Map<CssProperty, StyleValue>;
|
|
8
|
-
declare const
|
|
9
|
-
export type Unit = z.infer<typeof
|
|
10
|
-
export declare const
|
|
8
|
+
declare const unit: z.ZodType<GeneratedUnit | "number">;
|
|
9
|
+
export type Unit = z.infer<typeof unit>;
|
|
10
|
+
export declare const unitValue: z.ZodObject<{
|
|
11
11
|
type: z.ZodLiteral<"unit">;
|
|
12
12
|
unit: z.ZodType<"number" | GeneratedUnit, z.ZodTypeDef, "number" | GeneratedUnit>;
|
|
13
13
|
value: z.ZodNumber;
|
|
@@ -23,8 +23,8 @@ export declare const UnitValue: z.ZodObject<{
|
|
|
23
23
|
unit: "number" | GeneratedUnit;
|
|
24
24
|
hidden?: boolean | undefined;
|
|
25
25
|
}>;
|
|
26
|
-
export type UnitValue = z.infer<typeof
|
|
27
|
-
export declare const
|
|
26
|
+
export type UnitValue = z.infer<typeof unitValue>;
|
|
27
|
+
export declare const keywordValue: z.ZodObject<{
|
|
28
28
|
type: z.ZodLiteral<"keyword">;
|
|
29
29
|
value: z.ZodString;
|
|
30
30
|
hidden: z.ZodOptional<z.ZodBoolean>;
|
|
@@ -37,11 +37,11 @@ export declare const KeywordValue: z.ZodObject<{
|
|
|
37
37
|
type: "keyword";
|
|
38
38
|
hidden?: boolean | undefined;
|
|
39
39
|
}>;
|
|
40
|
-
export type KeywordValue = z.infer<typeof
|
|
40
|
+
export type KeywordValue = z.infer<typeof keywordValue>;
|
|
41
41
|
/**
|
|
42
42
|
* Valid unparsed css value
|
|
43
43
|
**/
|
|
44
|
-
export declare const
|
|
44
|
+
export declare const unparsedValue: z.ZodObject<{
|
|
45
45
|
type: z.ZodLiteral<"unparsed">;
|
|
46
46
|
value: z.ZodString;
|
|
47
47
|
hidden: z.ZodOptional<z.ZodBoolean>;
|
|
@@ -54,8 +54,8 @@ export declare const UnparsedValue: z.ZodObject<{
|
|
|
54
54
|
type: "unparsed";
|
|
55
55
|
hidden?: boolean | undefined;
|
|
56
56
|
}>;
|
|
57
|
-
export type UnparsedValue = z.infer<typeof
|
|
58
|
-
declare const
|
|
57
|
+
export type UnparsedValue = z.infer<typeof unparsedValue>;
|
|
58
|
+
declare const fontFamilyValue: z.ZodObject<{
|
|
59
59
|
type: z.ZodLiteral<"fontFamily">;
|
|
60
60
|
value: z.ZodArray<z.ZodString, "many">;
|
|
61
61
|
hidden: z.ZodOptional<z.ZodBoolean>;
|
|
@@ -68,8 +68,8 @@ declare const FontFamilyValue: z.ZodObject<{
|
|
|
68
68
|
type: "fontFamily";
|
|
69
69
|
hidden?: boolean | undefined;
|
|
70
70
|
}>;
|
|
71
|
-
export type FontFamilyValue = z.infer<typeof
|
|
72
|
-
declare const
|
|
71
|
+
export type FontFamilyValue = z.infer<typeof fontFamilyValue>;
|
|
72
|
+
declare const rgbValue: z.ZodObject<{
|
|
73
73
|
type: z.ZodLiteral<"rgb">;
|
|
74
74
|
r: z.ZodNumber;
|
|
75
75
|
g: z.ZodNumber;
|
|
@@ -91,7 +91,7 @@ declare const RgbValue: z.ZodObject<{
|
|
|
91
91
|
alpha: number;
|
|
92
92
|
hidden?: boolean | undefined;
|
|
93
93
|
}>;
|
|
94
|
-
export type RgbValue = z.infer<typeof
|
|
94
|
+
export type RgbValue = z.infer<typeof rgbValue>;
|
|
95
95
|
export type ColorValue = {
|
|
96
96
|
type: "color";
|
|
97
97
|
colorSpace: "hex" | "srgb" | "p3" | "srgb-linear" | "hsl" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "a98rgb" | "prophoto" | "rec2020" | "xyz-d65" | "xyz-d50";
|
|
@@ -99,15 +99,15 @@ export type ColorValue = {
|
|
|
99
99
|
alpha: number | VarValue;
|
|
100
100
|
hidden?: boolean;
|
|
101
101
|
};
|
|
102
|
-
export declare const
|
|
103
|
-
export type FunctionValue = z.infer<typeof
|
|
104
|
-
export declare const
|
|
102
|
+
export declare const colorValue: z.ZodType<ColorValue>;
|
|
103
|
+
export type FunctionValue = z.infer<typeof functionValue>;
|
|
104
|
+
export declare const functionValue: z.ZodType<{
|
|
105
105
|
type: "function";
|
|
106
106
|
name: string;
|
|
107
107
|
args: StyleValue;
|
|
108
108
|
hidden?: boolean;
|
|
109
109
|
}>;
|
|
110
|
-
export declare const
|
|
110
|
+
export declare const imageValue: z.ZodObject<{
|
|
111
111
|
type: z.ZodLiteral<"image">;
|
|
112
112
|
value: z.ZodUnion<[z.ZodObject<{
|
|
113
113
|
type: z.ZodLiteral<"asset">;
|
|
@@ -150,8 +150,8 @@ export declare const ImageValue: z.ZodObject<{
|
|
|
150
150
|
type: "image";
|
|
151
151
|
hidden?: boolean | undefined;
|
|
152
152
|
}>;
|
|
153
|
-
export type ImageValue = z.infer<typeof
|
|
154
|
-
export declare const
|
|
153
|
+
export type ImageValue = z.infer<typeof imageValue>;
|
|
154
|
+
export declare const guaranteedInvalidValue: z.ZodObject<{
|
|
155
155
|
type: z.ZodLiteral<"guaranteedInvalid">;
|
|
156
156
|
hidden: z.ZodOptional<z.ZodBoolean>;
|
|
157
157
|
}, "strip", z.ZodTypeAny, {
|
|
@@ -161,8 +161,8 @@ export declare const GuaranteedInvalidValue: z.ZodObject<{
|
|
|
161
161
|
type: "guaranteedInvalid";
|
|
162
162
|
hidden?: boolean | undefined;
|
|
163
163
|
}>;
|
|
164
|
-
export type GuaranteedInvalidValue = z.infer<typeof
|
|
165
|
-
export declare const
|
|
164
|
+
export type GuaranteedInvalidValue = z.infer<typeof guaranteedInvalidValue>;
|
|
165
|
+
export declare const invalidValue: z.ZodObject<{
|
|
166
166
|
type: z.ZodLiteral<"invalid">;
|
|
167
167
|
value: z.ZodString;
|
|
168
168
|
hidden: z.ZodOptional<z.ZodBoolean>;
|
|
@@ -175,12 +175,12 @@ export declare const InvalidValue: z.ZodObject<{
|
|
|
175
175
|
type: "invalid";
|
|
176
176
|
hidden?: boolean | undefined;
|
|
177
177
|
}>;
|
|
178
|
-
export type InvalidValue = z.infer<typeof
|
|
178
|
+
export type InvalidValue = z.infer<typeof invalidValue>;
|
|
179
179
|
/**
|
|
180
180
|
* Use GuaranteedInvalidValue if you need a temp placeholder before user enters a value
|
|
181
181
|
* @deprecated
|
|
182
182
|
*/
|
|
183
|
-
declare const
|
|
183
|
+
declare const unsetValue: z.ZodObject<{
|
|
184
184
|
type: z.ZodLiteral<"unset">;
|
|
185
185
|
value: z.ZodLiteral<"">;
|
|
186
186
|
hidden: z.ZodOptional<z.ZodBoolean>;
|
|
@@ -193,8 +193,8 @@ declare const UnsetValue: z.ZodObject<{
|
|
|
193
193
|
type: "unset";
|
|
194
194
|
hidden?: boolean | undefined;
|
|
195
195
|
}>;
|
|
196
|
-
export type UnsetValue = z.infer<typeof
|
|
197
|
-
export declare const
|
|
196
|
+
export type UnsetValue = z.infer<typeof unsetValue>;
|
|
197
|
+
export declare const varFallback: z.ZodUnion<[z.ZodObject<{
|
|
198
198
|
type: z.ZodLiteral<"unparsed">;
|
|
199
199
|
value: z.ZodString;
|
|
200
200
|
hidden: z.ZodOptional<z.ZodBoolean>;
|
|
@@ -255,9 +255,9 @@ export declare const VarFallback: z.ZodUnion<[z.ZodObject<{
|
|
|
255
255
|
alpha: number;
|
|
256
256
|
hidden?: boolean | undefined;
|
|
257
257
|
}>]>;
|
|
258
|
-
export type VarFallback = z.infer<typeof
|
|
258
|
+
export type VarFallback = z.infer<typeof varFallback>;
|
|
259
259
|
export declare const toVarFallback: (styleValue: StyleValue, transformValue?: TransformValue) => VarFallback;
|
|
260
|
-
declare const
|
|
260
|
+
declare const varValue: z.ZodObject<{
|
|
261
261
|
type: z.ZodLiteral<"var">;
|
|
262
262
|
value: z.ZodString;
|
|
263
263
|
fallback: z.ZodOptional<z.ZodUnion<[z.ZodObject<{
|
|
@@ -373,8 +373,8 @@ declare const VarValue: z.ZodObject<{
|
|
|
373
373
|
} | undefined;
|
|
374
374
|
hidden?: boolean | undefined;
|
|
375
375
|
}>;
|
|
376
|
-
export type VarValue = z.infer<typeof
|
|
377
|
-
export declare const
|
|
376
|
+
export type VarValue = z.infer<typeof varValue>;
|
|
377
|
+
export declare const tupleValueItem: z.ZodUnion<[z.ZodObject<{
|
|
378
378
|
type: z.ZodLiteral<"unit">;
|
|
379
379
|
unit: z.ZodType<"number" | GeneratedUnit, z.ZodTypeDef, "number" | GeneratedUnit>;
|
|
380
380
|
value: z.ZodNumber;
|
|
@@ -602,8 +602,8 @@ export declare const TupleValueItem: z.ZodUnion<[z.ZodObject<{
|
|
|
602
602
|
} | undefined;
|
|
603
603
|
hidden?: boolean | undefined;
|
|
604
604
|
}>]>;
|
|
605
|
-
export type TupleValueItem = z.infer<typeof
|
|
606
|
-
export declare const
|
|
605
|
+
export type TupleValueItem = z.infer<typeof tupleValueItem>;
|
|
606
|
+
export declare const tupleValue: z.ZodObject<{
|
|
607
607
|
type: z.ZodLiteral<"tuple">;
|
|
608
608
|
value: z.ZodArray<z.ZodUnion<[z.ZodObject<{
|
|
609
609
|
type: z.ZodLiteral<"unit">;
|
|
@@ -963,8 +963,8 @@ export declare const TupleValue: z.ZodObject<{
|
|
|
963
963
|
type: "tuple";
|
|
964
964
|
hidden?: boolean | undefined;
|
|
965
965
|
}>;
|
|
966
|
-
export type TupleValue = z.infer<typeof
|
|
967
|
-
export declare const
|
|
966
|
+
export type TupleValue = z.infer<typeof tupleValue>;
|
|
967
|
+
export declare const shadowValue: z.ZodObject<{
|
|
968
968
|
type: z.ZodLiteral<"shadow">;
|
|
969
969
|
hidden: z.ZodOptional<z.ZodBoolean>;
|
|
970
970
|
position: z.ZodUnion<[z.ZodLiteral<"inset">, z.ZodLiteral<"outset">]>;
|
|
@@ -1972,8 +1972,8 @@ export declare const ShadowValue: z.ZodObject<{
|
|
|
1972
1972
|
hidden?: boolean | undefined;
|
|
1973
1973
|
} | undefined;
|
|
1974
1974
|
}>;
|
|
1975
|
-
export type ShadowValue = z.infer<typeof
|
|
1976
|
-
declare const
|
|
1975
|
+
export type ShadowValue = z.infer<typeof shadowValue>;
|
|
1976
|
+
declare const layerValueItem: z.ZodUnion<[z.ZodObject<{
|
|
1977
1977
|
type: z.ZodLiteral<"unit">;
|
|
1978
1978
|
unit: z.ZodType<"number" | GeneratedUnit, z.ZodTypeDef, "number" | GeneratedUnit>;
|
|
1979
1979
|
value: z.ZodNumber;
|
|
@@ -3579,8 +3579,8 @@ declare const LayerValueItem: z.ZodUnion<[z.ZodObject<{
|
|
|
3579
3579
|
} | undefined;
|
|
3580
3580
|
hidden?: boolean | undefined;
|
|
3581
3581
|
}>]>;
|
|
3582
|
-
export type LayerValueItem = z.infer<typeof
|
|
3583
|
-
export declare const
|
|
3582
|
+
export type LayerValueItem = z.infer<typeof layerValueItem>;
|
|
3583
|
+
export declare const layersValue: z.ZodObject<{
|
|
3584
3584
|
type: z.ZodLiteral<"layers">;
|
|
3585
3585
|
value: z.ZodArray<z.ZodUnion<[z.ZodObject<{
|
|
3586
3586
|
type: z.ZodLiteral<"unit">;
|
|
@@ -5784,8 +5784,8 @@ export declare const LayersValue: z.ZodObject<{
|
|
|
5784
5784
|
type: "layers";
|
|
5785
5785
|
hidden?: boolean | undefined;
|
|
5786
5786
|
}>;
|
|
5787
|
-
export type LayersValue = z.infer<typeof
|
|
5788
|
-
export declare const
|
|
5787
|
+
export type LayersValue = z.infer<typeof layersValue>;
|
|
5788
|
+
export declare const styleValue: z.ZodUnion<[z.ZodObject<{
|
|
5789
5789
|
type: z.ZodLiteral<"image">;
|
|
5790
5790
|
value: z.ZodUnion<[z.ZodObject<{
|
|
5791
5791
|
type: z.ZodLiteral<"asset">;
|
|
@@ -9627,5 +9627,5 @@ export declare const StyleValue: z.ZodUnion<[z.ZodObject<{
|
|
|
9627
9627
|
hidden?: boolean | undefined;
|
|
9628
9628
|
} | undefined;
|
|
9629
9629
|
}>]>;
|
|
9630
|
-
export type StyleValue = z.infer<typeof
|
|
9630
|
+
export type StyleValue = z.infer<typeof styleValue>;
|
|
9631
9631
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webstudio-is/css-engine",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.273.0",
|
|
4
4
|
"description": "CSS Renderer for Webstudio",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"@emotion/hash": "^0.9.2",
|
|
10
10
|
"colorjs.io": "^0.6.1",
|
|
11
11
|
"zod": "^3.24.2",
|
|
12
|
-
"@webstudio-is/fonts": "0.
|
|
12
|
+
"@webstudio-is/fonts": "0.273.0"
|
|
13
13
|
},
|
|
14
14
|
"devDependencies": {
|
|
15
15
|
"@types/react": "^18.2.70",
|