feat: parse complex values with available parsers for sections (#3319)

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

@@ -160,12 +160,12 @@ export const Section = ({
                 styleSource={getStyleSource(currentStyle[property])}
                 keywords={keywords}
                 value={currentStyle[property]?.value}
-                setValue={(styleValue, options) => {
+                setValue={(styleValue, options) =>
                   setProperty(property)(styleValue, {
                     ...options,
                     listed: true,
-                  });
-                }}
+                  })
+                }
                 deleteProperty={deleteProperty}
               />
             </Flex>

apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadows.tsx

@@ -29,8 +29,11 @@ const INITIAL_BOX_SHADOW = "0px 2px 5px 0px rgba(0, 0, 0, 0.2)";
 export const Section = (props: SectionProps) => {
   const { currentStyle, deleteProperty } = props;
   const [isOpen, setIsOpen] = useState(true);
-  const layersStyleSource = getStyleSource(currentStyle[property]);
   const value = currentStyle[property]?.value;
+  const sectionStyleSource =
+    value?.type === "unparsed" || value?.type === "guaranteedInvalid"
+      ? undefined
+      : getStyleSource(currentStyle[property]);
 
   return (
     <CollapsibleSectionRoot
@@ -62,7 +65,7 @@ export const Section = (props: SectionProps) => {
             properties={properties}
             description="Adds shadow effects around an element's frame."
             label={
-              <SectionTitleLabel color={layersStyleSource}>
+              <SectionTitleLabel color={sectionStyleSource}>
                 {label}
               </SectionTitleLabel>
             }

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

@@ -30,8 +30,11 @@ const INITIAL_FILTER = "blur(0px)";
 export const Section = (props: SectionProps) => {
   const { currentStyle, deleteProperty } = props;
   const [isOpen, setIsOpen] = useState(true);
-  const layerStyleSource = getStyleSource(currentStyle[property]);
   const value = currentStyle[property]?.value;
+  const sectionStyleSource =
+    value?.type === "unparsed" || value?.type === "guaranteedInvalid"
+      ? undefined
+      : getStyleSource(currentStyle[property]);
 
   return (
     <CollapsibleSectionRoot
@@ -41,7 +44,7 @@ export const Section = (props: SectionProps) => {
       onOpenChange={setIsOpen}
       trigger={
         <SectionTitle
-          dots={getDots(currentStyle, [property])}
+          dots={getDots(currentStyle, properties)}
           suffix={
             <Tooltip content={"Add a filter"}>
               <SectionTitleButton
@@ -65,7 +68,7 @@ export const Section = (props: SectionProps) => {
             properties={properties}
             description="Filter effects allow you to apply graphical effects like blurring, color shifting, and more to elements."
             label={
-              <SectionTitleLabel color={layerStyleSource}>
+              <SectionTitleLabel color={sectionStyleSource}>
                 {label}
               </SectionTitleLabel>
             }

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

@@ -32,8 +32,11 @@ const INITIAL_TRANSITION = "opacity 200ms ease";
 export const Section = (props: SectionProps) => {
   const { currentStyle, deleteProperty } = props;
   const [isOpen, setIsOpen] = useState(true);
-  const layersStyleSource = getStyleSource(currentStyle[property]);
   const value = currentStyle[property]?.value;
+  const sectionStyleSource =
+    value?.type === "unparsed" || value?.type === "guaranteedInvalid"
+      ? undefined
+      : getStyleSource(currentStyle[property]);
 
   const selectedOrLastStyleSourceSelector = useStore(
     $selectedOrLastStyleSourceSelector
@@ -82,7 +85,7 @@ export const Section = (props: SectionProps) => {
             description="Animate the transition between states on this instance."
             properties={properties}
             label={
-              <SectionTitleLabel color={layersStyleSource}>
+              <SectionTitleLabel color={sectionStyleSource}>
                 {label}
               </SectionTitleLabel>
             }

apps/builder/app/builder/features/style-panel/shared/collapsible-section.tsx

@@ -19,7 +19,17 @@ export const getDots = (
   const dots = new Set<"local" | "overwritten" | "remote">();
 
   for (const property of properties) {
-    const source = getStyleSource(currentStyle[property]);
+    const style = currentStyle[property];
+
+    // Unparsed values are not editable directly in the section, so we don't show the dot
+    if (
+      style?.value.type === "unparsed" ||
+      style?.value.type === "guaranteedInvalid"
+    ) {
+      return;
+    }
+
+    const source = getStyleSource(style);
     if (source === "local" || source === "overwritten" || source === "remote") {
       dots.add(source);
     }

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

@@ -10,6 +10,7 @@ import {
 } from "@webstudio-is/css-engine";
 import { keywordValues } from "./__generated__/keyword-values";
 import { units } from "./__generated__/units";
+import { parseFilter, parseShadow, parseTransition } from "./property-parsers";
 
 export const cssTryParseValue = (input: string) => {
   try {
@@ -78,6 +79,18 @@ export const parseCssValue = (
     return invalidValue;
   }
 
+  if (property === "filter" || property === "backdropFilter") {
+    return parseFilter(input);
+  }
+
+  if (property === "boxShadow" || property === "textShadow") {
+    return parseShadow(property, input);
+  }
+
+  if (property === "transition") {
+    return parseTransition(input);
+  }
+
   if (
     ast != null &&
     ast.type === "Value" &&