@webstudio-is/css-engine 0.189.0 → 0.191.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 CHANGED
@@ -21,6 +21,104 @@ var prefixStyles = (styleMap) => {
21
21
 
22
22
  // src/schema.ts
23
23
  import { z } from "zod";
24
+
25
+ // src/core/to-value.ts
26
+ import { captureError } from "@webstudio-is/error-utils";
27
+ import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
28
+ var fallbackTransform = (styleValue) => {
29
+ if (styleValue.type !== "fontFamily") {
30
+ return;
31
+ }
32
+ let { value } = styleValue;
33
+ if (value.length === 0) {
34
+ value = [DEFAULT_FONT_FALLBACK];
35
+ }
36
+ if (value.length === 1) {
37
+ const stack = SYSTEM_FONTS.get(value[0])?.stack;
38
+ value = stack ?? [value[0], DEFAULT_FONT_FALLBACK];
39
+ }
40
+ return {
41
+ type: "fontFamily",
42
+ value: Array.from(new Set(value))
43
+ };
44
+ };
45
+ var sanitizeCssUrl = (str) => JSON.stringify(str);
46
+ var toValue = (styleValue, transformValue) => {
47
+ if (styleValue === void 0) {
48
+ return "";
49
+ }
50
+ const transformedValue = transformValue?.(styleValue) ?? fallbackTransform(styleValue);
51
+ const value = transformedValue ?? styleValue;
52
+ if (value.type === "unit") {
53
+ return value.value + (value.unit === "number" ? "" : value.unit);
54
+ }
55
+ if (value.type === "fontFamily") {
56
+ const families = [];
57
+ for (const family of value.value) {
58
+ families.push(family.includes(" ") ? `"${family}"` : family);
59
+ }
60
+ return families.join(", ");
61
+ }
62
+ if (value.type === "var") {
63
+ if (value.hidden) {
64
+ return "";
65
+ }
66
+ let fallbacksString = "";
67
+ if (value.fallback) {
68
+ fallbacksString = `, ${toValue(value.fallback, transformValue)}`;
69
+ }
70
+ return `var(--${value.value}${fallbacksString})`;
71
+ }
72
+ if (value.type === "keyword") {
73
+ if (value.hidden === true) {
74
+ return "";
75
+ }
76
+ return value.value;
77
+ }
78
+ if (value.type === "invalid") {
79
+ return value.value;
80
+ }
81
+ if (value.type === "unset") {
82
+ return value.value;
83
+ }
84
+ if (value.type === "rgb") {
85
+ return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
86
+ }
87
+ if (value.type === "image") {
88
+ if (value.hidden || value.value.type !== "url") {
89
+ return "none";
90
+ }
91
+ return `url(${sanitizeCssUrl(value.value.url)})`;
92
+ }
93
+ if (value.type === "unparsed") {
94
+ if (value.hidden === true) {
95
+ return "none";
96
+ }
97
+ return value.value;
98
+ }
99
+ if (value.type === "layers") {
100
+ const valueString = value.value.filter((layer) => layer.hidden !== true).map((layer) => toValue(layer, transformValue)).join(", ");
101
+ return valueString === "" ? "none" : valueString;
102
+ }
103
+ if (value.type === "tuple") {
104
+ if (value.hidden === true) {
105
+ return "none";
106
+ }
107
+ return value.value.filter((value2) => value2.hidden !== true).map((value2) => toValue(value2, transformValue)).join(" ");
108
+ }
109
+ if (value.type === "function") {
110
+ if (value.hidden === true) {
111
+ return "";
112
+ }
113
+ return `${value.name}(${toValue(value.args, transformValue)})`;
114
+ }
115
+ if (value.type === "guaranteedInvalid") {
116
+ return "";
117
+ }
118
+ return captureError(new Error("Unknown value type"), value);
119
+ };
120
+
121
+ // src/schema.ts
24
122
  var Unit = z.string();
25
123
  var UnitValue = z.object({
26
124
  type: z.literal("unit"),
@@ -159,102 +257,6 @@ var cssWideKeywords = /* @__PURE__ */ new Set([
159
257
  "revert-layer"
160
258
  ]);
161
259
 
162
- // src/core/to-value.ts
163
- import { captureError } from "@webstudio-is/error-utils";
164
- import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
165
- var fallbackTransform = (styleValue) => {
166
- if (styleValue.type !== "fontFamily") {
167
- return;
168
- }
169
- let { value } = styleValue;
170
- if (value.length === 0) {
171
- value = [DEFAULT_FONT_FALLBACK];
172
- }
173
- if (value.length === 1) {
174
- const stack = SYSTEM_FONTS.get(value[0])?.stack;
175
- value = stack ?? [value[0], DEFAULT_FONT_FALLBACK];
176
- }
177
- return {
178
- type: "fontFamily",
179
- value: Array.from(new Set(value))
180
- };
181
- };
182
- var sanitizeCssUrl = (str) => JSON.stringify(str);
183
- var toValue = (styleValue, transformValue) => {
184
- if (styleValue === void 0) {
185
- return "";
186
- }
187
- const transformedValue = transformValue?.(styleValue) ?? fallbackTransform(styleValue);
188
- const value = transformedValue ?? styleValue;
189
- if (value.type === "unit") {
190
- return value.value + (value.unit === "number" ? "" : value.unit);
191
- }
192
- if (value.type === "fontFamily") {
193
- const families = [];
194
- for (const family of value.value) {
195
- families.push(family.includes(" ") ? `"${family}"` : family);
196
- }
197
- return families.join(", ");
198
- }
199
- if (value.type === "var") {
200
- if (value.hidden) {
201
- return "";
202
- }
203
- let fallbacksString = "";
204
- if (value.fallback) {
205
- fallbacksString = `, ${toValue(value.fallback, transformValue)}`;
206
- }
207
- return `var(--${value.value}${fallbacksString})`;
208
- }
209
- if (value.type === "keyword") {
210
- if (value.hidden === true) {
211
- return "";
212
- }
213
- return value.value;
214
- }
215
- if (value.type === "invalid") {
216
- return value.value;
217
- }
218
- if (value.type === "unset") {
219
- return value.value;
220
- }
221
- if (value.type === "rgb") {
222
- return `rgba(${value.r}, ${value.g}, ${value.b}, ${value.alpha})`;
223
- }
224
- if (value.type === "image") {
225
- if (value.hidden || value.value.type !== "url") {
226
- return "none";
227
- }
228
- return `url(${sanitizeCssUrl(value.value.url)})`;
229
- }
230
- if (value.type === "unparsed") {
231
- if (value.hidden === true) {
232
- return "none";
233
- }
234
- return value.value;
235
- }
236
- if (value.type === "layers") {
237
- const valueString = value.value.filter((layer) => layer.hidden !== true).map((layer) => toValue(layer, transformValue)).join(", ");
238
- return valueString === "" ? "none" : valueString;
239
- }
240
- if (value.type === "tuple") {
241
- if (value.hidden === true) {
242
- return "none";
243
- }
244
- return value.value.filter((value2) => value2.hidden !== true).map((value2) => toValue(value2, transformValue)).join(" ");
245
- }
246
- if (value.type === "function") {
247
- if (value.hidden === true) {
248
- return "";
249
- }
250
- return `${value.name}(${toValue(value.args, transformValue)})`;
251
- }
252
- if (value.type === "guaranteedInvalid") {
253
- return "";
254
- }
255
- return captureError(new Error("Unknown value type"), value);
256
- };
257
-
258
260
  // src/core/merger.ts
259
261
  var isLonghandValue = (value) => {
260
262
  if (value === void 0) {
@@ -1,21 +1,27 @@
1
1
  import { StyleValue } from "../schema";
2
2
  import type { StyleMap } from "./rules";
3
3
  export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
4
- type: "unit";
4
+ value: {
5
+ value: string;
6
+ type: "asset";
7
+ } | {
8
+ type: "url";
9
+ url: string;
10
+ };
11
+ type: "image";
12
+ hidden?: boolean | undefined;
13
+ } | {
5
14
  value: number;
15
+ type: "unit";
6
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";
7
17
  hidden?: boolean | undefined;
8
18
  } | {
9
- type: "keyword";
10
19
  value: string;
20
+ type: "keyword";
11
21
  hidden?: boolean | undefined;
12
22
  } | {
13
- type: "unparsed";
14
23
  value: string;
15
- hidden?: boolean | undefined;
16
- } | {
17
- type: "fontFamily";
18
- value: string[];
24
+ type: "unparsed";
19
25
  hidden?: boolean | undefined;
20
26
  } | {
21
27
  type: "rgb";
@@ -30,30 +36,20 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
30
36
  args: StyleValue;
31
37
  hidden?: boolean;
32
38
  } | {
33
- type: "image";
34
- value: {
35
- type: "asset";
36
- value: string;
37
- } | {
38
- type: "url";
39
- url: string;
40
- };
41
- hidden?: boolean | undefined;
42
- } | {
43
- type: "var";
44
39
  value: string;
40
+ type: "var";
45
41
  fallback?: {
46
- type: "unit";
47
42
  value: number;
43
+ type: "unit";
48
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";
49
45
  hidden?: boolean | undefined;
50
46
  } | {
51
- type: "keyword";
52
47
  value: string;
48
+ type: "keyword";
53
49
  hidden?: boolean | undefined;
54
50
  } | {
55
- type: "unparsed";
56
51
  value: string;
52
+ type: "unparsed";
57
53
  hidden?: boolean | undefined;
58
54
  } | {
59
55
  type: "rgb";
@@ -65,19 +61,28 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
65
61
  } | undefined;
66
62
  hidden?: boolean | undefined;
67
63
  } | {
68
- type: "tuple";
69
64
  value: ({
70
- type: "unit";
65
+ value: {
66
+ value: string;
67
+ type: "asset";
68
+ } | {
69
+ type: "url";
70
+ url: string;
71
+ };
72
+ type: "image";
73
+ hidden?: boolean | undefined;
74
+ } | {
71
75
  value: number;
76
+ type: "unit";
72
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";
73
78
  hidden?: boolean | undefined;
74
79
  } | {
75
- type: "keyword";
76
80
  value: string;
81
+ type: "keyword";
77
82
  hidden?: boolean | undefined;
78
83
  } | {
79
- type: "unparsed";
80
84
  value: string;
85
+ type: "unparsed";
81
86
  hidden?: boolean | undefined;
82
87
  } | {
83
88
  type: "rgb";
@@ -92,30 +97,20 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
92
97
  args: StyleValue;
93
98
  hidden?: boolean;
94
99
  } | {
95
- type: "image";
96
- value: {
97
- type: "asset";
98
- value: string;
99
- } | {
100
- type: "url";
101
- url: string;
102
- };
103
- hidden?: boolean | undefined;
104
- } | {
105
- type: "var";
106
100
  value: string;
101
+ type: "var";
107
102
  fallback?: {
108
- type: "unit";
109
103
  value: number;
104
+ type: "unit";
110
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";
111
106
  hidden?: boolean | undefined;
112
107
  } | {
113
- type: "keyword";
114
108
  value: string;
109
+ type: "keyword";
115
110
  hidden?: boolean | undefined;
116
111
  } | {
117
- type: "unparsed";
118
112
  value: string;
113
+ type: "unparsed";
119
114
  hidden?: boolean | undefined;
120
115
  } | {
121
116
  type: "rgb";
@@ -127,25 +122,35 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
127
122
  } | undefined;
128
123
  hidden?: boolean | undefined;
129
124
  })[];
125
+ type: "tuple";
130
126
  hidden?: boolean | undefined;
131
127
  } | {
132
- type: "invalid";
133
128
  value: string;
129
+ type: "invalid";
134
130
  hidden?: boolean | undefined;
135
131
  } | {
136
- type: "layers";
137
132
  value: ({
138
- type: "unit";
133
+ value: {
134
+ value: string;
135
+ type: "asset";
136
+ } | {
137
+ type: "url";
138
+ url: string;
139
+ };
140
+ type: "image";
141
+ hidden?: boolean | undefined;
142
+ } | {
139
143
  value: number;
144
+ type: "unit";
140
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";
141
146
  hidden?: boolean | undefined;
142
147
  } | {
143
- type: "keyword";
144
148
  value: string;
149
+ type: "keyword";
145
150
  hidden?: boolean | undefined;
146
151
  } | {
147
- type: "unparsed";
148
152
  value: string;
153
+ type: "unparsed";
149
154
  hidden?: boolean | undefined;
150
155
  } | {
151
156
  type: "rgb";
@@ -160,30 +165,20 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
160
165
  args: StyleValue;
161
166
  hidden?: boolean;
162
167
  } | {
163
- type: "image";
164
- value: {
165
- type: "asset";
166
- value: string;
167
- } | {
168
- type: "url";
169
- url: string;
170
- };
171
- hidden?: boolean | undefined;
172
- } | {
173
- type: "var";
174
168
  value: string;
169
+ type: "var";
175
170
  fallback?: {
176
- type: "unit";
177
171
  value: number;
172
+ type: "unit";
178
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";
179
174
  hidden?: boolean | undefined;
180
175
  } | {
181
- type: "keyword";
182
176
  value: string;
177
+ type: "keyword";
183
178
  hidden?: boolean | undefined;
184
179
  } | {
185
- type: "unparsed";
186
180
  value: string;
181
+ type: "unparsed";
187
182
  hidden?: boolean | undefined;
188
183
  } | {
189
184
  type: "rgb";
@@ -195,19 +190,28 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
195
190
  } | undefined;
196
191
  hidden?: boolean | undefined;
197
192
  } | {
198
- type: "tuple";
199
193
  value: ({
200
- type: "unit";
194
+ value: {
195
+ value: string;
196
+ type: "asset";
197
+ } | {
198
+ type: "url";
199
+ url: string;
200
+ };
201
+ type: "image";
202
+ hidden?: boolean | undefined;
203
+ } | {
201
204
  value: number;
205
+ type: "unit";
202
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";
203
207
  hidden?: boolean | undefined;
204
208
  } | {
205
- type: "keyword";
206
209
  value: string;
210
+ type: "keyword";
207
211
  hidden?: boolean | undefined;
208
212
  } | {
209
- type: "unparsed";
210
213
  value: string;
214
+ type: "unparsed";
211
215
  hidden?: boolean | undefined;
212
216
  } | {
213
217
  type: "rgb";
@@ -222,30 +226,20 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
222
226
  args: StyleValue;
223
227
  hidden?: boolean;
224
228
  } | {
225
- type: "image";
226
- value: {
227
- type: "asset";
228
- value: string;
229
- } | {
230
- type: "url";
231
- url: string;
232
- };
233
- hidden?: boolean | undefined;
234
- } | {
235
- type: "var";
236
229
  value: string;
230
+ type: "var";
237
231
  fallback?: {
238
- type: "unit";
239
232
  value: number;
233
+ type: "unit";
240
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";
241
235
  hidden?: boolean | undefined;
242
236
  } | {
243
- type: "keyword";
244
237
  value: string;
238
+ type: "keyword";
245
239
  hidden?: boolean | undefined;
246
240
  } | {
247
- type: "unparsed";
248
241
  value: string;
242
+ type: "unparsed";
249
243
  hidden?: boolean | undefined;
250
244
  } | {
251
245
  type: "rgb";
@@ -257,18 +251,24 @@ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
257
251
  } | undefined;
258
252
  hidden?: boolean | undefined;
259
253
  })[];
254
+ type: "tuple";
260
255
  hidden?: boolean | undefined;
261
256
  } | {
262
- type: "invalid";
263
257
  value: string;
258
+ type: "invalid";
264
259
  hidden?: boolean | undefined;
265
260
  })[];
261
+ type: "layers";
262
+ hidden?: boolean | undefined;
263
+ } | {
264
+ value: string[];
265
+ type: "fontFamily";
266
266
  hidden?: boolean | undefined;
267
267
  } | {
268
268
  type: "guaranteedInvalid";
269
269
  hidden?: boolean | undefined;
270
270
  } | {
271
- type: "unset";
272
271
  value: "";
272
+ type: "unset";
273
273
  hidden?: boolean | undefined;
274
274
  }>;