@webstudio-is/css-engine 0.181.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.
Files changed (5) hide show
  1. package/lib/index.js +39 -33
  2. package/lib/types/core/atomic.d.ts +2 -1
  3. package/lib/types/core/merger.d.ts +31 -147
  4. package/lib/types/schema.d.ts +859 -3123
  5. package/package.json +6 -6
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 ValidStaticStyleValue = z.union([
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
@@ -155,17 +151,21 @@ var cssWideKeywords = /* @__PURE__ */ new Set([
155
151
  import { captureError } from "@webstudio-is/error-utils";
156
152
  import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
157
153
  var fallbackTransform = (styleValue) => {
158
- if (styleValue.type === "fontFamily") {
159
- const fonts = SYSTEM_FONTS.get(styleValue.value[0])?.stack ?? [
160
- styleValue.value[0],
161
- DEFAULT_FONT_FALLBACK
162
- ];
163
- const value = Array.from(new Set(fonts));
164
- return {
165
- type: "fontFamily",
166
- value
167
- };
154
+ if (styleValue.type !== "fontFamily") {
155
+ return;
156
+ }
157
+ let { value } = styleValue;
158
+ if (value.length === 0) {
159
+ value = [DEFAULT_FONT_FALLBACK];
160
+ }
161
+ if (value.length === 1) {
162
+ const stack = SYSTEM_FONTS.get(value[0])?.stack;
163
+ value = stack ?? [value[0], DEFAULT_FONT_FALLBACK];
168
164
  }
165
+ return {
166
+ type: "fontFamily",
167
+ value: Array.from(new Set(value))
168
+ };
169
169
  };
170
170
  var sanitizeCssUrl = (str) => JSON.stringify(str);
171
171
  var toValue = (styleValue, transformValue) => {
@@ -185,11 +185,13 @@ var toValue = (styleValue, transformValue) => {
185
185
  return families.join(", ");
186
186
  }
187
187
  if (value.type === "var") {
188
- const fallbacks = [];
189
- for (const fallback of value.fallbacks) {
190
- fallbacks.push(toValue(fallback, transformValue));
188
+ if (value.hidden) {
189
+ return "";
190
+ }
191
+ let fallbacksString = "";
192
+ if (value.fallback) {
193
+ fallbacksString = `, ${toValue(value.fallback, transformValue)}`;
191
194
  }
192
- const fallbacksString = fallbacks.length > 0 ? `, ${fallbacks.join(", ")}` : "";
193
195
  return `var(--${value.value}${fallbacksString})`;
194
196
  }
195
197
  if (value.type === "keyword") {
@@ -250,7 +252,7 @@ var isLonghandValue = (value) => {
250
252
  return false;
251
253
  }
252
254
  if (value.type === "var") {
253
- const fallback = value.fallbacks.at(0);
255
+ const fallback = value.fallback;
254
256
  if (fallback?.type === "keyword" && cssWideKeywords.has(fallback.value)) {
255
257
  return false;
256
258
  }
@@ -872,6 +874,10 @@ var generateAtomic = (sheet, options) => {
872
874
  for (const rule of sheet.nestingRules.values()) {
873
875
  const descendantSuffix = rule.getDescendantSuffix();
874
876
  const groupKey = getKey(rule);
877
+ if (groupKey === void 0) {
878
+ atomicRules.set(rule.getSelector(), rule);
879
+ continue;
880
+ }
875
881
  let classList = classes.get(groupKey);
876
882
  if (classList === void 0) {
877
883
  classList = [];
@@ -913,6 +919,7 @@ export {
913
919
  TupleValueItem,
914
920
  UnitValue,
915
921
  UnparsedValue,
922
+ VarFallback,
916
923
  compareMedia,
917
924
  createRegularStyleSheet,
918
925
  cssWideKeywords,
@@ -921,7 +928,6 @@ export {
921
928
  generateAtomic,
922
929
  generateStyleMap,
923
930
  hyphenateProperty,
924
- isValidStaticStyleValue,
925
931
  matchMedia,
926
932
  mergeStyles,
927
933
  prefixStyles,
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,13 +40,9 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
40
40
  };
41
41
  hidden?: boolean | undefined;
42
42
  } | {
43
- type: "tuple";
44
- value: ({
45
- type: "unit";
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: "invalid";
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: "tuple";
124
- value: ({
125
- type: "unit";
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: "guaranteedInvalid";
169
- hidden?: boolean | undefined;
170
- } | {
171
- type: "unset";
172
- value: "";
108
+ type: "invalid";
109
+ value: string;
173
110
  hidden?: boolean | undefined;
174
111
  } | {
175
- type: "var";
176
- value: string;
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: "tuple";
218
- value: ({
219
- type: "unit";
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: "layers";
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: "tuple";
294
- value: ({
295
- type: "unit";
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: "guaranteedInvalid";
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
  }>;