@webstudio-is/css-engine 0.208.0 → 0.210.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.
Files changed (5) hide show
  1. package/lib/index.js +30 -1
  2. package/lib/runtime.js +16 -0
  3. package/lib/types/core/merger.d.ts +338 -8
  4. package/lib/types/schema.d.ts +7260 -1563
  5. package/package.json +3 -3
package/lib/index.js CHANGED
@@ -108,6 +108,22 @@ var toValue = (styleValue, transformValue) => {
108
108
  }
109
109
  return value.value.filter((value2) => value2.hidden !== true).map((value2) => toValue(value2, transformValue)).join(" ");
110
110
  }
111
+ if (value.type === "shadow") {
112
+ let shadow = `${toValue(value.offsetX)} ${toValue(value.offsetY)}`;
113
+ if (value.blur) {
114
+ shadow += ` ${toValue(value.blur)}`;
115
+ }
116
+ if (value.spread) {
117
+ shadow += ` ${toValue(value.spread)}`;
118
+ }
119
+ if (value.color) {
120
+ shadow += ` ${toValue(value.color)}`;
121
+ }
122
+ if (value.position === "inset") {
123
+ shadow += ` inset`;
124
+ }
125
+ return shadow;
126
+ }
111
127
  if (value.type === "function") {
112
128
  if (value.hidden === true) {
113
129
  return "";
@@ -218,12 +234,23 @@ var TupleValue = z.object({
218
234
  value: z.array(TupleValueItem),
219
235
  hidden: z.boolean().optional()
220
236
  });
237
+ var ShadowValue = z.object({
238
+ type: z.literal("shadow"),
239
+ hidden: z.boolean().optional(),
240
+ position: z.union([z.literal("inset"), z.literal("outset")]),
241
+ offsetX: z.union([UnitValue, VarValue]),
242
+ offsetY: z.union([UnitValue, VarValue]),
243
+ blur: z.union([UnitValue, VarValue]).optional(),
244
+ spread: z.union([UnitValue, VarValue]).optional(),
245
+ color: z.union([RgbValue, KeywordValue, VarValue]).optional()
246
+ });
221
247
  var LayerValueItem = z.union([
222
248
  UnitValue,
223
249
  KeywordValue,
224
250
  UnparsedValue,
225
251
  ImageValue,
226
252
  TupleValue,
253
+ ShadowValue,
227
254
  RgbValue,
228
255
  InvalidValue,
229
256
  FunctionValue,
@@ -247,7 +274,8 @@ var StyleValue = z.union([
247
274
  GuaranteedInvalidValue,
248
275
  InvalidValue,
249
276
  UnsetValue,
250
- VarValue
277
+ VarValue,
278
+ ShadowValue
251
279
  ]);
252
280
 
253
281
  // src/css.ts
@@ -934,6 +962,7 @@ export {
934
962
  InvalidValue,
935
963
  KeywordValue,
936
964
  LayersValue,
965
+ ShadowValue,
937
966
  StyleValue,
938
967
  TupleValue,
939
968
  TupleValueItem,
package/lib/runtime.js CHANGED
@@ -81,6 +81,22 @@ var toValue = (styleValue, transformValue) => {
81
81
  }
82
82
  return value.value.filter((value2) => value2.hidden !== true).map((value2) => toValue(value2, transformValue)).join(" ");
83
83
  }
84
+ if (value.type === "shadow") {
85
+ let shadow = `${toValue(value.offsetX)} ${toValue(value.offsetY)}`;
86
+ if (value.blur) {
87
+ shadow += ` ${toValue(value.blur)}`;
88
+ }
89
+ if (value.spread) {
90
+ shadow += ` ${toValue(value.spread)}`;
91
+ }
92
+ if (value.color) {
93
+ shadow += ` ${toValue(value.color)}`;
94
+ }
95
+ if (value.position === "inset") {
96
+ shadow += ` inset`;
97
+ }
98
+ return shadow;
99
+ }
84
100
  if (value.type === "function") {
85
101
  if (value.hidden === true) {
86
102
  return "";
package/lib/types/core/merger.d.ts CHANGED
@@ -13,7 +13,7 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
13
13
  } | {
14
14
  value: number;
15
15
  type: "unit";
16
- 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";
16
+ unit: "number" | import("..").__Unit;
17
17
  hidden?: boolean | undefined;
18
18
  } | {
19
19
  value: string;
@@ -41,7 +41,7 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
41
41
  fallback?: {
42
42
  value: number;
43
43
  type: "unit";
44
- 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";
44
+ unit: "number" | import("..").__Unit;
45
45
  hidden?: boolean | undefined;
46
46
  } | {
47
47
  value: string;
@@ -74,7 +74,7 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
74
74
  } | {
75
75
  value: number;
76
76
  type: "unit";
77
- 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";
77
+ unit: "number" | import("..").__Unit;
78
78
  hidden?: boolean | undefined;
79
79
  } | {
80
80
  value: string;
@@ -102,7 +102,7 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
102
102
  fallback?: {
103
103
  value: number;
104
104
  type: "unit";
105
- 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";
105
+ unit: "number" | import("..").__Unit;
106
106
  hidden?: boolean | undefined;
107
107
  } | {
108
108
  value: string;
@@ -124,6 +124,171 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
124
124
  })[];
125
125
  type: "tuple";
126
126
  hidden?: boolean | undefined;
127
+ } | {
128
+ position: "inset" | "outset";
129
+ type: "shadow";
130
+ offsetX: {
131
+ value: number;
132
+ type: "unit";
133
+ unit: "number" | import("..").__Unit;
134
+ hidden?: boolean | undefined;
135
+ } | {
136
+ value: string;
137
+ type: "var";
138
+ fallback?: {
139
+ value: number;
140
+ type: "unit";
141
+ unit: "number" | import("..").__Unit;
142
+ hidden?: boolean | undefined;
143
+ } | {
144
+ value: string;
145
+ type: "keyword";
146
+ hidden?: boolean | undefined;
147
+ } | {
148
+ value: string;
149
+ type: "unparsed";
150
+ hidden?: boolean | undefined;
151
+ } | {
152
+ type: "rgb";
153
+ r: number;
154
+ g: number;
155
+ b: number;
156
+ alpha: number;
157
+ hidden?: boolean | undefined;
158
+ } | undefined;
159
+ hidden?: boolean | undefined;
160
+ };
161
+ offsetY: {
162
+ value: number;
163
+ type: "unit";
164
+ unit: "number" | import("..").__Unit;
165
+ hidden?: boolean | undefined;
166
+ } | {
167
+ value: string;
168
+ type: "var";
169
+ fallback?: {
170
+ value: number;
171
+ type: "unit";
172
+ unit: "number" | import("..").__Unit;
173
+ hidden?: boolean | undefined;
174
+ } | {
175
+ value: string;
176
+ type: "keyword";
177
+ hidden?: boolean | undefined;
178
+ } | {
179
+ value: string;
180
+ type: "unparsed";
181
+ hidden?: boolean | undefined;
182
+ } | {
183
+ type: "rgb";
184
+ r: number;
185
+ g: number;
186
+ b: number;
187
+ alpha: number;
188
+ hidden?: boolean | undefined;
189
+ } | undefined;
190
+ hidden?: boolean | undefined;
191
+ };
192
+ color?: {
193
+ value: string;
194
+ type: "keyword";
195
+ hidden?: boolean | undefined;
196
+ } | {
197
+ type: "rgb";
198
+ r: number;
199
+ g: number;
200
+ b: number;
201
+ alpha: number;
202
+ hidden?: boolean | undefined;
203
+ } | {
204
+ value: string;
205
+ type: "var";
206
+ fallback?: {
207
+ value: number;
208
+ type: "unit";
209
+ unit: "number" | import("..").__Unit;
210
+ hidden?: boolean | undefined;
211
+ } | {
212
+ value: string;
213
+ type: "keyword";
214
+ hidden?: boolean | undefined;
215
+ } | {
216
+ value: string;
217
+ type: "unparsed";
218
+ hidden?: boolean | undefined;
219
+ } | {
220
+ type: "rgb";
221
+ r: number;
222
+ g: number;
223
+ b: number;
224
+ alpha: number;
225
+ hidden?: boolean | undefined;
226
+ } | undefined;
227
+ hidden?: boolean | undefined;
228
+ } | undefined;
229
+ hidden?: boolean | undefined;
230
+ blur?: {
231
+ value: number;
232
+ type: "unit";
233
+ unit: "number" | import("..").__Unit;
234
+ hidden?: boolean | undefined;
235
+ } | {
236
+ value: string;
237
+ type: "var";
238
+ fallback?: {
239
+ value: number;
240
+ type: "unit";
241
+ unit: "number" | import("..").__Unit;
242
+ hidden?: boolean | undefined;
243
+ } | {
244
+ value: string;
245
+ type: "keyword";
246
+ hidden?: boolean | undefined;
247
+ } | {
248
+ value: string;
249
+ type: "unparsed";
250
+ hidden?: boolean | undefined;
251
+ } | {
252
+ type: "rgb";
253
+ r: number;
254
+ g: number;
255
+ b: number;
256
+ alpha: number;
257
+ hidden?: boolean | undefined;
258
+ } | undefined;
259
+ hidden?: boolean | undefined;
260
+ } | undefined;
261
+ spread?: {
262
+ value: number;
263
+ type: "unit";
264
+ unit: "number" | import("..").__Unit;
265
+ hidden?: boolean | undefined;
266
+ } | {
267
+ value: string;
268
+ type: "var";
269
+ fallback?: {
270
+ value: number;
271
+ type: "unit";
272
+ unit: "number" | import("..").__Unit;
273
+ hidden?: boolean | undefined;
274
+ } | {
275
+ value: string;
276
+ type: "keyword";
277
+ hidden?: boolean | undefined;
278
+ } | {
279
+ value: string;
280
+ type: "unparsed";
281
+ hidden?: boolean | undefined;
282
+ } | {
283
+ type: "rgb";
284
+ r: number;
285
+ g: number;
286
+ b: number;
287
+ alpha: number;
288
+ hidden?: boolean | undefined;
289
+ } | undefined;
290
+ hidden?: boolean | undefined;
291
+ } | undefined;
127
292
  } | {
128
293
  value: string;
129
294
  type: "invalid";
@@ -142,7 +307,7 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
142
307
  } | {
143
308
  value: number;
144
309
  type: "unit";
145
- 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";
310
+ unit: "number" | import("..").__Unit;
146
311
  hidden?: boolean | undefined;
147
312
  } | {
148
313
  value: string;
@@ -170,7 +335,7 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
170
335
  fallback?: {
171
336
  value: number;
172
337
  type: "unit";
173
- 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";
338
+ unit: "number" | import("..").__Unit;
174
339
  hidden?: boolean | undefined;
175
340
  } | {
176
341
  value: string;
@@ -203,7 +368,7 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
203
368
  } | {
204
369
  value: number;
205
370
  type: "unit";
206
- 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";
371
+ unit: "number" | import("..").__Unit;
207
372
  hidden?: boolean | undefined;
208
373
  } | {
209
374
  value: string;
@@ -231,7 +396,7 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
231
396
  fallback?: {
232
397
  value: number;
233
398
  type: "unit";
234
- 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";
399
+ unit: "number" | import("..").__Unit;
235
400
  hidden?: boolean | undefined;
236
401
  } | {
237
402
  value: string;
@@ -253,6 +418,171 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
253
418
  })[];
254
419
  type: "tuple";
255
420
  hidden?: boolean | undefined;
421
+ } | {
422
+ position: "inset" | "outset";
423
+ type: "shadow";
424
+ offsetX: {
425
+ value: number;
426
+ type: "unit";
427
+ unit: "number" | import("..").__Unit;
428
+ hidden?: boolean | undefined;
429
+ } | {
430
+ value: string;
431
+ type: "var";
432
+ fallback?: {
433
+ value: number;
434
+ type: "unit";
435
+ unit: "number" | import("..").__Unit;
436
+ hidden?: boolean | undefined;
437
+ } | {
438
+ value: string;
439
+ type: "keyword";
440
+ hidden?: boolean | undefined;
441
+ } | {
442
+ value: string;
443
+ type: "unparsed";
444
+ hidden?: boolean | undefined;
445
+ } | {
446
+ type: "rgb";
447
+ r: number;
448
+ g: number;
449
+ b: number;
450
+ alpha: number;
451
+ hidden?: boolean | undefined;
452
+ } | undefined;
453
+ hidden?: boolean | undefined;
454
+ };
455
+ offsetY: {
456
+ value: number;
457
+ type: "unit";
458
+ unit: "number" | import("..").__Unit;
459
+ hidden?: boolean | undefined;
460
+ } | {
461
+ value: string;
462
+ type: "var";
463
+ fallback?: {
464
+ value: number;
465
+ type: "unit";
466
+ unit: "number" | import("..").__Unit;
467
+ hidden?: boolean | undefined;
468
+ } | {
469
+ value: string;
470
+ type: "keyword";
471
+ hidden?: boolean | undefined;
472
+ } | {
473
+ value: string;
474
+ type: "unparsed";
475
+ hidden?: boolean | undefined;
476
+ } | {
477
+ type: "rgb";
478
+ r: number;
479
+ g: number;
480
+ b: number;
481
+ alpha: number;
482
+ hidden?: boolean | undefined;
483
+ } | undefined;
484
+ hidden?: boolean | undefined;
485
+ };
486
+ color?: {
487
+ value: string;
488
+ type: "keyword";
489
+ hidden?: boolean | undefined;
490
+ } | {
491
+ type: "rgb";
492
+ r: number;
493
+ g: number;
494
+ b: number;
495
+ alpha: number;
496
+ hidden?: boolean | undefined;
497
+ } | {
498
+ value: string;
499
+ type: "var";
500
+ fallback?: {
501
+ value: number;
502
+ type: "unit";
503
+ unit: "number" | import("..").__Unit;
504
+ hidden?: boolean | undefined;
505
+ } | {
506
+ value: string;
507
+ type: "keyword";
508
+ hidden?: boolean | undefined;
509
+ } | {
510
+ value: string;
511
+ type: "unparsed";
512
+ hidden?: boolean | undefined;
513
+ } | {
514
+ type: "rgb";
515
+ r: number;
516
+ g: number;
517
+ b: number;
518
+ alpha: number;
519
+ hidden?: boolean | undefined;
520
+ } | undefined;
521
+ hidden?: boolean | undefined;
522
+ } | undefined;
523
+ hidden?: boolean | undefined;
524
+ blur?: {
525
+ value: number;
526
+ type: "unit";
527
+ unit: "number" | import("..").__Unit;
528
+ hidden?: boolean | undefined;
529
+ } | {
530
+ value: string;
531
+ type: "var";
532
+ fallback?: {
533
+ value: number;
534
+ type: "unit";
535
+ unit: "number" | import("..").__Unit;
536
+ hidden?: boolean | undefined;
537
+ } | {
538
+ value: string;
539
+ type: "keyword";
540
+ hidden?: boolean | undefined;
541
+ } | {
542
+ value: string;
543
+ type: "unparsed";
544
+ hidden?: boolean | undefined;
545
+ } | {
546
+ type: "rgb";
547
+ r: number;
548
+ g: number;
549
+ b: number;
550
+ alpha: number;
551
+ hidden?: boolean | undefined;
552
+ } | undefined;
553
+ hidden?: boolean | undefined;
554
+ } | undefined;
555
+ spread?: {
556
+ value: number;
557
+ type: "unit";
558
+ unit: "number" | import("..").__Unit;
559
+ hidden?: boolean | undefined;
560
+ } | {
561
+ value: string;
562
+ type: "var";
563
+ fallback?: {
564
+ value: number;
565
+ type: "unit";
566
+ unit: "number" | import("..").__Unit;
567
+ hidden?: boolean | undefined;
568
+ } | {
569
+ value: string;
570
+ type: "keyword";
571
+ hidden?: boolean | undefined;
572
+ } | {
573
+ value: string;
574
+ type: "unparsed";
575
+ hidden?: boolean | undefined;
576
+ } | {
577
+ type: "rgb";
578
+ r: number;
579
+ g: number;
580
+ b: number;
581
+ alpha: number;
582
+ hidden?: boolean | undefined;
583
+ } | undefined;
584
+ hidden?: boolean | undefined;
585
+ } | undefined;
256
586
  } | {
257
587
  value: string;
258
588
  type: "invalid";