refactor: simplify css value input sizes (#4997)

- removed non-unit values from browser styles
- merged browser styles and unit sizes into single store; both objects
used in cize conversion
- use typed cssom to parse units instead of custom parser (sorry
firefox)

Author: TrySound

apps/builder/app/builder/features/style-panel/shared/css-value-input/convert-units.ts

@@ -1,10 +1,9 @@
 import type { Unit } from "@webstudio-is/css-engine";
-
-const convertibleUnits = ["px", "ch", "vw", "vh", "em", "rem"] as const;
-
-type ConvertibleUnit = (typeof convertibleUnits)[number];
-
-export type UnitSizes = Record<ConvertibleUnit, number>;
+import {
+  convertibleUnits,
+  type ConvertibleUnit,
+  type UnitSizes,
+} from "~/shared/nano-states";
 
 const isConvertibleUnit = (unit: Unit): unit is ConvertibleUnit =>
   convertibleUnits.includes(unit as ConvertibleUnit);

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

@@ -47,10 +47,7 @@ import {
   isValidDeclaration,
   propertiesData,
 } from "@webstudio-is/css-data";
-import {
-  $selectedInstanceBrowserStyle,
-  $selectedInstanceUnitSizes,
-} from "~/shared/nano-states";
+import { $selectedInstanceSizes } from "~/shared/nano-states";
 import { convertUnits } from "./convert-units";
 import { mergeRefs } from "@react-aria/utils";
 import { composeEventHandlers } from "~/shared/event-utils";
@@ -630,7 +627,7 @@ export const CssValueInput = ({
         return;
       }
 
-      const unitSizes = $selectedInstanceUnitSizes.get();
+      const { unitSizes, propertySizes } = $selectedInstanceSizes.get();
 
       // Value not edited by the user, we need to convert it to the new unit
       if (value.type === "unit") {
@@ -653,20 +650,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 browserPropertyValue = browserStyle?.[property];
-        const propertyValue =
-          browserPropertyValue?.type === "unit"
-            ? browserPropertyValue.value
-            : 0;
-        const propertyUnit =
-          browserPropertyValue?.type === "unit"
-            ? browserPropertyValue.unit
-            : "number";
-
+        const styleValue = propertySizes[hyphenateProperty(property)];
         const convertedValue = convertUnits(unitSizes)(
-          propertyValue,
-          propertyUnit,
+          styleValue?.value ?? 0,
+          styleValue?.unit ?? "number",
           unit
         );
 

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

@@ -1,10 +1,13 @@
+import { shallowEqual } from "shallow-equal";
+import warnOnce from "warn-once";
 import type { Instance } from "@webstudio-is/sdk";
+import type { CssProperty, UnitValue } from "@webstudio-is/css-engine";
+import { propertiesData } from "@webstudio-is/css-data";
 import { selectorIdAttribute } from "@webstudio-is/react-sdk";
 import { subscribeWindowResize } from "~/shared/dom-hooks";
 import {
   $isResizingCanvas,
-  $selectedInstanceBrowserStyle,
-  $selectedInstanceUnitSizes,
+  $selectedInstanceSizes,
   $selectedInstanceRenderState,
   $stylesIndex,
   $instances,
@@ -13,6 +16,8 @@ import {
   $styles,
   $selectedInstanceStates,
   $styleSourceSelections,
+  type UnitSizes,
+  type PropertySizes,
 } from "~/shared/nano-states";
 import {
   getAllElementsBoundingBox,
@@ -23,15 +28,11 @@ 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";
 
 const setOutline = (instanceId: Instance["id"], elements: HTMLElement[]) => {
   $selectedInstanceOutline.set({
@@ -78,6 +79,30 @@ const calculateUnitSizes = (element: HTMLElement): UnitSizes => {
   };
 };
 
+const calculatePropertySizes = (element: HTMLElement) => {
+  const computedStyle = getComputedStyle(element);
+  const propertySizes: PropertySizes = {};
+  for (const property in propertiesData) {
+    try {
+      const propertyValue = computedStyle.getPropertyValue(property);
+      const value = CSSStyleValue.parse(property, propertyValue);
+      if (value instanceof CSSUnitValue) {
+        propertySizes[property as CssProperty] = {
+          type: "unit",
+          // px | number | percent etc
+          unit:
+            value.unit === "percent" ? "%" : (value.unit as UnitValue["unit"]),
+          value: value.value,
+        };
+      }
+    } catch (error) {
+      // failed with unknown property like -moz-osx-font-smoothing
+      // also firefox does not support CSSStyleValue
+    }
+  }
+  return propertySizes;
+};
+
 const subscribeSelectedInstance = (
   selectedInstanceSelector: Readonly<InstanceSelector>,
   debounceEffect: (callback: () => void) => void
@@ -151,10 +176,9 @@ const subscribeSelectedInstance = (
 
     const [element] = elements;
     // trigger style recomputing every time instance styles are changed
-    $selectedInstanceBrowserStyle.set(getBrowserStyle(element));
-
     const unitSizes = calculateUnitSizes(element);
-    $selectedInstanceUnitSizes.set(unitSizes);
+    const propertySizes = calculatePropertySizes(element);
+    $selectedInstanceSizes.set({ unitSizes, propertySizes });
 
     const availableStates = new Set<string>();
     const instanceStyleSourceIds = new Set(

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

@@ -1,3 +1,4 @@
+import type { Simplify } from "type-fest";
 import { atom, computed, onSet } from "nanostores";
 import { nanoid } from "nanoid";
 import type { AuthPermit } from "@webstudio-is/trpc-interface/index.server";
@@ -15,16 +16,14 @@ import type {
   StyleSources,
   StyleSourceSelections,
 } from "@webstudio-is/sdk";
-import type { Style } from "@webstudio-is/css-engine";
+import type { CssProperty, UnitValue } 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 { AssetType } from "@webstudio-is/asset-uploader";
 import type { DragStartPayload } from "~/canvas/shared/use-drag-drop";
 import { type InstanceSelector } from "../tree-utils";
 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";
 import { $selectedInstance } from "../awareness";
 import type { UserPlanFeatures } from "../db/user-plan-features.server";
@@ -161,16 +160,28 @@ export type UploadingFileData = Simplify<
 
 export const $uploadingFilesDataStore = atom<UploadingFileData[]>([]);
 
-export const $selectedInstanceBrowserStyle = atom<undefined | Style>();
+export const convertibleUnits = ["px", "ch", "vw", "vh", "em", "rem"] as const;
+
+export type ConvertibleUnit = (typeof convertibleUnits)[number];
+
+export type UnitSizes = Record<ConvertibleUnit, number>;
+
+export type PropertySizes = Partial<Record<CssProperty, UnitValue>>;
 
 // 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,
+export const $selectedInstanceSizes = atom<{
+  unitSizes: UnitSizes;
+  propertySizes: PropertySizes;
+}>({
+  unitSizes: {
+    ch: 8,
+    vw: 3.2,
+    vh: 4.8,
+    em: 16,
+    rem: 16,
+    px: 1,
+  },
+  propertySizes: {},
 });
 
 /**

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

@@ -14,8 +14,7 @@ import {
   $assets,
   $selectedPageHash,
   $selectedInstanceSelector,
-  $selectedInstanceBrowserStyle,
-  $selectedInstanceUnitSizes,
+  $selectedInstanceSizes,
   $selectedInstanceRenderState,
   $hoveredInstanceSelector,
   $authTokenPermissions,
@@ -98,14 +97,7 @@ export const createObjectPool = () => {
     new NanostoresSyncObject("dataSourceVariables", $dataSourceVariables),
     new NanostoresSyncObject("resourceValues", $resourceValues),
     new NanostoresSyncObject("selectedPageHash", $selectedPageHash),
-    new NanostoresSyncObject(
-      "selectedInstanceBrowserStyle",
-      $selectedInstanceBrowserStyle
-    ),
-    new NanostoresSyncObject(
-      "selectedInstanceUnitSizes",
-      $selectedInstanceUnitSizes
-    ),
+    new NanostoresSyncObject("selectedInstanceSizes", $selectedInstanceSizes),
     new NanostoresSyncObject(
       "selectedInstanceRenderState",
       $selectedInstanceRenderState

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

@@ -212,9 +212,3 @@ export const StyleValue = z.union([
 ]);
 
 export type StyleValue = z.infer<typeof StyleValue>;
-
-const Style = z.record(z.string(), StyleValue);
-
-export type Style = {
-  [property in StyleProperty]?: StyleValue;
-} & { [property: CustomProperty]: StyleValue };