refactor: accept both camel and hyphen properties everywhere (#4943)

Here improved all reusable logic to accept both camel and hyphen cases
in properties. This will ease migration to hyphen style.

Author: TrySound

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

@@ -1,4 +1,4 @@
-import type { StyleProperty } from "@webstudio-is/css-engine";
+import type { CssProperty, StyleProperty } from "@webstudio-is/css-engine";
 import { ColorPicker } from "../../shared/color-picker";
 import { styleConfigByName } from "../../shared/configs";
 import {
@@ -7,7 +7,11 @@ import {
 } from "../../shared/model";
 import { deleteProperty, setProperty } from "../../shared/use-style-data";
 
-export const ColorControl = ({ property }: { property: StyleProperty }) => {
+export const ColorControl = ({
+  property,
+}: {
+  property: StyleProperty | CssProperty;
+}) => {
   const computedStyleDecl = useComputedStyleDecl(property);
   const value = computedStyleDecl.cascadedValue;
   const currentColor = computedStyleDecl.usedValue;

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

@@ -8,7 +8,11 @@ import {
 import { $assets } from "~/shared/nano-states";
 import { ImageManager } from "~/builder/shared/image-manager";
 import { useEffect, useState } from "react";
-import type { InvalidValue, StyleProperty } from "@webstudio-is/css-engine";
+import type {
+  CssProperty,
+  InvalidValue,
+  StyleProperty,
+} from "@webstudio-is/css-engine";
 import { useComputedStyleDecl } from "../../shared/model";
 import {
   getRepeatedStyleItem,
@@ -32,7 +36,7 @@ export const ImageControl = ({
   property,
   index,
 }: {
-  property: StyleProperty;
+  property: StyleProperty | CssProperty;
   index: number;
 }) => {
   const assets = useStore($assets);

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

@@ -1,5 +1,9 @@
 import { useState } from "react";
-import { toValue, type StyleProperty } from "@webstudio-is/css-engine";
+import {
+  toValue,
+  type CssProperty,
+  type StyleProperty,
+} from "@webstudio-is/css-engine";
 import type { IconComponent } from "@webstudio-is/icons";
 import {
   Box,
@@ -15,7 +19,10 @@ import {
   MenuCheckedIcon,
   theme,
 } from "@webstudio-is/design-system";
-import { declarationDescriptions } from "@webstudio-is/css-data";
+import {
+  camelCaseProperty,
+  declarationDescriptions,
+} from "@webstudio-is/css-data";
 import { humanizeString } from "~/shared/string-utils";
 import { setProperty } from "../../shared/use-style-data";
 import { useComputedStyleDecl } from "../../shared/model";
@@ -25,7 +32,7 @@ export const MenuControl = ({
   property,
   items,
 }: {
-  property: StyleProperty;
+  property: StyleProperty | CssProperty;
   items: Array<{
     name: string;
     label: string;
@@ -41,7 +48,7 @@ export const MenuControl = ({
   const Icon = currentItem?.icon ?? items[0].icon;
   const description =
     declarationDescriptions[
-      `${property}:${
+      `${camelCaseProperty(property)}:${
         descriptionValue ?? currentValue
       }` as keyof typeof declarationDescriptions
     ];

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

@@ -1,9 +1,13 @@
-import { propertyDescriptions } from "@webstudio-is/css-data";
+import {
+  camelCaseProperty,
+  propertyDescriptions,
+} from "@webstudio-is/css-data";
 import {
   TupleValue,
   TupleValueItem,
   type StyleValue,
   type StyleProperty,
+  type CssProperty,
 } from "@webstudio-is/css-engine";
 import { Flex, Grid, PositionGrid } from "@webstudio-is/design-system";
 import type { ComputedStyleDecl } from "~/shared/style-object-model";
@@ -53,7 +57,7 @@ export const PositionControl = ({
   property,
   styleDecl,
 }: {
-  property: StyleProperty;
+  property: StyleProperty | CssProperty;
   styleDecl: ComputedStyleDecl;
 }) => {
   const { items } = styleConfigByName(property);
@@ -79,7 +83,7 @@ export const PositionControl = ({
     <Flex direction="column" gap="1">
       <PropertyInlineLabel
         label="Position"
-        description={propertyDescriptions[property]}
+        description={propertyDescriptions[camelCaseProperty(property)]}
         properties={[property]}
       />
       <Flex gap="6">

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

@@ -1,7 +1,12 @@
-import { declarationDescriptions, parseCssValue } from "@webstudio-is/css-data";
+import {
+  camelCaseProperty,
+  declarationDescriptions,
+  parseCssValue,
+} from "@webstudio-is/css-data";
 import {
   StyleValue,
   toValue,
+  type CssProperty,
   type StyleProperty,
 } from "@webstudio-is/css-engine";
 import { Box, Select, theme } from "@webstudio-is/design-system";
@@ -24,7 +29,7 @@ export const SelectControl = ({
   index,
   items = styleConfigByName(property).items,
 }: {
-  property: StyleProperty;
+  property: StyleProperty | CssProperty;
   index?: number;
   items?: Array<{ label: string; name: string }>;
 }) => {
@@ -54,7 +59,9 @@ export const SelectControl = ({
   const hasDescription =
     options.length > 0 &&
     options.some(
-      (option) => declarationDescriptions[`${property}:${option}`] !== undefined
+      (option) =>
+        declarationDescriptions[`${camelCaseProperty(property)}:${option}`] !==
+        undefined
     );
 
   return (
@@ -74,7 +81,7 @@ export const SelectControl = ({
           return;
         }
         // Preview on mouse enter or focus.
-        const nextValue = parseCssValue(property, name);
+        const nextValue = parseCssValue(camelCaseProperty(property), name);
         setValue(nextValue, { isEphemeral: true });
       }}
       onOpenChange={(isOpen) => {
@@ -88,7 +95,8 @@ export const SelectControl = ({
           return;
         }
 
-        const description = declarationDescriptions[`${property}:${option}`];
+        const description =
+          declarationDescriptions[`${camelCaseProperty(property)}:${option}`];
         return (
           <Box css={{ width: theme.spacing[26] }}>
             {description ?? `The ${noCase(property)} is ${option}`}

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

@@ -1,5 +1,9 @@
 import { useState } from "react";
-import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";
+import type {
+  CssProperty,
+  StyleProperty,
+  StyleValue,
+} from "@webstudio-is/css-engine";
 import {
   CssValueInput,
   type IntermediateStyleValue,
@@ -11,7 +15,11 @@ import {
   useComputedStyleDecl,
 } from "../../shared/model";
 
-export const TextControl = ({ property }: { property: StyleProperty }) => {
+export const TextControl = ({
+  property,
+}: {
+  property: StyleProperty | CssProperty;
+}) => {
   const computedStyleDecl = useComputedStyleDecl(property);
   const value = computedStyleDecl.cascadedValue;
   const setValue = setProperty(property);

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

@@ -1,5 +1,8 @@
 import { useState, type JSX, type ReactNode } from "react";
-import { declarationDescriptions } from "@webstudio-is/css-data";
+import {
+  camelCaseProperty,
+  declarationDescriptions,
+} from "@webstudio-is/css-data";
 import { AlertIcon } from "@webstudio-is/icons";
 import {
   Flex,
@@ -11,6 +14,7 @@ import {
 import {
   hyphenateProperty,
   toValue,
+  type CssProperty,
   type StyleProperty,
 } from "@webstudio-is/css-engine";
 import { humanizeString } from "~/shared/string-utils";
@@ -38,7 +42,7 @@ export const ToggleGroupTooltip = ({
   label?: string;
   code?: string;
   description: string | undefined;
-  properties: StyleProperty[];
+  properties: (StyleProperty | CssProperty)[];
   isAdvanced?: boolean;
   children: ReactNode;
 }) => {
@@ -152,7 +156,7 @@ export const ToggleGroupControl = ({
           description={
             item.description ??
             declarationDescriptions[
-              `${properties[0]}:${item.value}` as keyof typeof declarationDescriptions
+              `${camelCaseProperty(properties[0])}:${item.value}` as keyof typeof declarationDescriptions
             ]
           }
           properties={properties}

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

@@ -1,6 +1,13 @@
 import { ToggleButton } from "@webstudio-is/design-system";
-import { declarationDescriptions } from "@webstudio-is/css-data";
-import { toValue, type StyleProperty } from "@webstudio-is/css-engine";
+import {
+  camelCaseProperty,
+  declarationDescriptions,
+} from "@webstudio-is/css-data";
+import {
+  toValue,
+  type CssProperty,
+  type StyleProperty,
+} 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";
@@ -11,7 +18,7 @@ export const ToggleControl = ({
   property,
   items,
 }: {
-  property: StyleProperty;
+  property: StyleProperty | CssProperty;
   items: Array<{
     name: string;
     label: string;
@@ -32,7 +39,7 @@ export const ToggleControl = ({
     computedStyleDecl.source.name !== "default" && currentItem === undefined;
   const description =
     declarationDescriptions[
-      `${property}:${currentValue}` as keyof typeof declarationDescriptions
+      `${camelCaseProperty(property)}:${currentValue}` as keyof typeof declarationDescriptions
     ];
 
   return (

apps/builder/app/builder/features/style-panel/property-label.tsx

@@ -5,6 +5,7 @@ import { AlertIcon, ResetIcon } from "@webstudio-is/icons";
 import {
   hyphenateProperty,
   toValue,
+  type CssProperty,
   type StyleProperty,
 } from "@webstudio-is/css-engine";
 import {
@@ -238,7 +239,7 @@ export const PropertyLabel = ({
 }: {
   label: string;
   description?: string;
-  properties: [StyleProperty, ...StyleProperty[]];
+  properties: [StyleProperty | CssProperty, ...(StyleProperty | CssProperty)[]];
 }) => {
   const styles = useComputedStyles(properties);
   const styleValueSourceColor = getPriorityStyleValueSource(styles);
@@ -301,7 +302,7 @@ export const PropertySectionLabel = ({
 }: {
   label: string;
   description: string | undefined;
-  properties: [StyleProperty, ...StyleProperty[]];
+  properties: [StyleProperty | CssProperty, ...(StyleProperty | CssProperty)[]];
 }) => {
   const styles = useComputedStyles(properties);
   const styleValueSourceColor = getPriorityStyleValueSource(styles);
@@ -371,7 +372,10 @@ export const PropertyInlineLabel = ({
   label: string;
   title?: string;
   description?: string;
-  properties?: [StyleProperty, ...StyleProperty[]];
+  properties?: [
+    StyleProperty | CssProperty,
+    ...(StyleProperty | CssProperty)[],
+  ];
   disabled?: boolean;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -427,7 +431,7 @@ export const PropertyValueTooltip = ({
 }: {
   label: string;
   description: string | undefined;
-  properties: [StyleProperty, ...StyleProperty[]];
+  properties: [StyleProperty | CssProperty, ...(StyleProperty | CssProperty)[]];
   isAdvanced?: boolean;
   children: ReactNode;
 }) => {