refactor: replace keywords with change-case (#5011)

We don't need custom utilities for keywords with super small and well
supported change-case.

Got rid of it of keywords utilities and its tests ;)

Also fixed shadows and backdrop-filter sections I broke while migrating
to hyphenated properties.

Touched animations a little.

Author: TrySound

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import {
   Box,
   Flex,
@@ -8,7 +9,6 @@ import {
   toast,
 } from "@webstudio-is/design-system";
 import { keywordValues } from "@webstudio-is/css-data";
-import { toPascalCase } from "~/builder/features/style-panel/shared/keyword-utils";
 import { useIds } from "~/shared/form-utils";
 
 import type {
@@ -31,9 +31,8 @@ import {
   toValue,
   type StyleValue,
 } from "@webstudio-is/css-engine";
-import { useState } from "react";
 import { Keyframes } from "./animation-keyframes";
-import { titleCase } from "title-case";
+import { humanizeString } from "~/shared/string-utils";
 
 type Props = {
   type: "scroll" | "view";
@@ -274,7 +273,7 @@ export const AnimationPanelContent = ({ onChange, value, type }: Props) => {
         <Select
           id={fieldIds.fill}
           options={fillModeNames}
-          getLabel={(fillModeName: string) => titleCase(fillModeName)}
+          getLabel={humanizeString}
           value={value.timing.fill ?? fillModeNames[0]}
           onItemHighlight={(fillModeName) => {
             if (fillModeName === undefined) {
@@ -356,9 +355,7 @@ export const AnimationPanelContent = ({ onChange, value, type }: Props) => {
         <Select
           id={fieldIds.rangeStartName}
           options={timelineRangeNames}
-          getLabel={(timelineRangeName: string) =>
-            toPascalCase(timelineRangeName)
-          }
+          getLabel={humanizeString}
           value={value.timing.rangeStart?.[0] ?? timelineRangeNames[0]!}
           getDescription={(timelineRangeName: string) => (
             <Box
@@ -455,9 +452,7 @@ export const AnimationPanelContent = ({ onChange, value, type }: Props) => {
         <Select
           id={fieldIds.rangeEndName}
           options={timelineRangeNames}
-          getLabel={(timelineRangeName: string) =>
-            toPascalCase(timelineRangeName)
-          }
+          getLabel={humanizeString}
           value={value.timing.rangeEnd?.[0] ?? timelineRangeNames[0]!}
           getDescription={(timelineRangeName: string) => (
             <Box

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import {
   Grid,
   theme,
@@ -20,7 +21,6 @@ import type {
   AnimationActionScroll,
   InsetUnitValue,
 } from "@webstudio-is/sdk";
-import { toPascalCase } from "~/builder/features/style-panel/shared/keyword-utils";
 import {
   animationActionSchema,
   insetUnitValueSchema,
@@ -34,7 +34,7 @@ import {
   CssValueInput,
   type IntermediateStyleValue,
 } from "~/builder/features/style-panel/shared/css-value-input";
-import { useState } from "react";
+import { humanizeString } from "~/shared/string-utils";
 
 const animationTypeDescription: Record<AnimationAction["type"], string> = {
   scroll:
@@ -292,9 +292,7 @@ export const AnimateSection = ({
           <Select
             id={fieldIds.type}
             options={animationTypes}
-            getLabel={(animationType: AnimationAction["type"]) =>
-              toPascalCase(animationType)
-            }
+            getLabel={humanizeString}
             value={value.type}
             getDescription={(animationType: AnimationAction["type"]) => (
               <Box
@@ -352,9 +350,7 @@ export const AnimateSection = ({
             <Select
               id={fieldIds.source}
               options={animationSources}
-              getLabel={(
-                animationSource: NonNullable<AnimationActionScroll["source"]>
-              ) => toPascalCase(animationSource)}
+              getLabel={humanizeString}
               value={value.source ?? "nearest"}
               getDescription={(
                 animationSource: NonNullable<AnimationActionScroll["source"]>

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

@@ -1,4 +1,3 @@
-import { noCase } from "change-case";
 import {
   camelCaseProperty,
   declarationDescriptions,
@@ -11,7 +10,6 @@ import {
   type CssProperty,
 } from "@webstudio-is/css-engine";
 import { Box, Select, theme } from "@webstudio-is/design-system";
-import { toKebabCase } from "../../shared/keyword-utils";
 import { useComputedStyleDecl } from "../../shared/model";
 import {
   resetEphemeralStyles,
@@ -70,7 +68,6 @@ export const SelectControl = ({
       // Show empty field instead of radix placeholder like css value input does.
       placeholder=""
       options={options}
-      getLabel={toKebabCase}
       value={valueString}
       onChange={(name) => setValue({ type: "keyword", value: name })}
       onItemHighlight={(name) => {
@@ -100,7 +97,7 @@ export const SelectControl = ({
           declarationDescriptions[`${camelCaseProperty(property)}:${option}`];
         return (
           <Box css={{ width: theme.spacing[26] }}>
-            {description ?? `The ${noCase(property)} is ${option}`}
+            {description ?? `The ${property} is ${option}`}
           </Box>
         );
       }}

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-thumbnail.tsx

@@ -9,7 +9,7 @@ import {
 } from "@webstudio-is/css-engine";
 import { $assets } from "~/shared/nano-states";
 import brokenImage from "~/shared/images/broken-image-placeholder.svg";
-import { toPascalCase } from "../../shared/keyword-utils";
+import { humanizeString } from "~/shared/string-utils";
 import { useComputedStyles } from "../../shared/model";
 import { getComputedRepeatedItem } from "../../shared/repeated-style";
 
@@ -105,7 +105,7 @@ export const getBackgroundLabel = (
       backgroundImageStyle.value.includes(name)
     );
 
-    return gradientName ? toPascalCase(gradientName) : "Gradient";
+    return gradientName ? humanizeString(gradientName) : "Gradient";
   }
 
   return "None";

apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadows.tsx

@@ -78,7 +78,7 @@ export const Section = () => {
       onAdd={() => {
         addRepeatedStyleItem(
           [styleDecl],
-          parseCssFragment(initialBoxShadow, ["boxShadow"])
+          parseCssFragment(initialBoxShadow, ["box-shadow"])
         );
       }}
     >

apps/builder/app/builder/features/style-panel/sections/text-shadows/text-shadows.tsx

@@ -65,7 +65,7 @@ export const Section = () => {
       onAdd={() => {
         addRepeatedStyleItem(
           [styleDecl],
-          parseCssFragment(initialTextShadow, ["textShadow"])
+          parseCssFragment(initialTextShadow, ["text-shadow"])
         );
       }}
     >

apps/builder/app/builder/features/style-panel/shared/css-fragment.tsx

@@ -7,7 +7,7 @@ import {
   completionKeymap,
   type CompletionSource,
 } from "@codemirror/autocomplete";
-import { parseCss } from "@webstudio-is/css-data";
+import { parseCss, shorthandProperties } from "@webstudio-is/css-data";
 import { css as style } from "@webstudio-is/design-system";
 import type { CssProperty, StyleValue } from "@webstudio-is/css-engine";
 import {
@@ -19,9 +19,11 @@ import {
 } from "~/builder/shared/code-editor-base";
 import { $availableVariables } from "./model";
 
+type ShorthandProperty = (typeof shorthandProperties)[number];
+
 export const parseCssFragment = (
   css: string,
-  fallbacks: string[]
+  fallbacks: (CssProperty | ShorthandProperty)[]
 ): Map<CssProperty, StyleValue> => {
   let parsed = parseCss(`.styles{${css}}`);
   if (parsed.length === 0) {

apps/builder/app/builder/features/style-panel/shared/css-value-input/keyword-utils.test.ts

@@ -1,3 +1,4 @@
+import { kebabCase } from "change-case";
 import type {
   StyleValue,
   InvalidValue,
@@ -12,7 +13,6 @@ import {
 } from "@webstudio-is/css-data";
 import type { IntermediateStyleValue } from "./css-value-input";
 import { evaluateMath } from "./evaluate-math";
-import { toKebabCase } from "../keyword-utils";
 
 const unitsList = Object.values(units).flat();
 
@@ -110,7 +110,7 @@ export const parseIntermediateOrInvalidValue = (
   }
 
   // Probably in kebab-case value will be valid
-  styleInput = parseCssValue(property, toKebabCase(value));
+  styleInput = parseCssValue(property, kebabCase(value));
 
   if (styleInput.type !== "invalid") {
     return styleInput;

apps/builder/app/builder/features/style-panel/shared/css-value-input/parse-intermediate-or-invalid-value.ts

@@ -1,14 +1,8 @@
 import { describe, test, expect } from "vitest";
 import { parseIntermediateOrInvalidValue } from "./parse-intermediate-or-invalid-value";
-import { toKebabCase, toPascalCase } from "../keyword-utils";
 
 const properties = ["width", "line-height"] as const;
 
-const propertiesAndKeywords = [
-  ["width", "auto" as string],
-  ["line-height", "normal" as string],
-] as const;
-
 test("forgive trailing semicolon", () => {
   expect(
     parseIntermediateOrInvalidValue("width", {
@@ -99,37 +93,37 @@ describe("Parse intermediate or invalid value without math evaluation", () => {
   });
 
   test("accept keywords", () => {
-    for (const [propery, keyword] of propertiesAndKeywords) {
-      const result = parseIntermediateOrInvalidValue(propery, {
+    expect(
+      parseIntermediateOrInvalidValue("width", {
         type: "intermediate",
-        value: keyword,
+        value: "auto",
         unit: "em",
-      });
-
-      expect(result).toEqual({
-        type: "keyword",
-        value: keyword,
-      });
-    }
+      })
+    ).toEqual({ type: "keyword", value: "auto" });
+    expect(
+      parseIntermediateOrInvalidValue("line-height", {
+        type: "intermediate",
+        value: "normal",
+        unit: "em",
+      })
+    ).toEqual({ type: "keyword", value: "normal" });
   });
 
   test("accept keywords written as pascal case", () => {
-    const pascalCaseKeywords = propertiesAndKeywords.map(
-      ([property, keyword]) => [property, toPascalCase(keyword)] as const
-    );
-
-    for (const [propery, keyword] of pascalCaseKeywords) {
-      const result = parseIntermediateOrInvalidValue(propery, {
+    expect(
+      parseIntermediateOrInvalidValue("width", {
         type: "intermediate",
-        value: keyword,
+        value: "Auto",
         unit: "em",
-      });
-
-      expect(result).toEqual({
-        type: "keyword",
-        value: toKebabCase(keyword),
-      });
-    }
+      })
+    ).toEqual({ type: "keyword", value: "auto" });
+    expect(
+      parseIntermediateOrInvalidValue("line-height", {
+        type: "intermediate",
+        value: "Normal",
+        unit: "em",
+      })
+    ).toEqual({ type: "keyword", value: "normal" });
   });
 
   test("keyword with pascal case name", () => {