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.

Author: TrySound

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

@@ -256,7 +256,7 @@ const AdvancedPropertyValue = ({
           styleValue.value.startsWith("--")
         ) {
           setProperty(property)(
-            { type: "var", value: styleValue.value.slice(2), fallbacks: [] },
+            { type: "var", value: styleValue.value.slice(2) },
             { ...options, listed: true }
           );
         } else {

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

@@ -542,6 +542,5 @@ test("parse css vars", () => {
   expect(result).toEqual({
     type: "var",
     value: "color",
-    fallbacks: [],
   });
 });

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

@@ -159,7 +159,7 @@ const toVarValue = (styleDecl: StyleDecl): undefined | VarValue => {
       // escape complex selectors in state like ":hover"
       // setProperty and removeProperty escape automatically
       value: CSS.escape(getEphemeralProperty(styleDecl).slice(2)),
-      fallbacks: [value],
+      fallback: { type: "unparsed", value: toValue(value) },
     };
   }
 };

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

@@ -752,8 +752,8 @@ const traverseStyleValue = (
     return;
   }
   if (value.type === "var") {
-    for (const item of value.fallbacks) {
-      traverseStyleValue(item, callback);
+    if (value.fallback) {
+      traverseStyleValue(value.fallback, callback);
     }
     return;
   }

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

@@ -1,6 +1,10 @@
 import type { HtmlTags } from "html-tags";
 import { html, properties } from "@webstudio-is/css-data";
-import type { StyleValue, StyleProperty } from "@webstudio-is/css-engine";
+import type {
+  StyleValue,
+  StyleProperty,
+  VarFallback,
+} from "@webstudio-is/css-engine";
 import {
   type Instance,
   type StyleDecl,
@@ -350,7 +354,7 @@ export const getComputedStyleDecl = ({
       }
       usedCustomProperties.add(customProperty);
 
-      const fallback = computedValue.fallbacks.at(0);
+      const fallback: undefined | VarFallback = computedValue.fallback;
       const customPropertyValue = getComputedStyleDecl({
         model,
         // resolve custom properties on instance they are defined

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

@@ -541,12 +541,11 @@ test("support custom properties var reference", () => {
   expect(parseCssValue("color", "var(--color)")).toEqual({
     type: "var",
     value: "color",
-    fallbacks: [],
   });
   expect(parseCssValue("color", "var(--color, red)")).toEqual({
     type: "var",
     value: "color",
-    fallbacks: [{ type: "unparsed", value: "red" }],
+    fallback: { type: "unparsed", value: "red" },
   });
 });
 
@@ -569,12 +568,11 @@ test("support custom properties var reference in custom property", () => {
   expect(parseCssValue("--bg", "var(--color)")).toEqual({
     type: "var",
     value: "color",
-    fallbacks: [],
   });
   expect(parseCssValue("--bg", "var(--color, red)")).toEqual({
     type: "var",
     value: "color",
-    fallbacks: [{ type: "unparsed", value: "red" }],
+    fallback: { type: "unparsed", value: "red" },
   });
 });
 

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

@@ -243,14 +243,14 @@ const parseLiteral = (
         children: new List<CssNode>().fromArray(fallback),
       }).trim();
       if (name.type === "Identifier") {
-        return {
+        const value: VarValue = {
           type: "var",
           value: name.name.slice("--".length),
-          fallbacks:
-            fallback.length === 0
-              ? []
-              : [{ type: "unparsed", value: fallbackString }],
         };
+        if (fallback.length > 0) {
+          value.fallback = { type: "unparsed", value: fallbackString };
+        }
+        return value;
       }
     }
 

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

@@ -421,15 +421,15 @@ describe("Parse CSS", () => {
       {
         selector: "a",
         property: "color",
-        value: { type: "var", value: "color", fallbacks: [] },
+        value: { type: "var", value: "color" },
       },
       {
         selector: "a",
         property: "backgroundColor",
         value: {
           type: "var",
           value: "color",
-          fallbacks: [{ type: "unparsed", value: "red" }],
+          fallback: { type: "unparsed", value: "red" },
         },
       },
     ]);

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

@@ -53,9 +53,9 @@ test("merge border with vars", () => {
     toStringMap(
       mergeStyles(
         new Map([
-          ["border-width", { type: "var", value: "width", fallbacks: [] }],
-          ["border-style", { type: "var", value: "style", fallbacks: [] }],
-          ["border-color", { type: "var", value: "color", fallbacks: [] }],
+          ["border-width", { type: "var", value: "width" }],
+          ["border-style", { type: "var", value: "style" }],
+          ["border-color", { type: "var", value: "color" }],
         ])
       )
     )
@@ -72,11 +72,11 @@ test("should not merge border with initial, inherit or unset", () => {
             {
               type: "var",
               value: "width",
-              fallbacks: [{ type: "keyword", value: "unset" }],
+              fallback: { type: "keyword", value: "unset" },
             },
           ],
-          ["border-style", { type: "var", value: "style", fallbacks: [] }],
-          ["border-color", { type: "var", value: "color", fallbacks: [] }],
+          ["border-style", { type: "var", value: "style" }],
+          ["border-color", { type: "var", value: "color" }],
         ])
       )
     )
@@ -238,12 +238,7 @@ test("merge white-space with vars", () => {
   expect(
     toStringMap(
       mergeStyles(
-        new Map([
-          [
-            "white-space-collapse",
-            { type: "var", value: "collapse", fallbacks: [] },
-          ],
-        ])
+        new Map([["white-space-collapse", { type: "var", value: "collapse" }]])
       )
     )
   ).toEqual([["white-space-collapse", "var(--collapse)"]]);
@@ -284,18 +279,16 @@ test("merge text-wrap with vars", () => {
     toStringMap(
       mergeStyles(
         new Map([
-          ["text-wrap-mode", { type: "var", value: "mode", fallbacks: [] }],
-          ["text-wrap-style", { type: "var", value: "style", fallbacks: [] }],
+          ["text-wrap-mode", { type: "var", value: "mode" }],
+          ["text-wrap-style", { type: "var", value: "style" }],
         ])
       )
     )
   ).toEqual([["text-wrap", "var(--style)"]]);
   expect(
     toStringMap(
       mergeStyles(
-        new Map([
-          ["text-wrap-style", { type: "var", value: "style", fallbacks: [] }],
-        ])
+        new Map([["text-wrap-style", { type: "var", value: "style" }]])
       )
     )
   ).toEqual([["text-wrap", "var(--style)"]]);

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

@@ -14,7 +14,7 @@ const isLonghandValue = (value?: StyleValue): value is StyleValue => {
     return false;
   }
   if (value.type === "var") {
-    const fallback = value.fallbacks.at(0);
+    const fallback = value.fallback;
     if (fallback?.type === "keyword" && cssWideKeywords.has(fallback.value)) {
       return false;
     }