refactor: remove legacy style engine from style panel (#4338)

Migrated style panel to new style engine for sections rendering and
switched position section as well.

Test following cases

- flex child section when parent has flex
- list style section for list or list item
- inset control when position value is relative, absolute, fixed or
sticky
- inset control when position is inherited form relative etc
- zindex control when parent is flex or grid

Author: TrySound

apps/builder/app/builder/features/style-panel/parent-style.ts

@@ -1,2 +1 @@
 export * from "./sections";
-export type { SectionProps } from "./shared/section";

apps/builder/app/builder/features/style-panel/sections/index.ts

@@ -1,13 +1,15 @@
-import type { StyleProperty } from "@webstudio-is/css-engine";
-import type { SectionProps } from "../shared/section";
-import { StyleSection } from "../../shared/style-section";
+import { toValue, type StyleProperty } from "@webstudio-is/css-engine";
 import { Grid, theme } from "@webstudio-is/design-system";
+import { propertyDescriptions } from "@webstudio-is/css-data";
+import { StyleSection } from "../../shared/style-section";
 import { SelectControl, TextControl } from "../../controls";
 import { styleConfigByName } from "../../shared/configs";
-import { InsetControl } from "./inset-control";
-import { useParentStyle } from "../../parent-style";
 import { PropertyLabel } from "../../property-label";
-import { propertyDescriptions } from "@webstudio-is/css-data";
+import {
+  useComputedStyleDecl,
+  useParentComputedStyleDecl,
+} from "../../shared/model";
+import { InsetControl } from "./inset-control";
 
 export const properties = [
   "position",
@@ -18,52 +20,37 @@ export const properties = [
   "left",
 ] satisfies Array<StyleProperty>;
 
-const positionControlVisibleProperties = [
-  "relative",
-  "absolute",
-  "fixed",
-  "sticky",
-] as const;
-
-const zIndexParents = ["flex", "grid", "inline-flex", "inline-grid"] as const;
-
-export const Section = ({ currentStyle }: SectionProps) => {
-  const parentStyle = useParentStyle();
-
-  const positionValue = currentStyle.position?.value;
-
+export const Section = () => {
+  const position = useComputedStyleDecl("position");
+  const positionValue = toValue(position.computedValue);
   const showInsetControl =
-    positionValue?.type === "keyword" &&
-    positionControlVisibleProperties.includes(positionValue.value as never);
+    positionValue === "relative" ||
+    positionValue === "absolute" ||
+    positionValue === "fixed" ||
+    positionValue === "sticky";
 
+  const parentDisplay = useParentComputedStyleDecl("display");
+  const parentDisplayValue = toValue(parentDisplay.computedValue);
   const showZindexControl =
     showInsetControl ||
-    (parentStyle?.display?.value.type === "keyword" &&
-      zIndexParents.includes(parentStyle?.display?.value.value as never));
-
-  const { items: unfilteredPositionItems } = styleConfigByName("position");
-
-  // Filter out "inherit" as we have no a good way to handle it
-  // @todo remove after https://github.com/webstudio-is/webstudio/issues/1536
-  const positionItems = unfilteredPositionItems.filter(
-    (item) => item.name !== "inherit"
-  );
+    parentDisplayValue === "flex" ||
+    parentDisplayValue === "grid" ||
+    parentDisplayValue === "inline-flex" ||
+    parentDisplayValue === "inline-grid";
 
   return (
     <StyleSection label="Position" properties={properties}>
       <Grid gap={2}>
-        <Grid
-          gap={2}
-          css={{
-            gridTemplateColumns: `1fr ${theme.spacing[23]}`,
-          }}
-        >
+        <Grid gap={2} css={{ gridTemplateColumns: `1fr ${theme.spacing[23]}` }}>
           <PropertyLabel
             label="Position"
             description={propertyDescriptions.position}
             properties={["position"]}
           />
-          <SelectControl property="position" items={positionItems} />
+          <SelectControl
+            property="position"
+            items={styleConfigByName("position").items}
+          />
           {showZindexControl && showInsetControl === false && (
             <>
               <PropertyLabel
@@ -75,7 +62,6 @@ export const Section = ({ currentStyle }: SectionProps) => {
             </>
           )}
         </Grid>
-
         {showInsetControl && (
           <Grid gap={3} columns={2}>
             <InsetControl />

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

@@ -17,13 +17,12 @@ import * as textShadows from "./text-shadows/text-shadows";
 import * as backdropFilter from "./backdrop-filter/backdrop-filter";
 import * as transforms from "./transforms/transforms";
 import type { StyleProperty } from "@webstudio-is/css-engine";
-import type { SectionProps } from "./shared/section";
 
 export const sections = new Map<
   string,
   {
     properties: StyleProperty[];
-    Section: (props: SectionProps) => ReactNode;
+    Section: () => ReactNode;
   }
 >([
   ["layout", layout],

apps/builder/app/builder/features/style-panel/sections/sections.ts

@@ -11,9 +11,9 @@ import {
   CssValueInput,
   type IntermediateStyleValue,
 } from "../../shared/css-value-input";
-import type { StyleSource } from "../../shared/style-info";
 import { createBatchUpdate } from "../../shared/use-style-data";
 import { theme } from "@webstudio-is/design-system";
+import type { StyleValueSourceColor } from "~/shared/style-object-model";
 import { $availableUnitVariables } from "../../shared/model";
 
 const slideUpAndFade = keyframes({
@@ -28,7 +28,7 @@ const Input = ({
   activeProperties,
   onClosePopover,
 }: {
-  styleSource: StyleSource;
+  styleSource: StyleValueSourceColor;
   property: StyleProperty;
   activeProperties: StyleProperty[];
   value: StyleValue;
@@ -119,7 +119,7 @@ export const InputPopover = ({
   isOpen,
   onClose,
 }: {
-  styleSource: StyleSource;
+  styleSource: StyleValueSourceColor;
   property: StyleProperty;
   activeProperties: StyleProperty[];
   value: StyleValue;

apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx

@@ -39,7 +39,6 @@ import { useUnitSelect } from "./unit-select";
 import { parseIntermediateOrInvalidValue } from "./parse-intermediate-or-invalid-value";
 import { toValue } from "@webstudio-is/css-engine";
 import { useDebouncedCallback } from "use-debounce";
-import type { StyleSource } from "../style-info";
 import {
   declarationDescriptions,
   isValidDeclaration,
@@ -52,6 +51,7 @@ import {
 import { convertUnits } from "./convert-units";
 import { mergeRefs } from "@react-aria/utils";
 import { composeEventHandlers } from "~/shared/event-utils";
+import type { StyleValueSourceColor } from "~/shared/style-object-model";
 import { ColorThumb } from "../color-thumb";
 
 // We need to enable scrub on properties that can have numeric value.
@@ -255,7 +255,7 @@ type CssValueInputProps = Pick<
   | "prefix"
   | "inputRef"
 > & {
-  styleSource: StyleSource;
+  styleSource: StyleValueSourceColor;
   property: StyleProperty;
   value: StyleValue | undefined;
   intermediateValue: CssValueInputValue | undefined;

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

@@ -280,6 +280,24 @@ export const useComputedStyleDecl = (property: StyleProperty) => {
   return useStore($store);
 };
 
+export const useParentComputedStyleDecl = (property: StyleProperty) => {
+  const $store = useMemo(
+    () =>
+      computed(
+        [$model, $instanceAndRootSelector],
+        (model, instanceSelector) => {
+          return getComputedStyleDecl({
+            model,
+            instanceSelector: instanceSelector?.slice(1),
+            property,
+          });
+        }
+      ),
+    [property]
+  );
+  return useStore($store);
+};
+
 export const useComputedStyles = (properties: StyleProperty[]) => {
   // cache each computed style store
   const cachedStores = useRef(

apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx

@@ -8,22 +8,15 @@ import {
 } from "@webstudio-is/design-system";
 import { useStore } from "@nanostores/react";
 import { computed } from "nanostores";
-import type { HtmlTags } from "html-tags";
-import {
-  setProperty,
-  deleteProperty,
-  createBatchUpdate,
-} from "./shared/use-style-data";
 import { StyleSourcesSection } from "./style-source-section";
 import { $selectedInstanceRenderState } from "~/shared/nano-states";
 import {
   $selectedInstanceIntanceToTag,
   $selectedInstanceSelector,
 } from "~/shared/nano-states";
 import { sections } from "./sections";
-import { useParentStyle } from "./parent-style";
-import { useStyleInfo, type StyleInfo } from "./shared/style-info";
 import { toValue } from "@webstudio-is/css-engine";
+import { useParentComputedStyleDecl } from "./shared/model";
 
 const $selectedInstanceTag = computed(
   [$selectedInstanceSelector, $selectedInstanceIntanceToTag],
@@ -35,26 +28,11 @@ const $selectedInstanceTag = computed(
   }
 );
 
-const shouldRenderCategory = (
-  category: string,
-  parentStyle: StyleInfo,
-  tag: undefined | HtmlTags
-) => {
-  switch (category) {
-    case "flexChild":
-      return toValue(parentStyle.display?.value).includes("flex");
-    case "listItem":
-      return tag === "ul" || tag === "ol" || tag === "li";
-  }
-  return true;
-};
-
 export const StylePanel = () => {
-  const currentStyle = useStyleInfo();
-
   const selectedInstanceRenderState = useStore($selectedInstanceRenderState);
-  const selectedInstanceTag = useStore($selectedInstanceTag);
-  const parentStyle = useParentStyle();
+  const tag = useStore($selectedInstanceTag);
+  const display = useParentComputedStyleDecl("display");
+  const displayValue = toValue(display.computedValue);
 
   // If selected instance is not rendered on the canvas,
   // style panel will not work, because it needs the element in DOM in order to work.
@@ -72,17 +50,20 @@ export const StylePanel = () => {
   const all = [];
 
   for (const [category, { Section }] of sections.entries()) {
-    if (shouldRenderCategory(category, parentStyle, selectedInstanceTag)) {
-      all.push(
-        <Section
-          key={category}
-          setProperty={setProperty}
-          deleteProperty={deleteProperty}
-          createBatchUpdate={createBatchUpdate}
-          currentStyle={currentStyle}
-        />
-      );
+    // show flex child UI only when parent is flex or inline-flex
+    if (category === "flexChild" && displayValue.includes("flex") === false) {
+      continue;
+    }
+    // allow customizing list item type only for list and list item
+    if (
+      category === "listItem" &&
+      tag !== "ul" &&
+      tag !== "ol" &&
+      tag !== "li"
+    ) {
+      continue;
     }
+    all.push(<Section key={category} />);
   }
 
   return (