experimental: parse length and color in css variables (#4204)

Ref #3399

Here improved parsing to automatically infer unit and color style values
in css custom properties.

This will let us in the future leverage strictly typed custom properties
for interpolation in animations.

Now the benefit is proper ui and filtering out unit in color pickers and
color in length inputs. Not implemented though yet.

![Screenshot 2024-10-03 at 13 31
20](https://github.com/user-attachments/assets/b32db3d3-8589-4cd4-b375-fb2036a308a0)

Author: TrySound

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

@@ -20,13 +20,6 @@ export const parseIntermediateOrInvalidValue = (
     value = value.slice(0, -1);
   }
 
-  if (property.startsWith("--")) {
-    return {
-      type: "unparsed",
-      value,
-    };
-  }
-
   // When user enters a number, we don't know if its a valid unit value,
   // so we are going to parse it with a unit and if its not invalid - we take it.
   const ast = parse(value, { context: "value" });

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

@@ -534,13 +534,75 @@ describe("Colors", () => {
   });
 });
 
-test("parse css vars", () => {
-  const result = parseIntermediateOrInvalidValue("color", {
-    type: "intermediate",
-    value: "var(--color)",
-  });
-  expect(result).toEqual({
+test("parse css variable reference", () => {
+  expect(
+    parseIntermediateOrInvalidValue("color", {
+      type: "intermediate",
+      value: "var(--color)",
+    })
+  ).toEqual({
     type: "var",
     value: "color",
   });
 });
+
+test("parse unit in css variable", () => {
+  expect(
+    parseIntermediateOrInvalidValue("--size", {
+      type: "intermediate",
+      value: "10px",
+    })
+  ).toEqual({
+    type: "unit",
+    value: 10,
+    unit: "px",
+  });
+  expect(
+    parseIntermediateOrInvalidValue("--size", {
+      type: "intermediate",
+      value: "10",
+      unit: "px",
+    })
+  ).toEqual({
+    type: "unit",
+    value: 10,
+    unit: "px",
+  });
+});
+
+test("parse color in css variable", () => {
+  expect(
+    parseIntermediateOrInvalidValue("--size", {
+      type: "intermediate",
+      value: "#0f0f0f",
+    })
+  ).toEqual({
+    type: "rgb",
+    r: 15,
+    g: 15,
+    b: 15,
+    alpha: 1,
+  });
+});
+
+test("parse css variables as unparsed", () => {
+  expect(
+    parseIntermediateOrInvalidValue("--size", {
+      type: "intermediate",
+      value: "url(https://my-image.com)",
+    })
+  ).toEqual({
+    type: "unparsed",
+    value: "url(https://my-image.com)",
+  });
+  expect(
+    parseIntermediateOrInvalidValue("--size", {
+      type: "intermediate",
+      value: "url(https://my-image.com)",
+      unit: "px",
+    })
+  ).toEqual({
+    type: "unparsed",
+    value: "url(https://my-image.com)",
+  });
+});

apps/builder/app/builder/features/style-panel/shared/css-value-input/unit-select-options.ts

@@ -48,10 +48,10 @@ export const buildOptions = (
 
   const options: UnitOption[] = [];
 
-  if (property in properties === false) {
-    return options;
-  }
-  const { unitGroups } = properties[property as keyof typeof properties];
+  // show at least current unit when no property meta is available
+  // for example in custom properties
+  const unitGroups =
+    properties[property as keyof typeof properties]?.unitGroups ?? [];
 
   for (const unitGroup of unitGroups) {
     if (unitGroup === "number") {

apps/builder/app/builder/features/style-panel/shared/model.tsx

@@ -32,6 +32,7 @@ import {
   type ComputedStyleDecl,
   type StyleObjectModel,
 } from "~/shared/style-object-model";
+import type { InstanceSelector } from "~/shared/tree-utils";
 
 const $presetStyles = computed($registeredComponentMetas, (metas) => {
   const presetStyles = new Map<string, StyleValue>();
@@ -106,7 +107,10 @@ export const $definedStyles = computed(
     if (instanceSelector === undefined) {
       return definedProperties;
     }
-    const instanceAndRootSelector = [...instanceSelector, ROOT_INSTANCE_ID];
+    const instanceAndRootSelector =
+      instanceSelector[0] === ROOT_INSTANCE_ID
+        ? instanceSelector
+        : [...instanceSelector, ROOT_INSTANCE_ID];
     const inheritedStyleSources = new Set();
     const instanceStyleSources = new Set();
     const matchingBreakpoints = new Set(matchingBreakpointsArray);
@@ -180,9 +184,13 @@ export const createComputedStyleDeclStore = (property: StyleProperty) => {
   return computed(
     [$model, $selectedInstanceSelector, $selectedOrLastStyleSourceSelector],
     (model, instanceSelector, styleSourceSelector) => {
-      const instanceAndRootSelector = instanceSelector
-        ? [...instanceSelector, ROOT_INSTANCE_ID]
-        : undefined;
+      let instanceAndRootSelector: undefined | InstanceSelector;
+      if (instanceSelector) {
+        instanceAndRootSelector =
+          instanceSelector[0] === ROOT_INSTANCE_ID
+            ? instanceSelector
+            : [...instanceSelector, ROOT_INSTANCE_ID];
+      }
       return getComputedStyleDecl({
         model,
         instanceSelector: instanceAndRootSelector,

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

@@ -531,9 +531,9 @@ test("support custom properties as unparsed values", () => {
     type: "unparsed",
     value: "blue",
   });
-  expect(parseCssValue("--my-property", "1px")).toEqual({
+  expect(parseCssValue("--my-property", "url(https://my-image.com)")).toEqual({
     type: "unparsed",
-    value: "1px",
+    value: "url(https://my-image.com)",
   });
 });
 
@@ -564,6 +564,52 @@ test("support deeply nested var reference", () => {
   });
 });
 
+test("support unit in custom property", () => {
+  expect(parseCssValue("--size", "10")).toEqual({
+    type: "unit",
+    value: 10,
+    unit: "number",
+  });
+  expect(parseCssValue("--size", "10px")).toEqual({
+    type: "unit",
+    value: 10,
+    unit: "px",
+  });
+  expect(parseCssValue("--size", "10%")).toEqual({
+    type: "unit",
+    value: 10,
+    unit: "%",
+  });
+});
+
+test("support color in custom property", () => {
+  expect(parseCssValue("--color", "rgb(61 77 4)")).toEqual({
+    type: "rgb",
+    r: 61,
+    g: 77,
+    b: 4,
+    alpha: 1,
+  });
+  expect(parseCssValue("--color", "rgba(61, 77, 4, 0.5)")).toEqual({
+    type: "rgb",
+    r: 61,
+    g: 77,
+    b: 4,
+    alpha: 0.5,
+  });
+  expect(parseCssValue("--color", "#3d4d04")).toEqual({
+    type: "rgb",
+    r: 61,
+    g: 77,
+    b: 4,
+    alpha: 1,
+  });
+  expect(parseCssValue("--color", "red")).toEqual({
+    type: "unparsed",
+    value: "red",
+  });
+});
+
 test("support custom properties var reference in custom property", () => {
   expect(parseCssValue("--bg", "var(--color)")).toEqual({
     type: "var",

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

@@ -456,7 +456,11 @@ export const parseCssValue = (
     );
     // parse only references in custom properties
     if (property.startsWith("--")) {
-      if (matchedValue?.type === "var") {
+      if (
+        matchedValue?.type === "var" ||
+        matchedValue?.type === "unit" ||
+        matchedValue?.type === "rgb"
+      ) {
         return matchedValue;
       }
       return { type: "unparsed", value: input };