refactor: hyphenate css-value-input (#5003)

TrySound · web-flow · commit b4cc9ffbfb1c · 2025-03-15T17:30:35.000+07:00
Migrated all css-value-input internals and usages to hyphenated
properties. Touched animation section a little.
diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-keyframes.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-keyframes.tsx
@@ -65,7 +65,7 @@ const OffsetInput = ({
       intermediateValue={intermediateValue}
       styleSource="default"
       /* same as offset has 0 - 100% */
-      property={"fontStretch"}
+      property={"font-stretch"}
       value={
         value !== undefined
           ? {
diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.tsx
@@ -109,7 +109,7 @@ const RangeValueInput = ({
       styleSource="default"
       value={value}
       /* marginLeft to allow negative values  */
-      property={"marginLeft"}
+      property={"margin-left"}
       unitOptions={unitOptions}
       intermediateValue={intermediateValue}
       onChange={(styleValue) => {
@@ -156,8 +156,6 @@ const EasingInput = ({
     StyleValue | IntermediateStyleValue
   >();
 
-  const property = "animationTimingFunction";
-
   return (
     <CssValueInput
       id={id}
@@ -173,7 +171,7 @@ const EasingInput = ({
           value,
         })),
       ]}
-      property={property}
+      property="animation-timing-function"
       intermediateValue={intermediateValue}
       onChange={(styleValue) => {
         setIntermediateValue(styleValue);
diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx
@@ -115,7 +115,7 @@ const InsetValueInput = ({
       styleSource="default"
       value={value}
       /* marginLeft to allow negative values  */
-      property={"marginLeft"}
+      property="margin-left"
       unitOptions={unitOptions}
       intermediateValue={intermediateValue}
       onChange={(styleValue) => {
diff --git a/apps/builder/app/builder/features/style-panel/controls/color/color-control.tsx b/apps/builder/app/builder/features/style-panel/controls/color/color-control.tsx
@@ -1,8 +1,4 @@
-import {
-  hyphenateProperty,
-  type CssProperty,
-  type StyleProperty,
-} from "@webstudio-is/css-engine";
+import type { CssProperty } from "@webstudio-is/css-engine";
 import { keywordValues } from "@webstudio-is/css-data";
 import { ColorPicker } from "../../shared/color-picker";
 import {
@@ -11,11 +7,7 @@ import {
 } from "../../shared/model";
 import { deleteProperty, setProperty } from "../../shared/use-style-data";
 
-export const ColorControl = ({
-  property,
-}: {
-  property: StyleProperty | CssProperty;
-}) => {
+export const ColorControl = ({ property }: { property: CssProperty }) => {
   const computedStyleDecl = useComputedStyleDecl(property);
   const value = computedStyleDecl.cascadedValue;
   const currentColor = computedStyleDecl.usedValue;
@@ -26,7 +18,7 @@ export const ColorControl = ({
       value={value}
       currentColor={currentColor}
       getOptions={() => [
-        ...(keywordValues[hyphenateProperty(property)] ?? []).map((item) => ({
+        ...(keywordValues[property] ?? []).map((item) => ({
           type: "keyword" as const,
           value: item,
         })),
@@ -35,9 +27,7 @@ export const ColorControl = ({
       onChange={(styleValue) => setValue(styleValue, { isEphemeral: true })}
       onChangeComplete={setValue}
       onAbort={() => deleteProperty(property, { isEphemeral: true })}
-      onReset={() => {
-        deleteProperty(property);
-      }}
+      onReset={() => deleteProperty(property)}
     />
   );
 };
diff --git a/apps/builder/app/builder/features/style-panel/controls/position/position-control.tsx b/apps/builder/app/builder/features/style-panel/controls/position/position-control.tsx
@@ -7,9 +7,7 @@ import {
   TupleValue,
   TupleValueItem,
   type StyleValue,
-  type StyleProperty,
   type CssProperty,
-  hyphenateProperty,
 } from "@webstudio-is/css-engine";
 import { Flex, Grid, PositionGrid } from "@webstudio-is/design-system";
 import type { ComputedStyleDecl } from "~/shared/style-object-model";
@@ -58,16 +56,14 @@ export const PositionControl = ({
   property,
   styleDecl,
 }: {
-  property: StyleProperty | CssProperty;
+  property: CssProperty;
   styleDecl: ComputedStyleDecl;
 }) => {
   const value = toTuple(styleDecl.cascadedValue);
-  const keywords = (keywordValues[hyphenateProperty(property)] ?? []).map(
-    (value) => ({
-      type: "keyword" as const,
-      value,
-    })
-  );
+  const keywords = (keywordValues[property] ?? []).map((value) => ({
+    type: "keyword" as const,
+    value,
+  }));
 
   const setValue = setProperty(property);
 
diff --git a/apps/builder/app/builder/features/style-panel/controls/text/text-control.tsx b/apps/builder/app/builder/features/style-panel/controls/text/text-control.tsx
@@ -1,10 +1,5 @@
 import { useState } from "react";
-import {
-  hyphenateProperty,
-  type CssProperty,
-  type StyleProperty,
-  type StyleValue,
-} from "@webstudio-is/css-engine";
+import type { CssProperty, StyleValue } from "@webstudio-is/css-engine";
 import { keywordValues } from "@webstudio-is/css-data";
 import {
   CssValueInput,
@@ -16,11 +11,7 @@ import {
   useComputedStyleDecl,
 } from "../../shared/model";
 
-export const TextControl = ({
-  property,
-}: {
-  property: StyleProperty | CssProperty;
-}) => {
+export const TextControl = ({ property }: { property: CssProperty }) => {
   const computedStyleDecl = useComputedStyleDecl(property);
   const value = computedStyleDecl.cascadedValue;
   const setValue = setProperty(property);
@@ -34,7 +25,7 @@ export const TextControl = ({
       value={value}
       intermediateValue={intermediateValue}
       getOptions={() => [
-        ...(keywordValues[hyphenateProperty(property)] ?? []).map((value) => ({
+        ...(keywordValues[property] ?? []).map((value) => ({
           type: "keyword" as const,
           value,
         })),
diff --git a/apps/builder/app/builder/features/style-panel/sections/shared/scrub.tsx b/apps/builder/app/builder/features/style-panel/sections/shared/scrub.tsx
@@ -6,7 +6,7 @@ import type {
 } from "@webstudio-is/css-engine";
 import { toValue } from "@webstudio-is/css-engine";
 import { numericScrubControl } from "@webstudio-is/design-system";
-import { camelCaseProperty, isValidDeclaration } from "@webstudio-is/css-data";
+import { isValidDeclaration } from "@webstudio-is/css-data";
 import { useModifierKeys } from "../../shared/modifier-keys";
 import type { StyleUpdateOptions } from "../../shared/use-style-data";
 import { parseIntermediateOrInvalidValue } from "../../shared/css-value-input/parse-intermediate-or-invalid-value";
@@ -85,7 +85,7 @@ export const useScrub = <P extends CssProperty>(props: {
       } as const;
 
       if (isValidDeclaration(property, toValue(value)) === false) {
-        value = parseIntermediateOrInvalidValue(camelCaseProperty(property), {
+        value = parseIntermediateOrInvalidValue(property, {
           type: "intermediate",
           value: `${value.value}`,
           unit: value.unit,
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
@@ -125,7 +125,7 @@ export const TransitionContent = ({ index }: { index: number }) => {
         <PropertyInlineLabel
           label="Property"
           description={propertyDescriptions.transitionProperty}
-          properties={["transitionProperty"]}
+          properties={["transition-property"]}
         />
         <TransitionProperty
           value={property ?? propertiesData["transition-property"].initial}
@@ -138,10 +138,10 @@ export const TransitionContent = ({ index }: { index: number }) => {
         <PropertyInlineLabel
           label="Duration"
           description={propertyDescriptions.transitionDuration}
-          properties={["transitionDuration"]}
+          properties={["transition-duration"]}
         />
         <CssValueInputContainer
-          property="transitionDuration"
+          property="transition-duration"
           styleSource="local"
           getOptions={() => $availableUnitVariables.get()}
           value={duration ?? propertiesData["transition-duration"].initial}
@@ -163,10 +163,10 @@ export const TransitionContent = ({ index }: { index: number }) => {
         <PropertyInlineLabel
           label="Delay"
           description={propertyDescriptions.transitionDelay}
-          properties={["transitionDelay"]}
+          properties={["transition-delay"]}
         />
         <CssValueInputContainer
-          property="transitionDelay"
+          property="transition-delay"
           styleSource="local"
           getOptions={() => $availableUnitVariables.get()}
           value={delay ?? propertiesData["transition-delay"].initial}
@@ -188,10 +188,10 @@ export const TransitionContent = ({ index }: { index: number }) => {
         <PropertyInlineLabel
           label="Easing"
           description={propertyDescriptions.transitionTimingFunction}
-          properties={["transitionTimingFunction"]}
+          properties={["transition-timing-function"]}
         />
         <CssValueInputContainer
-          property="transitionTimingFunction"
+          property="transition-timing-function"
           styleSource="local"
           getOptions={() => [
             { type: "keyword", value: "linear" },
diff --git a/apps/builder/app/builder/features/style-panel/shared/color-picker.tsx b/apps/builder/app/builder/features/style-panel/shared/color-picker.tsx
@@ -5,7 +5,6 @@ import { useDebouncedCallback } from "use-debounce";
 import { RgbaColorPicker } from "react-colorful";
 import { EyedropperIcon } from "@webstudio-is/icons";
 import type {
-  StyleProperty,
   StyleValue,
   KeywordValue,
   RgbValue,
@@ -175,7 +174,7 @@ type ColorPickerProps = {
   value: StyleValue;
   currentColor: StyleValue;
   getOptions?: () => Array<KeywordValue | VarValue>;
-  property: StyleProperty | CssProperty;
+  property: CssProperty;
   disabled?: boolean;
 };
 
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.stories.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.stories.tsx
@@ -67,7 +67,7 @@ export const WithIcons = () => {
   return (
     <CssValueInput
       styleSource="preset"
-      property="alignItems"
+      property="align-items"
       value={value}
       intermediateValue={intermediateValue}
       getOptions={() => [
@@ -116,7 +116,7 @@ export const WithUnits = () => {
     <Flex css={{ gap: theme.spacing[9] }}>
       <CssValueInput
         styleSource="preset"
-        property="rowGap"
+        property="row-gap"
         value={value}
         intermediateValue={intermediateValue}
         getOptions={() => [
@@ -172,7 +172,7 @@ export const Oversized = () => {
     <Flex css={{ width: 100 }}>
       <CssValueInput
         styleSource="preset"
-        property="alignItems"
+        property="align-items"
         value={value}
         intermediateValue={intermediateValue}
         onChange={(newValue) => {
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx
@@ -21,7 +21,6 @@ import {
 import type {
   CssProperty,
   KeywordValue,
-  StyleProperty,
   StyleValue,
   Unit,
   VarValue,
@@ -40,7 +39,7 @@ import {
 } from "react";
 import { useUnitSelect, type UnitOption } from "./unit-select";
 import { parseIntermediateOrInvalidValue } from "./parse-intermediate-or-invalid-value";
-import { hyphenateProperty, toValue } from "@webstudio-is/css-engine";
+import { toValue } from "@webstudio-is/css-engine";
 import {
   camelCaseProperty,
   declarationDescriptions,
@@ -61,9 +60,8 @@ import {
 import { useEffectEvent } from "~/shared/hook-utils/effect-event";
 
 // We need to enable scrub on properties that can have numeric value.
-const canBeNumber = (property: StyleProperty, value: CssValueInputValue) => {
-  const unitGroups =
-    propertiesData[hyphenateProperty(property)]?.unitGroups ?? [];
+const canBeNumber = (property: CssProperty, value: CssValueInputValue) => {
+  const unitGroups = propertiesData[property]?.unitGroups ?? [];
   // allow scrubbing css variables with unit value
   return unitGroups.length !== 0 || value.type === "unit";
 };
@@ -93,7 +91,7 @@ const useScrub = ({
   defaultUnit: Unit | undefined;
   value: CssValueInputValue;
   intermediateValue: CssValueInputValue | undefined;
-  property: StyleProperty;
+  property: CssProperty;
   onChange: (value: CssValueInputValue | undefined) => void;
   onChangeComplete: (value: StyleValue) => void;
   onAbort: () => void;
@@ -302,7 +300,7 @@ type CssValueInputProps = Pick<
   | "inputRef"
 > & {
   styleSource: StyleValueSourceColor;
-  property: StyleProperty | CssProperty;
+  property: CssProperty;
   value: StyleValue | undefined;
   intermediateValue: CssValueInputValue | undefined;
   /**
@@ -475,7 +473,7 @@ export const CssValueInput = ({
   prefix,
   showSuffix = true,
   styleSource,
-  property: multiCaseProperty,
+  property,
   getOptions = () => [],
   onHighlight,
   onAbort,
@@ -489,7 +487,6 @@ export const CssValueInput = ({
   placeholder,
   ...props
 }: CssValueInputProps) => {
-  const property = camelCaseProperty(multiCaseProperty);
   const value = props.intermediateValue ?? props.value ?? initialValue;
   const valueRef = useRef(value);
   valueRef.current = value;
@@ -607,7 +604,7 @@ export const CssValueInput = ({
 
   const [isUnitsOpen, unitSelectElement] = useUnitSelect({
     options: unitOptions,
-    property: hyphenateProperty(multiCaseProperty),
+    property,
     value,
     onChange: (unitOrKeyword) => {
       if (unitOrKeyword.type === "keyword") {
@@ -650,7 +647,7 @@ export const CssValueInput = ({
 
       // value is a keyword or non numeric, try get browser style value and convert it
       if (value.type === "keyword" || value.type === "intermediate") {
-        const styleValue = propertySizes[hyphenateProperty(property)];
+        const styleValue = propertySizes[property];
         const convertedValue = convertUnits(unitSizes)(
           styleValue?.value ?? 0,
           styleValue?.unit ?? "number",
@@ -790,7 +787,7 @@ export const CssValueInput = ({
     ) {
       description = option.description;
     } else {
-      const key = `${property}:${toValue(
+      const key = `${camelCaseProperty(property)}:${toValue(
         valueForDescription
       )}` as keyof typeof declarationDescriptions;
       description = declarationDescriptions[key];
@@ -808,7 +805,7 @@ export const CssValueInput = ({
     .map((item) =>
       item.type === "keyword"
         ? declarationDescriptions[
-            `${property}:${toValue(
+            `${camelCaseProperty(property)}:${toValue(
               item
             )}` as keyof typeof declarationDescriptions
           ]
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts b/apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts
@@ -1,9 +1,8 @@
-import {
-  type StyleProperty,
-  type StyleValue,
-  type InvalidValue,
-  type Unit,
-  hyphenateProperty,
+import type {
+  StyleValue,
+  InvalidValue,
+  Unit,
+  CssProperty,
 } from "@webstudio-is/css-engine";
 import {
   units,
@@ -17,9 +16,8 @@ import { toKebabCase } from "../keyword-utils";
 
 const unitsList = Object.values(units).flat();
 
-const getDefaultUnit = (property: StyleProperty): Unit => {
-  const unitGroups =
-    propertiesData[hyphenateProperty(property)]?.unitGroups ?? [];
+const getDefaultUnit = (property: CssProperty): Unit => {
+  const unitGroups = propertiesData[property]?.unitGroups ?? [];
 
   for (const unitGroup of unitGroups) {
     if (unitGroup === "number") {
@@ -41,7 +39,7 @@ const getDefaultUnit = (property: StyleProperty): Unit => {
 };
 
 export const parseIntermediateOrInvalidValue = (
-  property: StyleProperty,
+  property: CssProperty,
   styleValue: IntermediateStyleValue | InvalidValue,
   defaultUnit: Unit = getDefaultUnit(property),
   originalValue?: string
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts.test.ts b/apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts.test.ts
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/value-editor-dialog.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/value-editor-dialog.tsx
diff --git a/apps/builder/app/builder/features/style-panel/shared/filter-content.tsx b/apps/builder/app/builder/features/style-panel/shared/filter-content.tsx
diff --git a/apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx b/apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx
