refactor: hyphenate all sections (#4981)

Migrated to hyphenated properties all left sections

- filter
- list item
- transforms
- typography

Author: TrySound

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

@@ -1,9 +1,5 @@
 import { computed } from "nanostores";
-import {
-  hyphenateProperty,
-  type CssProperty,
-  type CssStyleMap,
-} from "@webstudio-is/css-engine";
+import type { CssProperty, CssStyleMap } from "@webstudio-is/css-engine";
 import { $matchingBreakpoints, getDefinedStyles } from "../../shared/model";
 import { sections } from "../sections";
 import {
@@ -60,7 +56,7 @@ export const $advancedStylesLonghands = computed(
     const visualProperties = new Set<CssProperty>([]);
     for (const { properties } of sections.values()) {
       for (const property of properties) {
-        visualProperties.add(hyphenateProperty(property));
+        visualProperties.add(property);
       }
     }
     for (const style of definedStyles) {

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

@@ -2,7 +2,7 @@ import { Flex, Tooltip, Text } from "@webstudio-is/design-system";
 import { InfoCircleIcon } from "@webstudio-is/icons";
 import {
   toValue,
-  type StyleProperty,
+  type CssProperty,
   type StyleValue,
 } from "@webstudio-is/css-engine";
 import { RepeatedStyleSection } from "../../shared/style-section";
@@ -16,12 +16,8 @@ import { parseCssFragment } from "../../shared/css-fragment";
 import { useComputedStyleDecl } from "../../shared/model";
 import { humanizeString } from "~/shared/string-utils";
 
-export const properties = ["filter"] satisfies [
-  StyleProperty,
-  ...StyleProperty[],
-];
+export const properties = ["filter"] satisfies [CssProperty, ...CssProperty[]];
 
-const property: StyleProperty = properties[0];
 const label = "Filters";
 const initialFilter = "blur(0px)";
 
@@ -55,7 +51,7 @@ export const Section = () => {
         renderItemContent={(index, primaryValue) => (
           <FilterSectionContent
             index={index}
-            property={property}
+            property="filter"
             propertyValue={toValue(primaryValue)}
             layer={primaryValue}
             onEditLayer={(index, value, options) => {

apps/builder/app/builder/features/style-panel/sections/list-item.tsx

@@ -1,11 +1,11 @@
 import { propertyDescriptions } from "@webstudio-is/css-data";
-import type { StyleProperty } from "@webstudio-is/css-engine";
+import type { CssProperty } from "@webstudio-is/css-engine";
 import { Grid, theme } from "@webstudio-is/design-system";
 import { SelectControl } from "../controls";
 import { StyleSection } from "../shared/style-section";
 import { PropertyLabel } from "../property-label";
 
-export const properties = ["listStyleType"] satisfies Array<StyleProperty>;
+export const properties = ["list-style-type"] satisfies CssProperty[];
 
 export const Section = () => {
   return (
@@ -14,9 +14,9 @@ export const Section = () => {
         <PropertyLabel
           label="List Style Type"
           description={propertyDescriptions.listStyleType}
-          properties={["listStyleType"]}
+          properties={["list-style-type"]}
         />
-        <SelectControl property="listStyleType" />
+        <SelectControl property="list-style-type" />
       </Grid>
     </StyleSection>
   );

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

@@ -16,12 +16,12 @@ import * as advanced from "./advanced/advanced";
 import * as textShadows from "./text-shadows/text-shadows";
 import * as backdropFilter from "./backdrop-filter/backdrop-filter";
 import * as transforms from "./transforms/transforms";
-import type { CssProperty, StyleProperty } from "@webstudio-is/css-engine";
+import type { CssProperty } from "@webstudio-is/css-engine";
 
 export const sections = new Map<
   string,
   {
-    properties: (StyleProperty | CssProperty)[];
+    properties: CssProperty[];
     Section: () => ReactNode;
   }
 >([

apps/builder/app/builder/features/style-panel/sections/transforms/transform-and-perspective-origin.tsx

@@ -1,11 +1,15 @@
-import { propertyDescriptions, propertySyntaxes } from "@webstudio-is/css-data";
+import {
+  camelCaseProperty,
+  propertyDescriptions,
+  propertySyntaxes,
+} from "@webstudio-is/css-data";
 import { Flex, Grid, PositionGrid } from "@webstudio-is/design-system";
 import {
   KeywordValue,
   StyleValue,
   TupleValue,
   UnitValue,
-  type StyleProperty,
+  type CssProperty,
 } from "@webstudio-is/css-engine";
 import { styleConfigByName } from "../../shared/configs";
 import { useMemo } from "react";
@@ -21,9 +25,9 @@ import { useComputedStyleDecl } from "../../shared/model";
 // Fake properties to use in the CssValueInputContainer
 // x, y axis takes length | percentage | keyword
 // z axis takes length
-const fakePropertyX: StyleProperty = "backgroundPositionX";
-const fakePropertyY: StyleProperty = "backgroundPositionY";
-const fakePropertyZ: StyleProperty = "outlineOffset";
+const fakePropertyX: CssProperty = "background-position-x";
+const fakePropertyY: CssProperty = "background-position-y";
+const fakePropertyZ: CssProperty = "outline-offset";
 
 const keywordToValue: Record<string, number> = {
   left: 0,
@@ -52,7 +56,7 @@ export const calculatePositionFromOrigin = (value: StyleValue | undefined) => {
 export const TransformAndPerspectiveOrigin = ({
   property,
 }: {
-  property: StyleProperty;
+  property: CssProperty;
 }) => {
   const styleDecl = useComputedStyleDecl(property);
   const value = styleDecl.cascadedValue;
@@ -142,7 +146,7 @@ export const TransformAndPerspectiveOrigin = ({
       ],
     };
 
-    if (property === "transformOrigin" && origin.z !== undefined) {
+    if (property === "transform-origin" && origin.z !== undefined) {
       value.value.push(origin.z);
     }
 
@@ -153,7 +157,7 @@ export const TransformAndPerspectiveOrigin = ({
     <Grid gap="2">
       <PropertyLabel
         label={label}
-        description={propertyDescriptions[property]}
+        description={propertyDescriptions[camelCaseProperty(property)]}
         properties={[property]}
       />
       <Flex gap="6">
@@ -171,10 +175,10 @@ export const TransformAndPerspectiveOrigin = ({
               <PropertyInlineLabel
                 label="X"
                 title={
-                  property === "transformOrigin" ? "X Offset" : "X Position"
+                  property === "transform-origin" ? "X Offset" : "X Position"
                 }
                 description={
-                  property === "transformOrigin"
+                  property === "transform-origin"
                     ? propertySyntaxes.transformOriginY
                     : propertySyntaxes.perspectiveOriginX
                 }
@@ -198,10 +202,10 @@ export const TransformAndPerspectiveOrigin = ({
               <PropertyInlineLabel
                 label="Y"
                 title={
-                  property === "transformOrigin" ? "Y Offset" : "Y Position"
+                  property === "transform-origin" ? "Y Offset" : "Y Position"
                 }
                 description={
-                  property === "transformOrigin"
+                  property === "transform-origin"
                     ? propertySyntaxes.transformOriginY
                     : propertySyntaxes.perspectiveOriginY
                 }
@@ -217,7 +221,7 @@ export const TransformAndPerspectiveOrigin = ({
                 }
               />
             </Grid>
-            {property === "transformOrigin" && origin.z !== undefined && (
+            {property === "transform-origin" && origin.z !== undefined && (
               <Grid
                 gap="2"
                 align="center"

apps/builder/app/builder/features/style-panel/sections/transforms/transform-scale.tsx

@@ -7,7 +7,7 @@ import {
   SmallToggleButton,
   theme,
 } from "@webstudio-is/design-system";
-import type { StyleValue, StyleProperty } from "@webstudio-is/css-engine";
+import type { StyleValue, CssProperty } from "@webstudio-is/css-engine";
 import {
   BorderRadiusIcon,
   XAxisIcon,
@@ -30,7 +30,7 @@ import {
   useComputedStyleDecl,
 } from "../../shared/model";
 
-const property: StyleProperty = "scale";
+const property: CssProperty = "scale";
 
 export const ScalePanelContent = () => {
   const styleDecl = useComputedStyleDecl(property);

apps/builder/app/builder/features/style-panel/sections/transforms/transform-translate.tsx

@@ -1,5 +1,5 @@
 import { Flex, Grid } from "@webstudio-is/design-system";
-import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";
+import type { CssProperty, StyleValue } from "@webstudio-is/css-engine";
 import { XAxisIcon, YAxisIcon, ZAxisIcon } from "@webstudio-is/icons";
 import { propertySyntaxes } from "@webstudio-is/css-data";
 import { CssValueInputContainer } from "../../shared/css-value-input";
@@ -13,7 +13,7 @@ import {
   useComputedStyleDecl,
 } from "../../shared/model";
 
-const property: StyleProperty = "translate";
+const property: CssProperty = "translate";
 
 export const TranslatePanelContent = () => {
   const styleDecl = useComputedStyleDecl(property);

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

@@ -1,5 +1,5 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
-import type { StyleProperty } from "@webstudio-is/css-engine";
+import type { CssProperty } from "@webstudio-is/css-engine";
 import { propertyDescriptions } from "@webstudio-is/css-data";
 import {
   CssValueListArrowFocus,
@@ -31,6 +31,16 @@ import {
   CollapsibleSectionRoot,
   useOpenState,
 } from "~/builder/shared/collapsible-section";
+import { humanizeString } from "~/shared/string-utils";
+import { getDots } from "../../shared/style-section";
+import {
+  getPriorityStyleValueSource,
+  PropertyLabel,
+  PropertySectionLabel,
+} from "../../property-label";
+import { useComputedStyleDecl, useComputedStyles } from "../../shared/model";
+import { createBatchUpdate } from "../../shared/use-style-data";
+import { TextControl } from "../../controls";
 import {
   addDefaultsForTransormSection,
   isTransformPanelPropertyUsed,
@@ -44,33 +54,23 @@ import { TranslatePanelContent } from "./transform-translate";
 import { ScalePanelContent } from "./transform-scale";
 import { RotatePanelContent } from "./transform-rotate";
 import { SkewPanelContent } from "./transform-skew";
-import { humanizeString } from "~/shared/string-utils";
-import { getDots } from "../../shared/style-section";
 import { TransformAndPerspectiveOrigin } from "./transform-and-perspective-origin";
-import {
-  getPriorityStyleValueSource,
-  PropertyLabel,
-  PropertySectionLabel,
-} from "../../property-label";
-import { useComputedStyleDecl, useComputedStyles } from "../../shared/model";
-import { createBatchUpdate } from "../../shared/use-style-data";
-import { TextControl } from "../../controls";
 
 const label = "Transforms";
 
 const advancedProperties = [
-  "transformOrigin",
-  "backfaceVisibility",
+  "transform-origin",
+  "backface-visibility",
   "perspective",
-  "perspectiveOrigin",
-] satisfies [StyleProperty, ...StyleProperty[]];
+  "perspective-origin",
+] satisfies [CssProperty, ...CssProperty[]];
 
 export const properties = [
   "transform",
   "translate",
   "scale",
   ...advancedProperties,
-] satisfies [StyleProperty, ...StyleProperty[]];
+] satisfies [CssProperty, ...CssProperty[]];
 
 const TransformAdvancedButton = forwardRef<
   ElementRef<"button">,
@@ -113,11 +113,11 @@ const TransformAdvancedPopover = () => {
             <PropertyLabel
               label="Backface Visibility"
               description={propertyDescriptions.backfaceVisibility}
-              properties={["backfaceVisibility"]}
+              properties={["backface-visibility"]}
             />
-            <TextControl property="backfaceVisibility" />
+            <TextControl property="backface-visibility" />
           </Grid>
-          <TransformAndPerspectiveOrigin property="transformOrigin" />
+          <TransformAndPerspectiveOrigin property="transform-origin" />
           <Grid css={{ gridTemplateColumns: `2fr 1fr` }}>
             <PropertyLabel
               label="Perspective"
@@ -126,7 +126,7 @@ const TransformAdvancedPopover = () => {
             />
             <TextControl property="perspective" />
           </Grid>
-          <TransformAndPerspectiveOrigin property="perspectiveOrigin" />
+          <TransformAndPerspectiveOrigin property="perspective-origin" />
         </Grid>
       }
     >