experimental: hide inherited root styles (#4210)

TrySound · web-flow · commit 5a88b404c2a5 · 2024-10-03T23:53:33.000+03:00
Ref #3399 Root styles are bloating all instances so as a temporary solution we do not show any styles inherited from them in advanced panel.
diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -1,5 +1,6 @@
 import { colord } from "colord";
 import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useStore } from "@nanostores/react";
 import { computed } from "nanostores";
 import { matchSorter } from "match-sorter";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
@@ -20,7 +21,7 @@ import {
   properties as propertiesData,
   propertyDescriptions,
 } from "@webstudio-is/css-data";
-import { useStore } from "@nanostores/react";
+import { ROOT_INSTANCE_ID } from "@webstudio-is/sdk";
 import {
   hyphenateProperty,
   toValue,
@@ -35,13 +36,20 @@ import { styleConfigByName } from "../../shared/configs";
 import { deleteProperty, setProperty } from "../../shared/use-style-data";
 import {
   $definedStyles,
+  $matchingBreakpoints,
+  getDefinedStyles,
   useComputedStyleDecl,
   useComputedStyles,
 } from "../../shared/model";
 import { getDots } from "../../shared/style-section";
 import { PropertyInfo } from "../../property-label";
 import { sections } from "../sections";
 import { ColorPopover } from "../../shared/color-picker";
+import {
+  $selectedInstanceSelector,
+  $styles,
+  $styleSourceSelections,
+} from "~/shared/nano-states";
 
 // Only here to keep the same section module interface
 export const properties = [];
@@ -206,7 +214,7 @@ const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
   );
 };
 
