feat: support css variables in shadow properties (#5032)

Closes #4939

Added css variables support with autocomplete in text-shadow and
box-shadow properties.

Extended our ast with new "shadow" value to properly represent variables
in shadow properties. Though parser still cannot extract variables from
value with variables and falls back to "unparsed" value.

<img width="542" alt="Screenshot 2025-03-23 at 00 45 03"
src="https://github.com/user-attachments/assets/2493d925-3199-4257-b9e8-dc69daa27324"
/>

Author: TrySound

apps/builder/app/builder/features/style-panel/shared/filter-content.tsx

@@ -215,23 +215,21 @@ export const FilterSectionContent = ({
         ) : undefined}
       </Flex>
 
-      {filterFunction === "drop-shadow" &&
-      layer.type === "function" &&
-      layer.args.type === "tuple" ? (
+      {filterFunction === "drop-shadow" && layer.type === "function" && (
         <ShadowContent
           index={index}
           property="drop-shadow"
           layer={layer.args}
           propertyValue={toValue(layer.args)}
+          hideCodeEditor={true}
           onEditLayer={(_, dropShadowLayers, options) => {
             handleComplete(
               `drop-shadow(${toValue(dropShadowLayers)})`,
               options
             );
           }}
-          hideCodeEditor={true}
         />
-      ) : undefined}
+      )}
 
       <Separator css={{ gridAutoColumns: "span 2" }} />
       <Flex

apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx

@@ -1,20 +1,15 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   toValue,
+  type ShadowValue,
   type InvalidValue,
   type LayersValue,
-  type RgbValue,
   type StyleValue,
-  type TupleValue,
-  type UnitValue,
   type VarValue,
+  type CssProperty,
+  type RgbValue,
 } from "@webstudio-is/css-engine";
