refactor: migrate layout and size to hyphenated properties (#4946)

First style sections migrated from camel case to hyphenated style
properties.

Author: TrySound

apps/builder/app/builder/features/style-panel/controls/menu/menu-control.tsx

@@ -1,9 +1,5 @@
 import { useState } from "react";
-import {
-  toValue,
-  type CssProperty,
-  type StyleProperty,
-} from "@webstudio-is/css-engine";
+import { toValue, type CssProperty } from "@webstudio-is/css-engine";
 import type { IconComponent } from "@webstudio-is/icons";
 import {
   Box,
@@ -32,7 +28,7 @@ export const MenuControl = ({
   property,
   items,
 }: {
-  property: StyleProperty | CssProperty;
+  property: CssProperty;
   items: Array<{
     name: string;
     label: string;

apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx

@@ -103,7 +103,7 @@ export const ToggleGroupControl = ({
   items,
 }: {
   label?: string;
-  properties: [StyleProperty, ...StyleProperty[]];
+  properties: [CssProperty | StyleProperty, ...(CssProperty | StyleProperty)[]];
   items: Array<{
     child: JSX.Element;
     value: string;

apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx

@@ -3,11 +3,7 @@ import {
   camelCaseProperty,
   declarationDescriptions,
 } from "@webstudio-is/css-data";
-import {
-  toValue,
-  type CssProperty,
-  type StyleProperty,
-} from "@webstudio-is/css-engine";
+import { toValue, type CssProperty } from "@webstudio-is/css-engine";
 import type { IconComponent } from "@webstudio-is/icons";
 import { humanizeString } from "~/shared/string-utils";
 import { setProperty } from "../../shared/use-style-data";
@@ -18,7 +14,7 @@ export const ToggleControl = ({
   property,
   items,
 }: {
-  property: StyleProperty | CssProperty;
+  property: CssProperty;
   items: Array<{
     name: string;
     label: string;

apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts

@@ -60,12 +60,12 @@ export const $advancedStylesLonghands = computed(
     const visualProperties = new Set<CssProperty>([]);
     for (const { properties } of sections.values()) {
       for (const property of properties) {
-        visualProperties.add(hyphenateProperty(property) as CssProperty);
+        visualProperties.add(hyphenateProperty(property));
       }
     }
     for (const style of definedStyles) {
       const { property, value, listed } = style;
-      const hyphenatedProperty = hyphenateProperty(property) as CssProperty;
+      const hyphenatedProperty = hyphenateProperty(property);
       // When property is listed, it was added from advanced panel.
       // If we are in advanced mode, we show them all.
       if (

apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx

@@ -7,7 +7,7 @@ import {
   FloatingPanel,
 } from "@webstudio-is/design-system";
 import { toValue } from "@webstudio-is/css-engine";
-import type { StyleProperty } from "@webstudio-is/css-engine";
+import type { CssProperty } from "@webstudio-is/css-engine";
 import {
   ToggleGroupControl,
   ToggleGroupTooltip,
@@ -37,12 +37,12 @@ import { useComputedStyleDecl, useComputedStyles } from "../../shared/model";
 import { createBatchUpdate, setProperty } from "../../shared/use-style-data";
 
 export const properties = [
-  "flexShrink",
-  "flexGrow",
-  "flexBasis",
-  "alignSelf",
+  "flex-shrink",
+  "flex-grow",
+  "flex-basis",
+  "align-self",
   "order",
-] satisfies [StyleProperty, ...StyleProperty[]];
+] satisfies [CssProperty, ...CssProperty[]];
 
 export const Section = () => {
   return (
@@ -62,11 +62,11 @@ const FlexChildSectionAlign = () => {
       <PropertyLabel
         label="Align"
         description={propertyDescriptions.alignSelf}
-        properties={["alignSelf"]}
+        properties={["align-self"]}
       />
       <ToggleGroupControl
         label="Align"
-        properties={["alignSelf"]}
+        properties={["align-self"]}
         items={[
           {
             child: <XSmallIcon />,
@@ -122,7 +122,7 @@ const getSizingValue = (flexGrow: string, flexShrink: string) => {
 };
 
 const FlexChildSectionSizing = () => {
-  const styles = useComputedStyles(["flexGrow", "flexShrink", "flexBasis"]);
+  const styles = useComputedStyles(["flex-grow", "flex-shrink", "flex-basis"]);
   const [flexGrow, flexShrink, flexBasis] = styles;
   const styleValueSource = getPriorityStyleValueSource(styles);
   const selectedValue = getSizingValue(
@@ -176,7 +176,7 @@ const FlexChildSectionSizing = () => {
       <PropertyLabel
         label="Sizing"
         description="Specifies the ability of a flex item to grow, shrink, or set its initial size within a flex container."
-        properties={["flexGrow", "flexShrink", "flexBasis"]}
+        properties={["flex-grow", "flex-shrink", "flex-basis"]}
       />
 
       {/* We don't support "flex" shorthand and
@@ -202,12 +202,12 @@ const FlexChildSectionSizing = () => {
             flexShrink = 1;
           }
           if (flexGrow !== undefined && flexShrink !== undefined) {
-            batch.setProperty("flexGrow")({
+            batch.setProperty("flex-grow")({
               type: "unit",
               value: flexGrow,
               unit: "number",
             });
-            batch.setProperty("flexShrink")({
+            batch.setProperty("flex-shrink")({
               type: "unit",
               value: flexShrink,
               unit: "number",
@@ -227,7 +227,7 @@ const FlexChildSectionSizing = () => {
             label="Sizing"
             code={item.codeLines.join("\n")}
             description={item.description}
-            properties={["flexGrow", "flexShrink", "flexBasis"]}
+            properties={["flex-grow", "flex-shrink", "flex-basis"]}
           >
             <ToggleGroupButton
               aria-checked={item.value === selectedValue}
@@ -263,27 +263,27 @@ const FlexChildSectionSizingPopover = () => {
         >
           <Grid css={{ gridTemplateColumns: "auto", gap: theme.spacing[3] }}>
             <PropertyLabel
-              properties={["flexGrow"]}
+              properties={["flex-grow"]}
               description={propertyDescriptions.flexGrow}
               label="Grow"
             />
-            <TextControl property="flexGrow" />
+            <TextControl property="flex-grow" />
           </Grid>
           <Grid css={{ gridTemplateColumns: "auto", gap: theme.spacing[3] }}>
             <PropertyLabel
               label="Shrink"
               description={propertyDescriptions.flexShrink}
-              properties={["flexShrink"]}
+              properties={["flex-shrink"]}
             />
-            <TextControl property="flexShrink" />
+            <TextControl property="flex-shrink" />
           </Grid>
           <Grid css={{ gridTemplateColumns: "auto", gap: theme.spacing[3] }}>
             <PropertyLabel
               label="Basis"
               description={propertyDescriptions.flexBasis}
-              properties={["flexBasis"]}
+              properties={["flex-basis"]}
             />
-            <TextControl property="flexBasis" />
+            <TextControl property="flex-basis" />
           </Grid>
         </Grid>
       }
@@ -367,7 +367,7 @@ const FlexChildSectionOrder = () => {
             label="Sizing"
             code={item.code}
             description={item.description}
-            properties={["flexGrow", "flexShrink", "flexBasis"]}
+            properties={["flex-grow", "flex-shrink", "flex-basis"]}
           >
             <ToggleGroupButton
               aria-checked={