-const $customProperties = computed($definedStyles, (definedStyles) => {
+const $availableCustomProperties = computed($definedStyles, (definedStyles) => {
   const customProperties = new Set<StyleProperty>();
   for (const { property } of definedStyles) {
     if (property.startsWith("--")) {
@@ -224,7 +232,7 @@ const AdvancedPropertyValue = ({
   property: StyleProperty;
 }) => {
   const styleDecl = useComputedStyleDecl(property);
-  const customProperties = useStore($customProperties);
+  const availableCustomProperties = useStore($availableCustomProperties);
   const { items } = styleConfigByName(property);
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
@@ -267,7 +275,7 @@ const AdvancedPropertyValue = ({
           value: item.name,
         })),
         // very basic custom properties autocomplete
-        ...Array.from(customProperties).map((name) => ({
+        ...Array.from(availableCustomProperties).map((name) => ({
           type: "keyword" as const,
           value: name,
         })),
@@ -299,23 +307,46 @@ const initialProperties = new Set<StyleProperty>([
   "opacity",
 ]);
 
-const $advancedProperties = computed($definedStyles, (definedStyles) => {
-  // All properties used by the panels except the advanced panel
-  const baseProperties = new Set<StyleProperty>([]);
-  for (const { properties } of sections.values()) {
-    for (const property of properties) {
-      baseProperties.add(property);
+const $advancedProperties = computed(
+  [
+    $selectedInstanceSelector,
+    $styleSourceSelections,
+    $matchingBreakpoints,
+    $styles,
+  ],
+  (instanceSelector, styleSourceSelections, matchingBreakpoints, styles) => {
+    if (instanceSelector === undefined) {
+      return [];
     }
-  }
-  const advancedProperties = new Set<StyleProperty>(initialProperties);
-  for (const { property, listed } of definedStyles) {
-    // exclude properties from style panel UI unless edited in advanced section
-    if (baseProperties.has(property) === false || listed) {
-      advancedProperties.add(property);
+    const instanceAndRootSelector =
+      instanceSelector[0] === ROOT_INSTANCE_ID
+        ? instanceSelector
+        : // prevent showing properties inherited from root
+          // to not bloat advanced panel
+          instanceSelector;
+    const definedStyles = getDefinedStyles({
+      instanceSelector: instanceAndRootSelector,
+      matchingBreakpoints,
+      styleSourceSelections,
+      styles,
+    });
+    // All properties used by the panels except the advanced panel
+    const baseProperties = new Set<StyleProperty>([]);
+    for (const { properties } of sections.values()) {
+      for (const property of properties) {
+        baseProperties.add(property);
+      }
     }
+    const advancedProperties = new Set<StyleProperty>(initialProperties);
+    for (const { property, listed } of definedStyles) {
+      // exclude properties from style panel UI unless edited in advanced section
+      if (baseProperties.has(property) === false || listed) {
+        advancedProperties.add(property);
+      }
+    }
+    return Array.from(advancedProperties).reverse();
   }
-  return Array.from(advancedProperties).reverse();
-});
+);
 
 export const Section = () => {
   const [isAdding, setIsAdding] = useState(false);
diff --git a/apps/builder/app/builder/features/style-panel/shared/model.tsx b/apps/builder/app/builder/features/style-panel/shared/model.tsx
@@ -9,6 +9,8 @@ import {
 } from "@webstudio-is/css-engine";
 import {
   ROOT_INSTANCE_ID,
+  Styles,
+  StyleSourceSelections,
   type Breakpoint,
   type Instance,
   type StyleDecl,
@@ -73,7 +75,7 @@ const $instanceComponents = computed(
   }
 );
 
-const $matchingBreakpoints = computed(
+export const $matchingBreakpoints = computed(
   [$breakpoints, $selectedBreakpoint],
   (breakpoints, selectedBreakpoint) => {
     const sortedBreakpoints = Array.from(breakpoints.values()).sort(
@@ -90,62 +92,76 @@ const $matchingBreakpoints = computed(
   }
 );
 
+export const getDefinedStyles = ({
+  instanceSelector,
+  matchingBreakpoints: matchingBreakpointsArray,
+  styleSourceSelections,
+  styles,
+}: {
+  instanceSelector: InstanceSelector;
+  matchingBreakpoints: Breakpoint["id"][];
+  styleSourceSelections: StyleSourceSelections;
+  styles: Styles;
+}) => {
+  const definedStyles = new Set<StyleDecl>();
+  const inheritedStyleSources = new Set();
+  const instanceStyleSources = new Set();
+  const matchingBreakpoints = new Set(matchingBreakpointsArray);
+  for (const instanceId of instanceSelector) {
+    const styleSources = styleSourceSelections.get(instanceId)?.values;
+    if (styleSources) {
+      for (const styleSourceId of styleSources) {
+        if (instanceId === instanceSelector[0]) {
+          instanceStyleSources.add(styleSourceId);
+        } else {
+          inheritedStyleSources.add(styleSourceId);
+        }
+      }
+    }
+  }
+  for (const styleDecl of styles.values()) {
+    if (
+      matchingBreakpoints.has(styleDecl.breakpointId) &&
+      instanceStyleSources.has(styleDecl.styleSourceId)
+    ) {
+      definedStyles.add(styleDecl);
+    }
+    const inherited =
+      properties[styleDecl.property as keyof typeof properties]?.inherited ??
+      // custom properties are always inherited
+      true;
+    if (
+      matchingBreakpoints.has(styleDecl.breakpointId) &&
+      inheritedStyleSources.has(styleDecl.styleSourceId) &&
+      inherited
+    ) {
+      definedStyles.add(styleDecl);
+    }
+  }
+  return definedStyles;
+};
+
 export const $definedStyles = computed(
   [
     $selectedInstanceSelector,
     $styleSourceSelections,
     $matchingBreakpoints,
     $styles,
   ],
-  (
-    instanceSelector,
-    styleSourceSelections,
-    matchingBreakpointsArray,
-    styles
-  ) => {
-    const definedProperties = new Set<StyleDecl>();
+  (instanceSelector, styleSourceSelections, matchingBreakpoints, styles) => {
     if (instanceSelector === undefined) {
-      return definedProperties;
+      return new Set<StyleDecl>();
     }
     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);
-    for (const instanceId of instanceAndRootSelector) {
-      const styleSources = styleSourceSelections.get(instanceId)?.values;
-      if (styleSources) {
-        for (const styleSourceId of styleSources) {
-          if (instanceId === instanceAndRootSelector[0]) {
-            instanceStyleSources.add(styleSourceId);
-          } else {
-            inheritedStyleSources.add(styleSourceId);
-          }
-        }
-      }
-    }
-    for (const styleDecl of styles.values()) {
-      if (
-        matchingBreakpoints.has(styleDecl.breakpointId) &&
-        instanceStyleSources.has(styleDecl.styleSourceId)
-      ) {
-        definedProperties.add(styleDecl);
-      }
-      const inherited =
-        properties[styleDecl.property as keyof typeof properties]?.inherited ??
-        // custom properties are always inherited
-        true;
-      if (
-        matchingBreakpoints.has(styleDecl.breakpointId) &&
-        inheritedStyleSources.has(styleDecl.styleSourceId) &&
-        inherited
-      ) {
-        definedProperties.add(styleDecl);
-      }
-    }
-    return definedProperties;
+    return getDefinedStyles({
+      instanceSelector: instanceAndRootSelector,
+      matchingBreakpoints,
+      styleSourceSelections,
+      styles,
+    });
   }
 );
 
diff --git a/apps/builder/app/builder/features/style-panel/style-source-section.tsx b/apps/builder/app/builder/features/style-panel/style-source-section.tsx
@@ -401,21 +401,39 @@ const pasteStyles = async (
   const text = await navigator.clipboard.readText();
   const parsedStyles = parseCss(`selector{${text}}`);
   const breakpointId = $selectedBreakpoint.get()?.id;
-  if (breakpointId === undefined) {
+  const instanceId = $selectedInstanceSelector.get()?.[0];
+  if (breakpointId === undefined || instanceId === undefined) {
     return;
   }
-  serverSyncStore.createTransaction([$styles], (styles) => {
-    for (const { property, value } of parsedStyles) {
-      const styleDecl: StyleDecl = {
-        breakpointId,
-        styleSourceId,
-        state,
-        property,
-        value,
-      };
-      styles.set(getStyleDeclKey(styleDecl), styleDecl);
+  serverSyncStore.createTransaction(
+    [$styles, $styleSources, $styleSourceSelections],
+    (styles, styleSources, styleSourceSelections) => {
+      // add local style source if does not exist yet
+      if (styleSources.has(styleSourceId) === false) {
+        styleSources.set(styleSourceId, { type: "local", id: styleSourceId });
+        let styleSourceSelection = styleSourceSelections.get(instanceId);
+        // create new style source selection
+        if (styleSourceSelection === undefined) {
+          styleSourceSelection = { instanceId, values: [styleSourceId] };
+          styleSourceSelections.set(instanceId, styleSourceSelection);
+        }
+        // append style source to existing selection
+        if (styleSourceSelection.values.includes(styleSourceId) === false) {
+          styleSourceSelection.values.push(styleSourceId);
+        }
+      }
+      for (const { property, value } of parsedStyles) {
+        const styleDecl: StyleDecl = {
+          breakpointId,
+          styleSourceId,
+          state,
+          property,
+          value,
+        };
+        styles.set(getStyleDeclKey(styleDecl), styleDecl);
+      }
     }
-  });
+  );
 };
 
 const clearStyles = (styleSourceId: StyleSource["id"]) => {
