Skip to content

Commit bbf37d3

Browse files
authored
refactor: simplify var value fallbacks (#4201)
Ref #3399 Initially css variable fallback was defined in schema as array though it's actually a single value by spec and may contain commas. We don't have css variables in data yet so should be safe to change schema before too late.
1 parent f4bd1d1 commit bbf37d3

File tree

14 files changed

+43
-55
lines changed

14 files changed

+43
-55
lines changed

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ const AdvancedPropertyValue = ({
256256
styleValue.value.startsWith("--")
257257
) {
258258
setProperty(property)(
259-
{ type: "var", value: styleValue.value.slice(2), fallbacks: [] },
259+
{ type: "var", value: styleValue.value.slice(2) },
260260
{ ...options, listed: true }
261261
);
262262
} else {

apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts.test.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,5 @@ test("parse css vars", () => {
542542
expect(result).toEqual({
543543
type: "var",
544544
value: "color",
545-
fallbacks: [],
546545
});
547546
});

apps/builder/app/canvas/shared/styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ const toVarValue = (styleDecl: StyleDecl): undefined | VarValue => {
159159
// escape complex selectors in state like ":hover"
160160
// setProperty and removeProperty escape automatically
161161
value: CSS.escape(getEphemeralProperty(styleDecl).slice(2)),
162-
fallbacks: [value],
162+
fallback: { type: "unparsed", value: toValue(value) },
163163
};
164164
}
165165
};

apps/builder/app/shared/instance-utils.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -752,8 +752,8 @@ const traverseStyleValue = (
752752
return;
753753
}
754754
if (value.type === "var") {
755-
for (const item of value.fallbacks) {
756-
traverseStyleValue(item, callback);
755+
if (value.fallback) {
756+
traverseStyleValue(value.fallback, callback);
757757
}
758758
return;
759759
}

apps/builder/app/shared/style-object-model.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import type { HtmlTags } from "html-tags";
22
import { html, properties } from "@webstudio-is/css-data";
3-
import type { StyleValue, StyleProperty } from "@webstudio-is/css-engine";
3+
import type {
4+
StyleValue,
5+
StyleProperty,
6+
VarFallback,
7+
} from "@webstudio-is/css-engine";
48
import {
59
type Instance,
610
type StyleDecl,
@@ -350,7 +354,7 @@ export const getComputedStyleDecl = ({
350354
}
351355
usedCustomProperties.add(customProperty);
352356

353-
const fallback = computedValue.fallbacks.at(0);
357+
const fallback: undefined | VarFallback = computedValue.fallback;
354358
const customPropertyValue = getComputedStyleDecl({
355359
model,
356360
// resolve custom properties on instance they are defined

packages/css-data/src/parse-css-value.test.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -541,12 +541,11 @@ test("support custom properties var reference", () => {
541541
expect(parseCssValue("color", "var(--color)")).toEqual({
542542
type: "var",
543543
value: "color",
544-
fallbacks: [],
545544
});
546545
expect(parseCssValue("color", "var(--color, red)")).toEqual({
547546
type: "var",
548547
value: "color",
549-
fallbacks: [{ type: "unparsed", value: "red" }],
548+
fallback: { type: "unparsed", value: "red" },
550549
});
551550
});
552551

@@ -569,12 +568,11 @@ test("support custom properties var reference in custom property", () => {
569568
expect(parseCssValue("--bg", "var(--color)")).toEqual({
570569
type: "var",
571570
value: "color",
572-
fallbacks: [],
573571
});
574572
expect(parseCssValue("--bg", "var(--color, red)")).toEqual({
575573
type: "var",
576574
value: "color",
577-
fallbacks: [{ type: "unparsed", value: "red" }],
575+
fallback: { type: "unparsed", value: "red" },
578576
});
579577
});
580578

packages/css-data/src/parse-css-value.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -243,14 +243,14 @@ const parseLiteral = (
243243
children: new List<CssNode>().fromArray(fallback),
244244
}).trim();
245245
if (name.type === "Identifier") {
246-
return {
246+
const value: VarValue = {
247247
type: "var",
248248
value: name.name.slice("--".length),
249-
fallbacks:
250-
fallback.length === 0
251-
? []
252-
: [{ type: "unparsed", value: fallbackString }],
253249
};
250+
if (fallback.length > 0) {
251+
value.fallback = { type: "unparsed", value: fallbackString };
252+
}
253+
return value;
254254
}
255255
}
256256

packages/css-data/src/parse-css.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -421,15 +421,15 @@ describe("Parse CSS", () => {
421421
{
422422
selector: "a",
423423
property: "color",
424-
value: { type: "var", value: "color", fallbacks: [] },
424+
value: { type: "var", value: "color" },
425425
},
426426
{
427427
selector: "a",
428428
property: "backgroundColor",
429429
value: {
430430
type: "var",
431431
value: "color",
432-
fallbacks: [{ type: "unparsed", value: "red" }],
432+
fallback: { type: "unparsed", value: "red" },
433433
},
434434
},
435435
]);

packages/css-engine/src/core/merger.test.ts

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,9 @@ test("merge border with vars", () => {
5353
toStringMap(
5454
mergeStyles(
5555
new Map([
56-
["border-width", { type: "var", value: "width", fallbacks: [] }],
57-
["border-style", { type: "var", value: "style", fallbacks: [] }],
58-
["border-color", { type: "var", value: "color", fallbacks: [] }],
56+
["border-width", { type: "var", value: "width" }],
57+
["border-style", { type: "var", value: "style" }],
58+
["border-color", { type: "var", value: "color" }],
5959
])
6060
)
6161
)
@@ -72,11 +72,11 @@ test("should not merge border with initial, inherit or unset", () => {
7272
{
7373
type: "var",
7474
value: "width",
75-
fallbacks: [{ type: "keyword", value: "unset" }],
75+
fallback: { type: "keyword", value: "unset" },
7676
},
7777
],
78-
["border-style", { type: "var", value: "style", fallbacks: [] }],
79-
["border-color", { type: "var", value: "color", fallbacks: [] }],
78+
["border-style", { type: "var", value: "style" }],
79+
["border-color", { type: "var", value: "color" }],
8080
])
8181
)
8282
)
@@ -238,12 +238,7 @@ test("merge white-space with vars", () => {
238238
expect(
239239
toStringMap(
240240
mergeStyles(
241-
new Map([
242-
[
243-
"white-space-collapse",
244-
{ type: "var", value: "collapse", fallbacks: [] },
245-
],
246-
])
241+
new Map([["white-space-collapse", { type: "var", value: "collapse" }]])
247242
)
248243
)
249244
).toEqual([["white-space-collapse", "var(--collapse)"]]);
@@ -284,18 +279,16 @@ test("merge text-wrap with vars", () => {
284279
toStringMap(
285280
mergeStyles(
286281
new Map([
287-
["text-wrap-mode", { type: "var", value: "mode", fallbacks: [] }],
288-
["text-wrap-style", { type: "var", value: "style", fallbacks: [] }],
282+
["text-wrap-mode", { type: "var", value: "mode" }],
283+
["text-wrap-style", { type: "var", value: "style" }],
289284
])
290285
)
291286
)
292287
).toEqual([["text-wrap", "var(--style)"]]);
293288
expect(
294289
toStringMap(
295290
mergeStyles(
296-
new Map([
297-
["text-wrap-style", { type: "var", value: "style", fallbacks: [] }],
298-
])
291+
new Map([["text-wrap-style", { type: "var", value: "style" }]])
299292
)
300293
)
301294
).toEqual([["text-wrap", "var(--style)"]]);

packages/css-engine/src/core/merger.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const isLonghandValue = (value?: StyleValue): value is StyleValue => {
1414
return false;
1515
}
1616
if (value.type === "var") {
17-
const fallback = value.fallbacks.at(0);
17+
const fallback = value.fallback;
1818
if (fallback?.type === "keyword" && cssWideKeywords.has(fallback.value)) {
1919
return false;
2020
}

0 commit comments

Comments
 (0)