refactor: hyphenate builder (#5007)

TrySound · web-flow · commit 32120c33dc8a · 2025-03-16T10:06:22.000+07:00
Switched all left overs to hyphenated css properties including animation
section.

StyleProperty is only stored in data.
diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/set-css-property.test.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/set-css-property.test.tsx
@@ -56,7 +56,7 @@ test("Add Css Property styles", () => {
     data.styleSources,
     data.styleSourceSelections,
     data.styles
-  )("boxChildId", "viewTimelineName", {
+  )("boxChildId", "view-timeline-name", {
     type: "unparsed",
     value: "--view-timeline-name-child",
   });
@@ -66,7 +66,7 @@ test("Add Css Property styles", () => {
     data.styleSources,
     data.styleSourceSelections,
     data.styles
-  )("boxId", "viewTimelineName", {
+  )("boxId", "view-timeline-name", {
     type: "unparsed",
     value: "--view-timeline-name",
   });
diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/set-css-property.ts b/apps/builder/app/builder/features/settings-panel/props-section/animation/set-css-property.ts
@@ -1,15 +1,17 @@
-import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";
+import { nanoid } from "nanoid";
+import type { CssProperty, StyleValue } from "@webstudio-is/css-engine";
 import {
   getStyleDeclKey,
+  StyleDecl,
   type Breakpoints,
   type Instance,
   type Styles,
   type StyleSources,
   type StyleSourceSelections,
 } from "@webstudio-is/sdk";
-import { nanoid } from "nanoid";
 
 import { isBaseBreakpoint } from "~/shared/nano-states";
+import { camelCaseProperty } from "@webstudio-is/css-data";
 
 export const setListedCssProperty =
   (
@@ -19,7 +21,7 @@ export const setListedCssProperty =
     styleSourceSelections: StyleSourceSelections,
     styles: Styles
   ) =>
-  (instanceId: Instance["id"], property: StyleProperty, value: StyleValue) => {
+  (instanceId: Instance["id"], property: CssProperty, value: StyleValue) => {
     if (!styleSourceSelections.has(instanceId)) {
       const styleSourceId = nanoid();
       styleSources.set(styleSourceId, { type: "local", id: styleSourceId });
@@ -48,17 +50,12 @@ export const setListedCssProperty =
       throw new Error("Base breakpoint not found");
     }
 
-    const styleKey = getStyleDeclKey({
-      breakpointId: baseBreakpoint.id,
-      property,
-      styleSourceId: localStyleSorceId,
-    });
-
-    styles.set(styleKey, {
+    const styleDecl: StyleDecl = {
       breakpointId: baseBreakpoint.id,
-      property,
+      property: camelCaseProperty(property),
       styleSourceId: localStyleSorceId,
       value,
       listed: true,
-    });
+    };
+    styles.set(getStyleDeclKey(styleDecl), styleDecl);
   };
diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/subject-select.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/subject-select.tsx
@@ -49,7 +49,7 @@ const initSubjects = () => {
     selector.length !== 0;
     selector = selector.slice(1)
   ) {
-    const styleDecl = getInstanceStyleDecl("viewTimelineName", selector);
+    const styleDecl = getInstanceStyleDecl("view-timeline-name", selector);
     const instanceId = selector.at(0)!;
 
     const instance = instances.get(selector[0]);
@@ -139,7 +139,7 @@ export const SubjectSelect = ({
                   styleSources,
                   styleSourceSelections,
                   styles
-                )(subjectItem.instanceId, "viewTimelineName", {
+                )(subjectItem.instanceId, "view-timeline-name", {
                   type: "unparsed",
                   value: newValue.subject,
                 });
diff --git a/apps/builder/app/builder/features/style-panel/controls/font-family/font-family-control.tsx b/apps/builder/app/builder/features/style-panel/controls/font-family/font-family-control.tsx
@@ -1,13 +1,13 @@
+import { matchSorter } from "match-sorter";
+import { forwardRef, useMemo, useState, type ComponentProps } from "react";
 import {
   Combobox,
   EnhancedTooltip,
   Flex,
   NestedInputButton,
   FloatingPanel,
 } from "@webstudio-is/design-system";
-import { forwardRef, useMemo, useState, type ComponentProps } from "react";
 import { toValue } from "@webstudio-is/css-engine";
-import { matchSorter } from "match-sorter";
 import { UploadIcon } from "@webstudio-is/icons";
 import { keywordValues, parseCssValue } from "@webstudio-is/css-data";
 import { FontsManager } from "~/builder/shared/fonts-manager";
@@ -41,9 +41,9 @@ const matchOrSuggestToCreate = (
 };
 
 export const FontFamilyControl = () => {
-  const fontFamily = useComputedStyleDecl("fontFamily");
+  const fontFamily = useComputedStyleDecl("font-family");
   const value = fontFamily.cascadedValue;
-  const setValue = setProperty("fontFamily");
+  const setValue = setProperty("font-family");
   const [intermediateValue, setIntermediateValue] = useState<
     string | undefined
   >();
diff --git a/apps/builder/app/builder/features/style-panel/controls/font-weight/font-weight-control.tsx b/apps/builder/app/builder/features/style-panel/controls/font-weight/font-weight-control.tsx
@@ -1,16 +1,16 @@
+import { useEffect } from "react";
+import { useStore } from "@nanostores/react";
 import { Select, Text } from "@webstudio-is/design-system";
 import {
   type FontWeight,
   fontWeightNames,
   fontWeights,
 } from "@webstudio-is/fonts";
 import { toValue } from "@webstudio-is/css-engine";
-import { useEffect } from "react";
-import { useComputedStyles } from "../../shared/model";
-import { setProperty } from "../../shared/use-style-data";
 import { canvasApi } from "~/shared/canvas-api";
-import { useStore } from "@nanostores/react";
 import { $detectedFontsWeights } from "~/shared/nano-states";
+import { useComputedStyles } from "../../shared/model";
+import { setProperty } from "../../shared/use-style-data";
 
 const allFontWeights = Object.keys(fontWeights) as Array<FontWeight>;
 
@@ -24,8 +24,8 @@ const labels = new Map(
 export const FontWeightControl = () => {
   // We need the font family to determine which font weights are available
   const [fontWeight, fontFamily] = useComputedStyles([
-    "fontWeight",
-    "fontFamily",
+    "font-weight",
+    "font-family",
   ]);
   const detectedFontsWeights = useStore($detectedFontsWeights);
   const fontFamilyCss = toValue(fontFamily.usedValue);
@@ -39,7 +39,7 @@ export const FontWeightControl = () => {
   const selectedWeight =
     fontWeightNames.get(fontWeightCss) ?? (fontWeightCss as FontWeight);
 
-  const setValue = setProperty("fontWeight");
+  const setValue = setProperty("font-weight");
 
   const setFontWeight = (
     nextWeight: FontWeight,
diff --git a/apps/builder/app/builder/features/style-panel/controls/image/image-control.tsx b/apps/builder/app/builder/features/style-panel/controls/image/image-control.tsx
@@ -1,18 +1,14 @@
+import { useEffect, useState } from "react";
 import { useStore } from "@nanostores/react";
 import {
   Button,
   InputField,
   Flex,
   FloatingPanel,
 } from "@webstudio-is/design-system";
+import type { CssProperty, InvalidValue } from "@webstudio-is/css-engine";
 import { $assets } from "~/shared/nano-states";
 import { ImageManager } from "~/builder/shared/image-manager";
-import { useEffect, useState } from "react";
-import type {
-  CssProperty,
-  InvalidValue,
-  StyleProperty,
-} from "@webstudio-is/css-engine";
 import { useComputedStyleDecl } from "../../shared/model";
 import {
   getRepeatedStyleItem,
@@ -36,7 +32,7 @@ export const ImageControl = ({
   property,
   index,
 }: {
-  property: StyleProperty | CssProperty;
+  property: CssProperty;
   index: number;
 }) => {
   const assets = useStore($assets);
diff --git a/apps/builder/app/builder/features/style-panel/controls/select/select-control.tsx b/apps/builder/app/builder/features/style-panel/controls/select/select-control.tsx
@@ -6,11 +6,9 @@ import {
   parseCssValue,
 } from "@webstudio-is/css-data";
 import {
-  hyphenateProperty,
-  StyleValue,
   toValue,
+  type StyleValue,
   type CssProperty,
-  type StyleProperty,
 } from "@webstudio-is/css-engine";
 import { Box, Select, theme } from "@webstudio-is/design-system";
 import { toKebabCase } from "../../shared/keyword-utils";
@@ -30,7 +28,7 @@ export const SelectControl = ({
   index,
   items,
 }: {
-  property: StyleProperty | CssProperty;
+  property: CssProperty;
   index?: number;
   items?: Array<{ label: string; name: string }>;
 }) => {
@@ -47,9 +45,7 @@ export const SelectControl = ({
     }
   };
   const options =
-    items?.map(({ name }) => name) ??
-    keywordValues[hyphenateProperty(property)] ??
-    [];
+    items?.map(({ name }) => name) ?? keywordValues[property] ?? [];
 
   // We can't render an empty string as a value when display was added but without a value.
   // One case is when advanced property is being added, but no value is set.
@@ -86,7 +82,7 @@ export const SelectControl = ({
           return;
         }
         // Preview on mouse enter or focus.
-        const nextValue = parseCssValue(camelCaseProperty(property), name);
+        const nextValue = parseCssValue(property, name);
         setValue(nextValue, { isEphemeral: true });
       }}
       onOpenChange={(isOpen) => {
diff --git a/apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx b/apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx
@@ -11,12 +11,7 @@ import {
   ToggleGroupButton,
   Tooltip,
 } from "@webstudio-is/design-system";
-import {
-  hyphenateProperty,
-  toValue,
-  type CssProperty,
-  type StyleProperty,
-} from "@webstudio-is/css-engine";
+import { toValue, type CssProperty } from "@webstudio-is/css-engine";
 import { humanizeString } from "~/shared/string-utils";
 import { useComputedStyles } from "../../shared/model";
 import { createBatchUpdate } from "../../shared/use-style-data";
@@ -42,7 +37,7 @@ export const ToggleGroupTooltip = ({
   label?: string;
   code?: string;
   description: string | undefined;
-  properties: (StyleProperty | CssProperty)[];
+  properties: CssProperty[];
   isAdvanced?: boolean;
   children: ReactNode;
 }) => {
@@ -103,7 +98,7 @@ export const ToggleGroupControl = ({
   items,
 }: {
   label?: string;
-  properties: [CssProperty | StyleProperty, ...(CssProperty | StyleProperty)[]];
+  properties: [CssProperty, ...CssProperty[]];
   items: Array<{
     child: JSX.Element;
     value: string;
@@ -151,12 +146,12 @@ export const ToggleGroupControl = ({
           isAdvanced={isAdvanced}
           label={label}
           code={properties
-            .map((property) => `${hyphenateProperty(property)}: ${item.value};`)
+            .map((property) => `${property}: ${item.value};`)
             .join("\n")}
           description={
             item.description ??
             declarationDescriptions[
-              `${camelCaseProperty(properties[0])}:${item.value}` as keyof typeof declarationDescriptions
+              `${camelCaseProperty(properties[0])}:${item.value}`
             ]
           }
           properties={properties}
diff --git a/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx b/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx
@@ -34,9 +34,7 @@ export const ToggleControl = ({
   const isAdvanced =
     computedStyleDecl.source.name !== "default" && currentItem === undefined;
   const description =
-    declarationDescriptions[
-      `${camelCaseProperty(property)}:${currentValue}` as keyof typeof declarationDescriptions
-    ];
+    declarationDescriptions[`${camelCaseProperty(property)}:${currentValue}`];
 
   return (
     <PropertyValueTooltip
diff --git a/apps/builder/app/builder/features/style-panel/property-label.tsx b/apps/builder/app/builder/features/style-panel/property-label.tsx
@@ -2,12 +2,7 @@ import { atom } from "nanostores";
 import { useStore } from "@nanostores/react";
 import { useState, type ReactNode } from "react";
 import { AlertIcon, ResetIcon } from "@webstudio-is/icons";
-import {
-  hyphenateProperty,
-  toValue,
-  type CssProperty,
-  type StyleProperty,
-} from "@webstudio-is/css-engine";
+import { toValue, type CssProperty } from "@webstudio-is/css-engine";
 import { propertiesData } from "@webstudio-is/css-data";
 import {
   Button,
@@ -238,7 +233,7 @@ export const PropertyLabel = ({
 }: {
   label: string;
   description?: string;
-  properties: [StyleProperty | CssProperty, ...(StyleProperty | CssProperty)[]];
+  properties: [CssProperty, ...CssProperty[]];
 }) => {
   const styles = useComputedStyles(properties);
   const styleValueSourceColor = getPriorityStyleValueSource(styles);
@@ -279,7 +274,7 @@ export const PropertyLabel = ({
               resetProperty();
               setIsOpen(false);
             }}
-            link={propertiesData[hyphenateProperty(properties[0])]?.mdnUrl}
+            link={propertiesData[properties[0]]?.mdnUrl}
           />
         }
       >
@@ -300,7 +295,7 @@ export const PropertySectionLabel = ({
 }: {
   label: string;
   description: string | undefined;
-  properties: [StyleProperty | CssProperty, ...(StyleProperty | CssProperty)[]];
+  properties: [CssProperty, ...CssProperty[]];
 }) => {
   const styles = useComputedStyles(properties);
   const styleValueSourceColor = getPriorityStyleValueSource(styles);
@@ -339,7 +334,7 @@ export const PropertySectionLabel = ({
               resetProperty();
               setIsOpen(false);
             }}
-            link={propertiesData[hyphenateProperty(properties[0])]?.mdnUrl}
+            link={propertiesData[properties[0]]?.mdnUrl}
           />
         }
       >
@@ -369,10 +364,7 @@ export const PropertyInlineLabel = ({
   label: string;
   title?: string;
   description?: string;
-  properties?: [
-    StyleProperty | CssProperty,
-    ...(StyleProperty | CssProperty)[],
-  ];
+  properties?: [CssProperty, ...CssProperty[]];
   disabled?: boolean;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -401,7 +393,7 @@ export const PropertyInlineLabel = ({
                   userSelect="text"
                   css={{ whiteSpace: "break-spaces", cursor: "text" }}
                 >
-                  {properties.map(hyphenateProperty).join("\n")}
+                  {properties.join("\n")}
                 </Text>
               )}
               <Text>{description}</Text>
@@ -428,7 +420,7 @@ export const PropertyValueTooltip = ({
 }: {
   label: string;
   description: string | undefined;
-  properties: [StyleProperty | CssProperty, ...(StyleProperty | CssProperty)[]];
+  properties: [CssProperty, ...CssProperty[]];
   isAdvanced?: boolean;
   children: ReactNode;
 }) => {
@@ -476,7 +468,7 @@ export const PropertyValueTooltip = ({
             resetProperty();
             setIsOpen(false);
           }}
-          link={propertiesData[hyphenateProperty(properties[0])]?.mdnUrl}
+          link={propertiesData[properties[0]]?.mdnUrl}
         />
       }
     >
diff --git a/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadows.tsx b/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadows.tsx
@@ -68,7 +68,7 @@ const getItemProps = (layer: StyleValue, computedLayer?: StyleValue) => {
 };
 
 export const Section = () => {
-  const styleDecl = useComputedStyleDecl("boxShadow");
+  const styleDecl = useComputedStyleDecl("box-shadow");
 
   return (
     <RepeatedStyleSection
diff --git a/apps/builder/app/builder/features/style-panel/sections/text-shadows/text-shadows.tsx b/apps/builder/app/builder/features/style-panel/sections/text-shadows/text-shadows.tsx
@@ -55,7 +55,7 @@ const getItemProps = (layer: StyleValue, computedLayer?: StyleValue) => {
 };
 
 export const Section = () => {
-  const styleDecl = useComputedStyleDecl("textShadow");
+  const styleDecl = useComputedStyleDecl("text-shadow");
 
   return (
     <RepeatedStyleSection
diff --git a/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx b/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx
diff --git a/apps/builder/app/builder/features/style-panel/shared/model.tsx b/apps/builder/app/builder/features/style-panel/shared/model.tsx
diff --git a/apps/builder/app/builder/features/style-panel/shared/use-style-data.ts b/apps/builder/app/builder/features/style-panel/shared/use-style-data.ts
diff --git a/apps/builder/app/builder/shared/css-editor/add-style-input.tsx b/apps/builder/app/builder/shared/css-editor/add-style-input.tsx
diff --git a/apps/builder/app/shared/copy-paste/plugin-webflow/styles.ts b/apps/builder/app/shared/copy-paste/plugin-webflow/styles.ts
