@webstudio-is/css-engine 0.182.0 → 0.189.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 (6) hide show
  1. package/lib/index.js +42 -24
  2. package/lib/types/core/atomic.d.ts +2 -1
  3. package/lib/types/core/merger.d.ts +31 -99
  4. package/lib/types/core/rules.d.ts +1 -1
  5. package/lib/types/schema.d.ts +1132 -2482
  6. package/package.json +7 -7
package/lib/index.js CHANGED
@@ -84,13 +84,33 @@ var UnsetValue = z.object({
84
84
  value: z.literal(""),
85
85
  hidden: z.boolean().optional()
86
86
  });
87
+ var VarFallback = z.union([
88
+ UnparsedValue,
89
+ KeywordValue,
90
+ UnitValue,
91
+ RgbValue
92
+ ]);
93
+ var toVarFallback = (styleValue, transformValue) => {
94
+ if (styleValue.type === "unparsed" || styleValue.type === "keyword" || styleValue.type === "unit" || styleValue.type === "rgb") {
95
+ return styleValue;
96
+ }
97
+ styleValue;
98
+ return { type: "unparsed", value: toValue(styleValue, transformValue) };
99
+ };
100
+ var VarValue = z.object({
101
+ type: z.literal("var"),
102
+ value: z.string(),
103
+ fallback: VarFallback.optional(),
104
+ hidden: z.boolean().optional()
105
+ });
87
106
  var TupleValueItem = z.union([
88
107
  UnitValue,
89
108
  KeywordValue,
90
109
  UnparsedValue,
91
110
  ImageValue,
92
111
  RgbValue,
93
- FunctionValue
112
+ FunctionValue,
113
+ VarValue
94
114
  ]);
