Remove 2 updates

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

@@ -44,10 +44,6 @@ import {
   isValidDeclaration,
   properties,
 } from "@webstudio-is/css-data";
-import {
-  $selectedInstanceBrowserStyle,
-  $selectedInstanceUnitSizes,
-} from "~/shared/nano-states";
 import { convertUnits } from "./convert-units";
 import { mergeRefs } from "@react-aria/utils";
 import { composeEventHandlers } from "~/shared/event-utils";
@@ -58,6 +54,8 @@ import {
   isComplexValue,
   ValueEditorDialog,
 } from "./value-editor-dialog";
+import { canvasApi } from "~/shared/canvas-api";
+import { $selectedInstanceSelector } from "~/shared/nano-states";
 
 // We need to enable scrub on properties that can have numeric value.
 const canBeNumber = (property: StyleProperty, value: CssValueInputValue) => {
@@ -569,7 +567,8 @@ export const CssValueInput = ({
         return;
       }
 
-      const unitSizes = $selectedInstanceUnitSizes.get();
+      const selectedInstanceSelector = $selectedInstanceSelector.get();
+      const unitSizes = canvasApi.calculateUnitSizes(selectedInstanceSelector);
 
       // Value not edited by the user, we need to convert it to the new unit
       if (value.type === "unit") {
@@ -592,7 +591,10 @@ export const CssValueInput = ({
 
       // value is a keyword or non numeric, try get browser style value and convert it
       if (value.type === "keyword" || value.type === "intermediate") {
-        const browserStyle = $selectedInstanceBrowserStyle.get();
+        const browserStyle = canvasApi.getBrowserStyle(
+          selectedInstanceSelector
+        );
+
         const browserPropertyValue = browserStyle?.[property];
         const propertyValue =
           browserPropertyValue?.type === "unit"

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

@@ -32,6 +32,8 @@ export const StylePanel = () => {
   const display = useParentComputedStyleDecl("display");
   const displayValue = toValue(display.computedValue);
 
+  console.log("render");
+
   // 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.
   // See <SelectedInstanceConnector> for more details.

apps/builder/app/canvas/features/webstudio-component/get-browser-style.ts

@@ -1,6 +1,9 @@
 import type { Style, StyleValue, Unit } from "@webstudio-is/css-engine";
 import { keywordValues } from "@webstudio-is/css-data";
 import { properties, units } from "@webstudio-is/css-data";
+import { getAllElementsByInstanceSelector } from "~/shared/dom-utils";
+import type { InstanceSelector } from "~/shared/tree-utils";
+import type { UnitSizes } from "~/builder/features/style-panel/shared/css-value-input/convert-units";
 
 const unitsList = Object.values(units).flat();
 const unitRegex = new RegExp(`${unitsList.join("|")}`);
@@ -52,8 +55,23 @@ const parseValue = (
   };
 };
 
-export const getBrowserStyle = (element?: Element): Style => {
+export const getBrowserStyle = (
+  instanceSelector: InstanceSelector | undefined
+): Style => {
   const browserStyle: Style = {};
+
+  if (instanceSelector === undefined) {
+    return browserStyle;
+  }
+
+  const elements = getAllElementsByInstanceSelector(instanceSelector);
+
+  if (elements.length === 0) {
+    return browserStyle;
+  }
+
+  const element = elements[0];
+
   if (element === undefined) {
     return browserStyle;
   }
@@ -69,3 +87,65 @@ export const getBrowserStyle = (element?: Element): Style => {
   }
   return browserStyle;
 };
+
+// Init with some defaults to avoid undefined
+const defaultUnitSizes: UnitSizes = {
+  ch: 8,
+  vw: 3.2,
+  vh: 4.8,
+  em: 16,
+  rem: 16,
+  px: 1,
+};
+
+export const calculateUnitSizes = (
+  instanceSelector: InstanceSelector | undefined
+): UnitSizes => {
+  if (instanceSelector === undefined) {
+    return defaultUnitSizes;
+  }
+
+  const elements = getAllElementsByInstanceSelector(instanceSelector);
+
+  if (elements.length === 0) {
+    return defaultUnitSizes;
+  }
+
+  const element = elements[0];
+
+  if (element === undefined) {
+    return defaultUnitSizes;
+  }
+
+  // Based on this https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions/8876069#8876069
+  // this is crossbrowser way to get viewport sizes vw vh in px
+  const vw =
+    Math.max(document.documentElement.clientWidth, window.innerWidth) / 100;
+  const vh =
+    Math.max(document.documentElement.clientHeight, window.innerHeight) / 100;
+
+  // em in px is equal to current computed style for font size
+  const em = Number.parseFloat(getComputedStyle(element).fontSize);
+
+  // rem in px is equal to root computed style for font size
+  const rem = Number.parseFloat(
+    getComputedStyle(document.documentElement).fontSize
+  );
+
+  // we create a node with 1ch width, measure it in px and remove it
+  const node = document.createElement("div");
+  node.style.width = "1ch";
+  node.style.position = "absolute";
+  element.appendChild(node);
+  const ch = Number.parseFloat(getComputedStyle(node).width);
+  element.removeChild(node);
+
+  return {
+    ch, // 1ch in pixels
+    vw, // 1vw in pixels
+    vh, // 1vh in pixels
+    em, // 1em in pixels
+    rem, // 1rem in pixels
+    px: 1, // always 1, simplifies conversions and types, i.e valueTo = valueFrom * unitSizes[from] / unitSizes[to]
+  };
+};

apps/builder/app/canvas/instance-selected.ts

@@ -3,9 +3,7 @@ import { idAttribute, selectorIdAttribute } from "@webstudio-is/react-sdk";
 import { subscribeWindowResize } from "~/shared/dom-hooks";
 import {
   $isResizingCanvas,
-  $selectedInstanceBrowserStyle,
   $selectedInstanceIntanceToTag,
-  $selectedInstanceUnitSizes,
   $selectedInstanceRenderState,
   $stylesIndex,
   $instances,
@@ -25,12 +23,10 @@ import {
 } from "~/shared/dom-utils";
 import { subscribeScrollState } from "~/canvas/shared/scroll-state";
 import { $selectedInstanceOutline } from "~/shared/nano-states";
-import type { UnitSizes } from "~/builder/features/style-panel/shared/css-value-input/convert-units";
 import {
   hasCollapsedMutationRecord,
   setDataCollapsed,
 } from "~/canvas/collapsed";
-import { getBrowserStyle } from "./features/webstudio-component/get-browser-style";
 import type { InstanceSelector } from "~/shared/tree-utils";
 import { shallowEqual } from "shallow-equal";
 import warnOnce from "warn-once";
@@ -49,40 +45,6 @@ const hideOutline = () => {
   $selectedInstanceOutline.set(undefined);
 };
 
-const calculateUnitSizes = (element: HTMLElement): UnitSizes => {
-  // Based on this https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions/8876069#8876069
-  // this is crossbrowser way to get viewport sizes vw vh in px
-  const vw =
-    Math.max(document.documentElement.clientWidth, window.innerWidth) / 100;
-  const vh =
-    Math.max(document.documentElement.clientHeight, window.innerHeight) / 100;
-
-  // em in px is equal to current computed style for font size
-  const em = Number.parseFloat(getComputedStyle(element).fontSize);
-
-  // rem in px is equal to root computed style for font size
-  const rem = Number.parseFloat(
-    getComputedStyle(document.documentElement).fontSize
-  );
-
-  // we create a node with 1ch width, measure it in px and remove it
-  const node = document.createElement("div");
-  node.style.width = "1ch";
-  node.style.position = "absolute";
-  element.appendChild(node);
-  const ch = Number.parseFloat(getComputedStyle(node).width);
-  element.removeChild(node);
-
-  return {
-    ch, // 1ch in pixels
-    vw, // 1vw in pixels
-    vh, // 1vh in pixels
-    em, // 1em in pixels
-    rem, // 1rem in pixels
-    px: 1, // always 1, simplifies conversions and types, i.e valueTo = valueFrom * unitSizes[from] / unitSizes[to]
-  };
-};
-
 export const getElementAndAncestorInstanceTags = (
   instanceSelector: Readonly<InstanceSelector>
 ) => {
@@ -186,7 +148,6 @@ const subscribeSelectedInstance = (
 
     const [element] = elements;
     // trigger style recomputing every time instance styles are changed
-    $selectedInstanceBrowserStyle.set(getBrowserStyle(element));
 
     // Map self and ancestor instance ids to tag names
     const instanceToTag = getElementAndAncestorInstanceTags(
@@ -199,12 +160,9 @@ const subscribeSelectedInstance = (
         [...(instanceToTag?.entries() ?? [])].flat()
       )
     ) {
-      $selectedInstanceIntanceToTag.set(instanceToTag);
+      // $selectedInstanceIntanceToTag.set(instanceToTag);
     }
 
-    const unitSizes = calculateUnitSizes(element);
-    $selectedInstanceUnitSizes.set(unitSizes);
-
     const availableStates = new Set<string>();
     const instanceStyleSourceIds = new Set(
       $styleSourceSelections.get().get(instanceId)?.values

apps/builder/app/shared/canvas-api.ts

@@ -6,6 +6,10 @@ import invariant from "tiny-invariant";
 import { $canvasIframeState } from "./nano-states";
 import { getElementAndAncestorInstanceTags } from "~/canvas/instance-selected";
 import { detectSupportedFontWeights } from "~/canvas/shared/font-weight-support";
+import {
+  getBrowserStyle,
+  calculateUnitSizes,
+} from "~/canvas/features/webstudio-component/get-browser-style";
 
 const apiWindowNamespace = "__webstudio__$__canvasApi";
 
@@ -17,6 +21,8 @@ const _canvasApi = {
   monitorForExternal,
   getElementAndAncestorInstanceTags,
   detectSupportedFontWeights,
+  getBrowserStyle,
+  calculateUnitSizes,
 };
 
 declare global {

apps/builder/app/shared/nano-states/misc.ts

@@ -15,15 +15,13 @@ import type {
   StyleSources,
   StyleSourceSelections,
 } from "@webstudio-is/sdk";
-import type { Style } from "@webstudio-is/css-engine";
 import type { Project } from "@webstudio-is/project";
 import type { MarketplaceProduct } from "@webstudio-is/project-build";
 import type { TokenPermissions } from "@webstudio-is/authorization-token";
 import type { DragStartPayload } from "~/canvas/shared/use-drag-drop";
 import { type InstanceSelector } from "../tree-utils";
 import type { HtmlTags } from "html-tags";
 import { $selectedInstanceSelector } from "./instances";
-import type { UnitSizes } from "~/builder/features/style-panel/shared/css-value-input/convert-units";
 import type { Simplify } from "type-fest";
 import type { AssetType } from "@webstudio-is/asset-uploader";
 import type { ChildrenOrientation } from "node_modules/@webstudio-is/design-system/src/components/primitives/dnd/geometry-utils";
@@ -147,18 +145,6 @@ export type UploadingFileData = Simplify<
 
 export const $uploadingFilesDataStore = atom<UploadingFileData[]>([]);
 
-export const $selectedInstanceBrowserStyle = atom<undefined | Style>();
-
-// Init with some defaults to avoid undefined
-export const $selectedInstanceUnitSizes = atom<UnitSizes>({
-  ch: 8,
-  vw: 3.2,
-  vh: 4.8,
-  em: 16,
-  rem: 16,
-  px: 1,
-});
-
 /**
  * instanceId => tagName store for selected instance and its ancestors
  */

apps/builder/app/shared/sync/sync-stores.ts

@@ -14,8 +14,6 @@ import {
   $assets,
   $selectedPageHash,
   $selectedInstanceSelector,
-  $selectedInstanceBrowserStyle,
-  $selectedInstanceUnitSizes,
   $selectedInstanceIntanceToTag,
   $selectedInstanceRenderState,
   $hoveredInstanceSelector,
@@ -98,18 +96,10 @@ export const createObjectPool = () => {
     new NanostoresSyncObject("dataSourceVariables", $dataSourceVariables),
     new NanostoresSyncObject("resourceValues", $resourceValues),
     new NanostoresSyncObject("selectedPageHash", $selectedPageHash),
-    new NanostoresSyncObject(
-      "selectedInstanceBrowserStyle",
-      $selectedInstanceBrowserStyle
-    ),
     new NanostoresSyncObject(
       "selectedInstanceIntanceToTag",
       $selectedInstanceIntanceToTag
     ),
-    new NanostoresSyncObject(
-      "selectedInstanceUnitSizes",
-      $selectedInstanceUnitSizes
-    ),
     new NanostoresSyncObject(
       "selectedInstanceRenderState",
       $selectedInstanceRenderState