refactor: migrate border and outline to hyphenated properties (#4960)

TrySound · web-flow · commit 6a453b94dc12 · 2025-03-07T17:16:16.000+07:00
Migrated two more sections and made ComputedStyleDecl['property'] more
strict instead of just a string, now can get rid from `as StyleProperty`
casting all over the codebase.
diff --git a/apps/builder/app/builder/features/navigator/css-preview.tsx b/apps/builder/app/builder/features/navigator/css-preview.tsx
@@ -11,7 +11,7 @@ import {
   hyphenateProperty,
   mergeStyles,
 } from "@webstudio-is/css-engine";
-import type { StyleMap, StyleProperty } from "@webstudio-is/css-engine";
+import type { StyleMap } from "@webstudio-is/css-engine";
 import { CollapsibleSection } from "~/builder/shared/collapsible-section";
 import { highlightCss } from "~/builder/shared/code-highlight";
 import type { ComputedStyleDecl } from "~/shared/style-object-model";
@@ -37,7 +37,7 @@ const getCssText = (
 
   // Aggregate styles by category so we can group them when rendering.
   for (const styleDecl of definedComputedStyles) {
-    const property = hyphenateProperty(styleDecl.property) as StyleProperty;
+    const property = hyphenateProperty(styleDecl.property);
     let group;
     if (
       styleDecl.source.name === "local" ||
diff --git a/apps/builder/app/builder/features/style-panel/sections/borders/border-color.tsx b/apps/builder/app/builder/features/style-panel/sections/borders/border-color.tsx
@@ -1,4 +1,4 @@
-import { toValue, type StyleProperty } from "@webstudio-is/css-engine";
+import { toValue, type CssProperty } from "@webstudio-is/css-engine";
 import { Box, Grid } from "@webstudio-is/design-system";
 import { styleConfigByName } from "../../shared/configs";
 import { rowCss } from "./utils";
@@ -11,13 +11,13 @@ import {
 import { createBatchUpdate } from "../../shared/use-style-data";
 
 export const properties = [
-  "borderTopColor",
-  "borderRightColor",
-  "borderBottomColor",
-  "borderLeftColor",
-] satisfies [StyleProperty, ...StyleProperty[]];
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+] satisfies [CssProperty, ...CssProperty[]];
 
-const { items } = styleConfigByName("borderTopColor");
+const { items } = styleConfigByName("border-top-color");
 
 export const BorderColor = () => {
   const styles = useComputedStyles(properties);
@@ -54,7 +54,7 @@ export const BorderColor = () => {
             <ColorPicker
               disabled={isAdvanced}
               currentColor={currentColor}
-              property={local.property as StyleProperty}
+              property={local.property}
               value={value}
               getOptions={() => [
                 ...items.map((item) => ({
diff --git a/apps/builder/app/builder/features/style-panel/sections/borders/border-property.tsx b/apps/builder/app/builder/features/style-panel/sections/borders/border-property.tsx
@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
-import type { StyleProperty } from "@webstudio-is/css-engine";
-import { toValue } from "@webstudio-is/css-engine";
+import type { CssProperty } from "@webstudio-is/css-engine";
+import { hyphenateProperty, toValue } from "@webstudio-is/css-engine";
 import { Box, Grid, ToggleButton } from "@webstudio-is/design-system";
 import { CssValueInputContainer } from "../../shared/css-value-input";
 import { styleConfigByName } from "../../shared/configs";
@@ -25,14 +25,14 @@ export const BorderProperty = ({
 }: {
   individualModeIcon?: ReactNode;
   borderPropertyOptions: Partial<{
-    [property in StyleProperty]: { icon?: ReactNode };
+    [property in CssProperty]: { icon?: ReactNode };
   }>;
   label: string;
   description: string;
 }) => {
   const borderProperties = Object.keys(borderPropertyOptions) as [
-    StyleProperty,
-    ...StyleProperty[],
+    CssProperty,
+    ...CssProperty[],
   ];
   const styles = useComputedStyles(borderProperties);
   const styleValueSourceColor = getPriorityStyleValueSource(styles);
@@ -118,9 +118,10 @@ export const BorderProperty = ({
             <CssValueInputContainer
               key={styleDecl.property}
               icon={
-                borderPropertyOptions[styleDecl.property as StyleProperty]?.icon
+                borderPropertyOptions[hyphenateProperty(styleDecl.property)]
+                  ?.icon
               }
-              property={styleDecl.property as StyleProperty}
+              property={styleDecl.property}
               styleSource={styleDecl.source.name}
               getOptions={() =>
                 styleConfigByName(firstPropertyName).items.map((item) => ({
@@ -129,7 +130,7 @@ export const BorderProperty = ({
                 }))
               }
               value={styleDecl.cascadedValue}
-              setValue={setProperty(styleDecl.property as StyleProperty)}
+              setValue={setProperty(styleDecl.property)}
               deleteProperty={deleteProperty}
             />
           ))}
diff --git a/apps/builder/app/builder/features/style-panel/sections/borders/border-radius.tsx b/apps/builder/app/builder/features/style-panel/sections/borders/border-radius.tsx
@@ -1,4 +1,4 @@
-import type { StyleProperty } from "@webstudio-is/css-engine";
+import type { CssProperty } from "@webstudio-is/css-engine";
 import {
   BorderRadiusIndividualIcon,
   BorderRadiusBottomRightIcon,
@@ -9,26 +9,26 @@ import {
 import { BorderProperty } from "./border-property";
 
 export const properties = [
-  "borderTopLeftRadius",
-  "borderTopRightRadius",
-  "borderBottomLeftRadius",
-  "borderBottomRightRadius",
-] satisfies Array<StyleProperty>;
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-bottom-left-radius",
+  "border-bottom-right-radius",
+] satisfies Array<CssProperty>;
 
 const borderPropertyOptions = {
-  borderTopLeftRadius: {
+  "border-top-left-radius": {
     icon: <BorderRadiusTopLeftIcon />,
   },
-  borderTopRightRadius: {
+  "border-top-right-radius": {
     icon: <BorderRadiusTopRightIcon />,
   },
-  borderBottomLeftRadius: {
+  "border-bottom-left-radius": {
     icon: <BorderRadiusBottomLeftIcon />,
   },
-  borderBottomRightRadius: {
+  "border-bottom-right-radius": {
     icon: <BorderRadiusBottomRightIcon />,
   },
-} as const satisfies Partial<{ [property in StyleProperty]: unknown }>;
+} as const satisfies Partial<{ [property in CssProperty]: unknown }>;
 
 export const BorderRadius = () => {
   return (
diff --git a/apps/builder/app/builder/features/style-panel/sections/borders/border-style.tsx b/apps/builder/app/builder/features/style-panel/sections/borders/border-style.tsx
@@ -1,4 +1,4 @@
-import type { StyleProperty } from "@webstudio-is/css-engine";
+import type { CssProperty } from "@webstudio-is/css-engine";
 import { Box, Grid } from "@webstudio-is/design-system";
 import {
   MinusIcon,
@@ -14,11 +14,11 @@ import {
 import { rowCss } from "./utils";
 import { PropertyLabel } from "../../property-label";
 
-export const properties: [StyleProperty, ...StyleProperty[]] = [
-  "borderTopStyle",
-  "borderRightStyle",
-  "borderLeftStyle",
-  "borderBottomStyle",
+export const properties: [CssProperty, ...CssProperty[]] = [
+  "border-top-style",
+  "border-right-style",
+  "border-left-style",
+  "border-bottom-style",
 ];
 
 export const BorderStyle = () => {
diff --git a/apps/builder/app/builder/features/style-panel/sections/borders/border-width.tsx b/apps/builder/app/builder/features/style-panel/sections/borders/border-width.tsx
@@ -1,4 +1,4 @@
-import type { StyleProperty } from "@webstudio-is/css-engine";
+import type { CssProperty } from "@webstudio-is/css-engine";
 import {
   BorderWidthIndividualIcon,
   BorderWidthTopIcon,
@@ -9,26 +9,26 @@ import {
 import { BorderProperty } from "./border-property";
 
 export const properties = [
-  "borderTopWidth",
-  "borderRightWidth",
-  "borderBottomWidth",
-  "borderLeftWidth",
-] satisfies Array<StyleProperty>;
+  "border-top-width",
+  "border-right-width",
+  "border-bottom-width",
+  "border-left-width",
+] satisfies CssProperty[];
 
 const borderPropertyOptions = {
-  borderTopWidth: {
+  "border-top-width": {
     icon: <BorderWidthTopIcon />,
   },
-  borderRightWidth: {
+  "border-right-width": {
     icon: <BorderWidthRightIcon />,
   },
-  borderLeftWidth: {
+  "border-left-width": {
     icon: <BorderWidthLeftIcon />,
   },
-  borderBottomWidth: {
+  "border-bottom-width": {
     icon: <BorderWidthBottomIcon />,
   },
-} as const satisfies Partial<{ [property in StyleProperty]: unknown }>;
+} as const satisfies Partial<{ [property in CssProperty]: unknown }>;
 
 export const BorderWidth = () => {
   return (
diff --git a/apps/builder/app/builder/features/style-panel/sections/borders/borders.tsx b/apps/builder/app/builder/features/style-panel/sections/borders/borders.tsx
@@ -1,4 +1,4 @@
-import type { StyleProperty } from "@webstudio-is/css-engine";
+import type { CssProperty } from "@webstudio-is/css-engine";
 import { StyleSection } from "../../shared/style-section";
 import {
   BorderRadius,
@@ -22,7 +22,7 @@ export const properties = [
   ...borderRadiusProperties,
   ...borderStyleProperties,
   ...borderWidthProperties,
-] satisfies Array<StyleProperty>;
+] satisfies CssProperty[];
 
 export const Section = () => {
   return (
diff --git a/apps/builder/app/builder/features/style-panel/sections/outline/outline.tsx b/apps/builder/app/builder/features/style-panel/sections/outline/outline.tsx
@@ -6,22 +6,22 @@ import {
   XSmallIcon,
 } from "@webstudio-is/icons";
 import { propertyDescriptions } from "@webstudio-is/css-data";
-import { toValue, type StyleProperty } from "@webstudio-is/css-engine";
+import { toValue, type CssProperty } from "@webstudio-is/css-engine";
 import { ColorControl, TextControl } from "../../controls";
 import { StyleSection } from "../../shared/style-section";
 import { PropertyLabel } from "../../property-label";
 import { useComputedStyleDecl } from "../../shared/model";
 import { ToggleGroupControl } from "../../controls/toggle-group/toggle-group-control";
 
 export const properties = [
-  "outlineStyle",
-  "outlineColor",
-  "outlineWidth",
-  "outlineOffset",
-] satisfies Array<StyleProperty>;
+  "outline-style",
+  "outline-color",
+  "outline-width",
+  "outline-offset",
+] satisfies CssProperty[];
 
 export const Section = () => {
-  const outlineStyle = useComputedStyleDecl("outlineStyle");
+  const outlineStyle = useComputedStyleDecl("outline-style");
   const outlineStyleValue = toValue(outlineStyle.cascadedValue);
 
   return (
@@ -35,11 +35,11 @@ export const Section = () => {
         <PropertyLabel
           label="Style"
           description={propertyDescriptions.outlineStyle}
-          properties={["outlineStyle"]}
+          properties={["outline-style"]}
         />
         <ToggleGroupControl
           label="Style"
-          properties={["outlineStyle"]}
+          properties={["outline-style"]}
           items={[
             { child: <XSmallIcon />, value: "none" },
             { child: <MinusIcon />, value: "solid" },
@@ -53,21 +53,21 @@ export const Section = () => {
             <PropertyLabel
               label="Color"
               description={propertyDescriptions.outlineColor}
-              properties={["outlineColor"]}
+              properties={["outline-color"]}
             />
-            <ColorControl property="outlineColor" />
+            <ColorControl property="outline-color" />
             <PropertyLabel
               label="Width"
               description={propertyDescriptions.outlineWidth}
-              properties={["outlineWidth"]}
+              properties={["outline-width"]}
             />
-            <TextControl property="outlineWidth" />
+            <TextControl property="outline-width" />
             <PropertyLabel
               label="Offset"
               description={propertyDescriptions.outlineOffset}
-              properties={["outlineOffset"]}
+              properties={["outline-offset"]}
             />
-            <TextControl property="outlineOffset" />
+            <TextControl property="outline-offset" />
           </>
         )}
       </Grid>
diff --git a/apps/builder/app/builder/features/style-panel/shared/repeated-style.tsx b/apps/builder/app/builder/features/style-panel/shared/repeated-style.tsx
@@ -4,7 +4,6 @@ import {
   toValue,
   type CssProperty,
   type LayersValue,
-  type StyleProperty,
   type StyleValue,
   type TupleValue,
   type UnparsedValue,
@@ -37,7 +36,7 @@ const isRepeatedValue = (
   styleValue.type === "layers" || styleValue.type === "tuple";
 
 const reparseComputedValue = (styleDecl: ComputedStyleDecl) => {
-  const property = styleDecl.property as StyleProperty;
+  const property = styleDecl.property;
   const serialized = toValue(styleDecl.computedValue);
   return parseCssValue(property, serialized);
 };
@@ -76,7 +75,7 @@ const isItemHidden = (styleValue: StyleValue, index: number) => {
  */
 const getComputedValue = (styleDecl: ComputedStyleDecl) => {
   if (styleDecl.cascadedValue.type === "var") {
-    const property = styleDecl.property as StyleProperty;
+    const property = styleDecl.property;
     const serialized = toValue(styleDecl.computedValue);
     return parseCssValue(property, serialized);
   }
@@ -128,7 +127,7 @@ export const addRepeatedStyleItem = (
   }
   const batch = createBatchUpdate();
   const currentStyles = new Map(
-    styles.map((styleDecl) => [styleDecl.property as StyleProperty, styleDecl])
+    styles.map((styleDecl) => [styleDecl.property, styleDecl])
   );
   const primaryValue = styles[0].cascadedValue;
   let primaryCount = 0;
@@ -233,7 +232,7 @@ export const setRepeatedStyleItem = (
   const newItems: StyleValue[] = repeatUntil(oldItems, index);
   // unpack item when layers or tuple is provided
   newItems[index] = newItem.type === valueType ? newItem.value[0] : newItem;
-  batch.setProperty(styleDecl.property as StyleProperty)({
+  batch.setProperty(styleDecl.property)({
     type: valueType,
     value: newItems as UnparsedValue[],
   });
@@ -250,7 +249,7 @@ export const deleteRepeatedStyleItem = (
     ? primaryValue.value.length
     : index + 1;
   for (const styleDecl of styles) {
-    const property = styleDecl.property as StyleProperty;
+    const property = styleDecl.property;
     const newValue = structuredClone(styleDecl.cascadedValue);
     if (isRepeatedValue(newValue)) {
       newValue.value = repeatUntil(newValue.value, primaryCount);
@@ -281,7 +280,7 @@ export const toggleRepeatedStyleItem = (
     : index + 1;
   const isHidden = isItemHidden(primaryValue, index);
   for (const styleDecl of styles) {
-    const property = styleDecl.property as StyleProperty;
+    const property = styleDecl.property;
     const newValue = structuredClone(styleDecl.cascadedValue);
     if (newValue.type === "var") {
       newValue.hidden = !isHidden;
@@ -320,7 +319,7 @@ export const swapRepeatedStyleItems = (
       newValue.value.splice(oldIndex, 1);
       newValue.value.splice(newIndex, 0, oldItem);
     }
-    batch.setProperty(styleDecl.property as StyleProperty)(newValue);
+    batch.setProperty(styleDecl.property)(newValue);
   }
   batch.publish();
 };
diff --git a/apps/builder/app/shared/style-object-model.test.tsx b/apps/builder/app/shared/style-object-model.test.tsx
@@ -11,7 +11,7 @@ import {
 } from "@webstudio-is/sdk";
 import { $, renderData } from "@webstudio-is/template";
 import { camelCaseProperty, parseCss } from "@webstudio-is/css-data";
-import type { StyleValue } from "@webstudio-is/css-engine";
+import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";
 import {
   type StyleObjectModel,
   getComputedStyleDecl,
@@ -990,14 +990,14 @@ test("work with unknown or invalid properties", () => {
     getComputedStyleDecl({
       model,
       instanceSelector,
-      property: "unknownProperty",
+      property: "unknownProperty" as StyleProperty,
     }).usedValue
   ).toEqual({ type: "unparsed", value: "[object Object]" });
   expect(
     getComputedStyleDecl({
       model,
       instanceSelector,
-      property: "undefinedProperty",
+      property: "undefinedProperty" as StyleProperty,
     }).usedValue
   ).toEqual({ type: "invalid", value: "" });
 });
diff --git a/apps/builder/app/shared/style-object-model.ts b/apps/builder/app/shared/style-object-model.ts
diff --git a/apps/builder/app/shared/webstudio-data-migrator.ts b/apps/builder/app/shared/webstudio-data-migrator.ts