95
115
  var TupleValue = z.object({
96
116
  type: z.literal("tuple"),
@@ -105,14 +125,15 @@ var LayerValueItem = z.union([
105
125
  TupleValue,
106
126
  RgbValue,
107
127
  InvalidValue,
108
- FunctionValue
128
+ FunctionValue,
129
+ VarValue
109
130
  ]);
110
131
  var LayersValue = z.object({
111
132
  type: z.literal("layers"),
112
133
  value: z.array(LayerValueItem),
113
134
  hidden: z.boolean().optional()
114
135
  });
115
- var ValidStaticStyleValue = z.union([
136
+ var StyleValue = z.union([
116
137
  ImageValue,
117
138
  LayersValue,
118
139
  UnitValue,
@@ -122,20 +143,7 @@ var ValidStaticStyleValue = z.union([
122
143
  UnparsedValue,
123
144
  TupleValue,
124
145
  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,
146
+ GuaranteedInvalidValue,
139
147
  InvalidValue,
140
148
  UnsetValue,
141
149
  VarValue
@@ -189,11 +197,13 @@ var toValue = (styleValue, transformValue) => {
189
197
  return families.join(", ");
190
198
  }
191
199
  if (value.type === "var") {
192
- const fallbacks = [];
193
- for (const fallback of value.fallbacks) {
194
- fallbacks.push(toValue(fallback, transformValue));
200
+ if (value.hidden) {
201
+ return "";
202
+ }
203
+ let fallbacksString = "";
204
+ if (value.fallback) {
205
+ fallbacksString = `, ${toValue(value.fallback, transformValue)}`;
195
206
  }
196
- const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
197
207
  return `var(--${value.value}${fallbacksString})`;
198
208
  }
199
209
  if (value.type === "keyword") {
@@ -254,7 +264,7 @@ var isLonghandValue = (value) => {
254
264
  return false;
255
265
  }
256
266
  if (value.type === "var") {
257
- const fallback = value.fallbacks.at(0);
267
+ const fallback = value.fallback;
258
268
  if (fallback?.type === "keyword" && cssWideKeywords.has(fallback.value)) {
259
269
  return false;
260
270
  }
@@ -314,6 +324,9 @@ var mergeWhiteSpaceAndTextWrap = (styleMap) => {
314
324
  if (collapse === "break-spaces") {
315
325
  styleMap.set("white-space", { type: "keyword", value: "break-spaces" });
316
326
  }
327
+ if (style === "auto") {
328
+ styleMap.set("text-wrap", modeValue ?? { type: "keyword", value: "wrap" });
329
+ }
317
330
  if (style === "balance" || style === "stable" || style === "pretty") {
318
331
  styleMap.set("text-wrap", { type: "keyword", value: style });
319
332
  }
@@ -876,6 +889,10 @@ var generateAtomic = (sheet, options) => {
876
889
  for (const rule of sheet.nestingRules.values()) {
877
890
  const descendantSuffix = rule.getDescendantSuffix();
878
891
  const groupKey = getKey(rule);
892
+ if (groupKey === void 0) {
893
+ atomicRules.set(rule.getSelector(), rule);
894
+ continue;
895
+ }
879
896
  let classList = classes.get(groupKey);
880
897
  if (classList === void 0) {
881
898
  classList = [];
@@ -917,6 +934,7 @@ export {
917
934
  TupleValueItem,
918
935
  UnitValue,
919
936
  UnparsedValue,
937
+ VarFallback,
920
938
  compareMedia,
921
939
  createRegularStyleSheet,
922
940
  cssWideKeywords,
@@ -925,9 +943,9 @@ export {
925
943
  generateAtomic,
926
944
  generateStyleMap,
927
945
  hyphenateProperty,
928
- isValidStaticStyleValue,
929
946
  matchMedia,
930
947
  mergeStyles,
931
948
  prefixStyles,
932
- toValue
949
+ toValue,
950
+ toVarFallback
933
951
  };
package/lib/types/core/atomic.d.ts CHANGED
@@ -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
- getKey: (rule: NestingRule) => string;
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
  };
package/lib/types/core/merger.d.ts CHANGED
@@ -40,8 +40,9 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
40
40
  };
41
41
  hidden?: boolean | undefined;
42
42
  } | {
43
- type: "tuple";
44
- value: ({
43
+ type: "var";
44
+ value: string;
45
+ fallback?: {
45
46
  type: "unit";
46
47
  value: number;
47
48
  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";
@@ -61,29 +62,10 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
61
62
  b: number;
62
63
  alpha: number;
63
64
  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
- })[];
80
- hidden?: boolean | undefined;
81
- } | {
82
- type: "invalid";
83
- value: string;
65
+ } | undefined;
84
66
  hidden?: boolean | undefined;
85
67
  } | {
86
- type: "layers";
68
+ type: "tuple";
87
69
  value: ({
88
70
  type: "unit";
89
71
  value: number;
@@ -120,8 +102,9 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
120
102
  };
121
103
  hidden?: boolean | undefined;
122
104
  } | {
123
- type: "tuple";
124
- value: ({
105
+ type: "var";
106
+ value: string;
107
+ fallback?: {
125
108
  type: "unit";
126
109
  value: number;
127
110
  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";
@@ -141,40 +124,17 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
141
124
  b: number;
142
125
  alpha: number;
143
126
  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;
127
+ } | undefined;
164
128
  hidden?: boolean | undefined;
165
129
  })[];
166
130
  hidden?: boolean | undefined;
167
131
  } | {
168
- type: "guaranteedInvalid";
169
- hidden?: boolean | undefined;
170
- } | {
171
- type: "unset";
172
- value: "";
132
+ type: "invalid";
133
+ value: string;
173
134
  hidden?: boolean | undefined;
174
135
  } | {
175
- type: "var";
176
- value: string;
177
- fallbacks: ({
136
+ type: "layers";
137
+ value: ({
178
138
  type: "unit";
179
139
  value: number;
180
140
  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 +147,6 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
187
147
  type: "unparsed";
188
148
  value: string;
189
149
  hidden?: boolean | undefined;
190
- } | {
191
- type: "fontFamily";
192
- value: string[];
193
- hidden?: boolean | undefined;
194
150
  } | {
195
151
  type: "rgb";
196
152
  r: number;
@@ -214,8 +170,9 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
214
170
  };
215
171
  hidden?: boolean | undefined;
216
172
  } | {
217
- type: "tuple";
218
- value: ({
173
+ type: "var";
174
+ value: string;
175
+ fallback?: {
219
176
  type: "unit";
220
177
  value: number;
221
178
  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";
@@ -235,25 +192,10 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
235
192
  b: number;
236
193
  alpha: number;
237
194
  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
- })[];
195
+ } | undefined;
254
196
  hidden?: boolean | undefined;
255
197
  } | {
256
- type: "layers";
198
+ type: "tuple";
257
199
  value: ({
258
200
  type: "unit";
259
201
  value: number;
@@ -290,8 +232,9 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
290
232
  };
291
233
  hidden?: boolean | undefined;
292
234
  } | {
293
- type: "tuple";
294
- value: ({
235
+ type: "var";
236
+ value: string;
237
+ fallback?: {
295
238
  type: "unit";
296
239
  value: number;
297
240
  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";
@@ -311,32 +254,21 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
311
254
  b: number;
312
255
  alpha: number;
313
256
  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;
257
+ } | undefined;
334
258
  hidden?: boolean | undefined;
335
259
  })[];
336
260
  hidden?: boolean | undefined;
337
261
  } | {
338
- type: "guaranteedInvalid";
262
+ type: "invalid";
263
+ value: string;
339
264
  hidden?: boolean | undefined;
340
265
  })[];
341
266
  hidden?: boolean | undefined;
267
+ } | {
268
+ type: "guaranteedInvalid";
269
+ hidden?: boolean | undefined;
270
+ } | {
271
+ type: "unset";
272
+ value: "";
273
+ hidden?: boolean | undefined;
342
274
  }>;
package/lib/types/core/rules.d.ts CHANGED
@@ -33,7 +33,7 @@ export declare class MixinRule {
33
33
  clearBreakpoints(): void;
34
34
  setDeclaration(declaration: Declaration): void;
35
35
  deleteDeclaration(declaration: DeclarationKey): void;
36
- getDeclarations(): IterableIterator<Declaration>;
36
+ getDeclarations(): MapIterator<Declaration>;
37
37
  }
38
38
  /**
39
39
  * Universal style rule with nested selectors and media queries support