-import {
-  extractShadowProperties,
-  keywordValues,
-  propertySyntaxes,
-  type ExtractedShadowProperties,
-} from "@webstudio-is/css-data";
+import { keywordValues, propertySyntaxes } from "@webstudio-is/css-data";
 import {
   Flex,
   Grid,
@@ -31,16 +26,18 @@ import {
   ShadowInsetIcon,
   ShadowNormalIcon,
 } from "@webstudio-is/icons";
-import type { IntermediateStyleValue } from "../shared/css-value-input";
-import { CssValueInputContainer } from "../shared/css-value-input";
-import type { StyleUpdateOptions } from "../shared/use-style-data";
+import { humanizeString } from "~/shared/string-utils";
+import { PropertyInlineLabel } from "../property-label";
+import type { IntermediateStyleValue } from "./css-value-input";
+import { CssValueInputContainer } from "./css-value-input";
+import type { StyleUpdateOptions } from "./use-style-data";
 import {
   CssFragmentEditor,
   CssFragmentEditorContent,
   parseCssFragment,
 } from "./css-fragment";
-import { PropertyInlineLabel } from "../property-label";
 import { ColorPicker } from "./color-picker";
+import { $availableColorVariables, $availableUnitVariables } from "./model";
 
 /*
   When it comes to checking and validating individual CSS properties for the box-shadow,
@@ -80,18 +77,6 @@ type ShadowContentProps = {
   hideCodeEditor?: boolean;
 };
 
-const convertValuesToTupple = (
-  values: Partial<Record<keyof ExtractedShadowProperties, StyleValue>>
-): TupleValue => {
-  return {
-    type: "tuple",
-    value: (Object.values(values) as Array<StyleValue>).filter(
-      (item: StyleValue): item is UnitValue | RgbValue =>
-        item !== null && item !== undefined
-    ),
-  };
-};
-
 const shadowPropertySyntaxes = {
   "box-shadow": {
     x: propertySyntaxes.boxShadowOffsetX,
@@ -115,6 +100,14 @@ const shadowPropertySyntaxes = {
   },
 } as const;
 
+const defaultColor: RgbValue = {
+  type: "rgb",
+  r: 0,
+  g: 0,
+  b: 0,
+  alpha: 1,
+};
+
 export const ShadowContent = ({
   layer,
   computedLayer,
@@ -130,25 +123,25 @@ export const ShadowContent = ({
   useEffect(() => {
     setIntermediateValue({ type: "intermediate", value: propertyValue });
   }, [propertyValue]);
-  const layerValues = useMemo<ExtractedShadowProperties>(() => {
-    let value: TupleValue = { type: "tuple", value: [] };
-    if (layer.type === "tuple") {
-      value = layer;
-    }
-    if (layer.type === "var" && computedLayer?.type === "tuple") {
-      value = computedLayer;
-    }
-    return extractShadowProperties(value);
-  }, [layer, computedLayer]);
-
-  const { offsetX, offsetY, blur, spread, color, inset } = layerValues;
-  const colorControlProp = color ?? {
-    type: "rgb",
-    r: 0,
-    g: 0,
-    b: 0,
-    alpha: 1,
+  let shadowValue: ShadowValue = {
+    type: "shadow",
+    position: "outset",
+    offsetX: { type: "unit", value: 0, unit: "px" },
+    offsetY: { type: "unit", value: 0, unit: "px" },
   };
+  if (layer.type === "shadow") {
+    shadowValue = layer;
+  }
+  if (layer.type === "var" && computedLayer?.type === "shadow") {
+    shadowValue = computedLayer;
+  }
+  const computedShadow =
+    computedLayer?.type === "shadow" ? computedLayer : shadowValue;
+
+  const parsedShadowProperty: CssProperty =
+    property === "drop-shadow" ? "text-shadow" : property;
+
+  const disabledControls = layer.type === "var" || layer.type === "unparsed";
 
   const handleChange = (value: string) => {
     setIntermediateValue({
@@ -161,17 +154,21 @@ export const ShadowContent = ({
     if (intermediateValue === undefined) {
       return;
     }
+    // prevent reparsing value from string when not changed
+    // because it may contain css variables
+    // which cannot be safely parsed into ShadowValue
+    if (intermediateValue.value === propertyValue) {
+      return;
+    }
     // dropShadow is a function under the filter property.
     // To parse the value correctly, we need to change the property to textShadow.
     // https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow#formal_syntax
     // https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow#formal_syntax
     // Both share a similar syntax but the property name is different.
     const parsed = parseCssFragment(intermediateValue.value, [
-      property === "drop-shadow" ? "text-shadow" : property,
+      parsedShadowProperty,
     ]);
-    const parsedValue = parsed.get(
-      property === "drop-shadow" ? "text-shadow" : property
-    );
+    const parsedValue = parsed.get(parsedShadowProperty);
     if (parsedValue?.type === "layers" || parsedValue?.type === "var") {
       onEditLayer(index, parsedValue, { isEphemeral: false });
       return;
@@ -182,11 +179,11 @@ export const ShadowContent = ({
     });
   };
 
-  const handlePropertyChange = (
-    params: Partial<Record<keyof ExtractedShadowProperties, StyleValue>>,
+  const updateShadow = (
+    params: Partial<ShadowValue>,
     options: StyleUpdateOptions = { isEphemeral: false }
   ) => {
-    const newLayer = convertValuesToTupple({ ...layerValues, ...params });
+    const newLayer: ShadowValue = { ...shadowValue, ...params };
     setIntermediateValue({
       type: "intermediate",
       value: toValue(newLayer),
@@ -214,13 +211,16 @@ export const ShadowContent = ({
             // outline-offset is a fake property for validating box-shadow's offsetX.
             property="outline-offset"
             styleSource="local"
-            disabled={layer.type === "var"}
-            value={offsetX ?? { type: "unit", value: 0, unit: "px" }}
-            onUpdate={(value, options) =>
-              handlePropertyChange({ offsetX: value }, options)
-            }
+            disabled={disabledControls}
+            getOptions={() => $availableUnitVariables.get()}
+            value={shadowValue.offsetX}
+            onUpdate={(value, options) => {
+              if (value.type === "unit" || value.type === "var") {
+                updateShadow({ offsetX: value }, options);
+              }
+            }}
             onDelete={(options) =>
-              handlePropertyChange({ offsetX: offsetX ?? undefined }, options)
+              updateShadow({ offsetX: shadowValue.offsetX }, options)
             }
           />
         </Flex>
@@ -235,13 +235,16 @@ export const ShadowContent = ({
             // outline-offset is a fake property for validating box-shadow's offsetY.
             property="outline-offset"
             styleSource="local"
-            disabled={layer.type === "var"}
-            value={offsetY ?? { type: "unit", value: 0, unit: "px" }}
-            onUpdate={(value, options) =>
-              handlePropertyChange({ offsetY: value }, options)
-            }
+            disabled={disabledControls}
+            getOptions={() => $availableUnitVariables.get()}
+            value={shadowValue.offsetY}
+            onUpdate={(value, options) => {
+              if (value.type === "unit" || value.type === "var") {
+                updateShadow({ offsetY: value }, options);
+              }
+            }}
             onDelete={(options) =>
-              handlePropertyChange({ offsetY: offsetY ?? undefined }, options)
+              updateShadow({ offsetY: shadowValue.offsetY }, options)
             }
           />
         </Flex>
@@ -256,13 +259,16 @@ export const ShadowContent = ({
             // border-top-width is a fake property for validating box-shadow's blur.
             property="border-top-width"
             styleSource="local"
-            disabled={layer.type === "var"}
-            value={blur ?? { type: "unit", value: 0, unit: "px" }}
-            onUpdate={(value, options) =>
-              handlePropertyChange({ blur: value }, options)
-            }
+            disabled={disabledControls}
+            getOptions={() => $availableUnitVariables.get()}
+            value={shadowValue.blur ?? { type: "unit", value: 0, unit: "px" }}
+            onUpdate={(value, options) => {
+              if (value.type === "unit" || value.type === "var") {
+                updateShadow({ blur: value }, options);
+              }
+            }}
             onDelete={(options) =>
-              handlePropertyChange({ blur: blur ?? undefined }, options)
+              updateShadow({ blur: shadowValue.blur }, options)
             }
           />
         </Flex>
@@ -278,13 +284,18 @@ export const ShadowContent = ({
               // outline-offset is a fake property for validating box-shadow's spread.
               property="outline-offset"
               styleSource="local"
-              disabled={layer.type === "var"}
-              value={spread ?? { type: "unit", value: 0, unit: "px" }}
-              onUpdate={(value, options) =>
-                handlePropertyChange({ spread: value }, options)
+              disabled={disabledControls}
+              getOptions={() => $availableUnitVariables.get()}
+              value={
+                shadowValue.spread ?? { type: "unit", value: 0, unit: "px" }
               }
+              onUpdate={(value, options) => {
+                if (value.type === "unit" || value.type === "var") {
+                  updateShadow({ spread: value }, options);
+                }
+              }}
               onDelete={(options) =>
-                handlePropertyChange({ spread: spread ?? undefined }, options)
+                updateShadow({ spread: shadowValue.spread }, options)
               }
             />
           </Flex>
@@ -305,48 +316,45 @@ export const ShadowContent = ({
           />
           <ColorPicker
             property="color"
-            disabled={layer.type === "var"}
-            value={colorControlProp}
-            currentColor={colorControlProp}
-            getOptions={() =>
-              keywordValues["color"].map((value) => ({
-                type: "keyword",
-                value,
-              }))
-            }
-            onChange={(styleValue) =>
-              handlePropertyChange({ color: styleValue }, { isEphemeral: true })
-            }
-            onChangeComplete={(styleValue) =>
-              handlePropertyChange({ color: styleValue })
-            }
-            onAbort={() => handlePropertyChange({ color: colorControlProp })}
-            onReset={() => {
-              handlePropertyChange({ color: undefined });
+            disabled={disabledControls}
+            value={shadowValue.color ?? defaultColor}
+            currentColor={computedShadow?.color ?? defaultColor}
+            getOptions={() => [
+              ...(keywordValues.color ?? []).map((item) => ({
+                type: "keyword" as const,
+                value: item,
+              })),
+              ...$availableColorVariables.get(),
+            ]}
+            onChange={(value) => {
+              if (value.type === "rgb" || value.type === "var") {
+                updateShadow({ color: value }, { isEphemeral: true });
+              }
             }}
+            onChangeComplete={(value) => {
+              if (value.type === "rgb" || value.type === "var") {
+                updateShadow({ color: value });
+              }
+            }}
+            onAbort={() => updateShadow({ color: shadowValue.color })}
+            onReset={() => updateShadow({ color: undefined })}
           />
         </Flex>
 
         {property === "box-shadow" ? (
           <Flex direction="column" gap="1">
             <PropertyInlineLabel
-              label="Inset"
+              label={humanizeString(shadowValue.position)}
               description={shadowPropertySyntaxes["box-shadow"].position}
             />
             <ToggleGroup
               type="single"
-              disabled={layer.type === "var"}
-              value={inset?.value ?? "outset"}
+              disabled={disabledControls}
+              value={shadowValue.position}
               defaultValue="inset"
-              onValueChange={(value) => {
-                if (value === "inset") {
-                  handlePropertyChange({
-                    inset: { type: "keyword", value: "inset" },
-                  });
-                } else {
-                  handlePropertyChange({ inset: undefined });
-                }
-              }}
+              onValueChange={(value) =>
+                updateShadow({ position: value as ShadowValue["position"] })
+              }
             >
               <Tooltip content="Outset">
                 <ToggleGroupButton value="outset">

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

@@ -627,6 +627,20 @@ const traverseStyleValue = (
     }
     return;
   }
+  if (value.type === "shadow") {
+    traverseStyleValue(value.offsetX, callback);
+    traverseStyleValue(value.offsetY, callback);
+    if (value.blur) {
+      traverseStyleValue(value.blur, callback);
+    }
+    if (value.spread) {
+      traverseStyleValue(value.spread, callback);
+    }
+    if (value.color) {
+      traverseStyleValue(value.color, callback);
+    }
+    return;
+  }
   value satisfies never;
 };