refactor: migrate css-data to hyphenated properties (#5031)

All parsers/generators accept and produce hyphenated css property. Camel
case is only used for StyleProperty type.

Author: TrySound

apps/builder/app/builder/features/settings-panel/props-section/animation/new-view-animations.ts

@@ -114,13 +114,13 @@ const newWipeInViewAnimation: ViewAnimation = {
     {
       offset: 0,
       styles: {
-        "clip-path": parseCssValue("clipPath", "inset(0 100% 0 0)"),
+        "clip-path": parseCssValue("clip-path", "inset(0 100% 0 0)"),
       },
     },
     {
       offset: 1,
       styles: {
-        "clip-path": parseCssValue("clipPath", "inset(0 0 0 0)"),
+        "clip-path": parseCssValue("clip-path", "inset(0 0 0 0)"),
       },
     },
   ],
@@ -140,14 +140,14 @@ const newWipeOutViewAnimation: ViewAnimation = {
     {
       offset: 0,
       styles: {
-        "clip-path": parseCssValue("clipPath", "inset(0 0 0 0)"),
+        "clip-path": parseCssValue("clip-path", "inset(0 0 0 0)"),
       },
     },
 
     {
       offset: 1,
       styles: {
-        "clip-path": parseCssValue("clipPath", "inset(0 0 0 100%)"),
+        "clip-path": parseCssValue("clip-path", "inset(0 0 0 100%)"),
       },
     },
   ],

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

@@ -86,7 +86,7 @@ export const FontFamilyControl = () => {
         itemToString={(item) => item?.label ?? item?.value ?? ""}
         onItemHighlight={(item) => {
           if (item === null) {
-            setValue(parseCssValue("fontFamily", itemValue), {
+            setValue(parseCssValue("font-family", itemValue), {
               isEphemeral: true,
             });
             return;
@@ -97,7 +97,7 @@ export const FontFamilyControl = () => {
           );
         }}
         onItemSelect={(item) => {
-          setValue(parseCssValue("fontFamily", item.value));
+          setValue(parseCssValue("font-family", item.value));
           setIntermediateValue(undefined);
         }}
         value={{ value: intermediateValue ?? itemValue }}
@@ -108,7 +108,7 @@ export const FontFamilyControl = () => {
           if (isFontManagerOpen) {
             return;
           }
-          setValue(parseCssValue("fontFamily", itemValue));
+          setValue(parseCssValue("font-family", itemValue));
         }}
         match={matchOrSuggestToCreate}
       />

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

@@ -49,7 +49,7 @@ export const BackgroundGradient = ({ index }: { index: number }) => {
     // This doesn't have the same behavior as CssValueInput.
     // However, it's great to see the immediate results when making gradient changes,
     // especially until we have a better gradient tool.
-    const newValue = parseCssValue("backgroundImage", value);
+    const newValue = parseCssValue("background-image", value);
 
     if (newValue.type === "unparsed" || newValue.type === "var") {
       setRepeatedStyleItem(styleDecl, index, newValue, { isEphemeral: true });

apps/builder/app/builder/features/style-panel/sections/shared/value-text.stories.tsx

@@ -46,7 +46,7 @@ export default {
       control: "select",
       options: valueOptions,
       labels: Object.fromEntries(
-        valueOptions.map((value) => [value, parseCssValue("marginTop", value)])
+        valueOptions.map((value) => [value, parseCssValue("margin-top", value)])
       ),
     },
   },

apps/builder/app/builder/features/style-panel/sections/transforms/transform-extractors.test.ts

@@ -112,7 +112,7 @@ describe("extractTransformOrPerspectiveOriginValues", () => {
   test("parses transform-origin and returns the individual properties from the value", () => {
     expect(
       extractTransformOrPerspectiveOriginValues(
-        parseCssValue("transformOrigin", "center") as TupleValue
+        parseCssValue("transform-origin", "center") as TupleValue
       )
     ).toEqual({
       x: { type: "keyword", value: "center" },
@@ -122,7 +122,7 @@ describe("extractTransformOrPerspectiveOriginValues", () => {
 
     expect(
       extractTransformOrPerspectiveOriginValues(
-        parseCssValue("transformOrigin", "top") as TupleValue
+        parseCssValue("transform-origin", "top") as TupleValue
       )
     ).toEqual({
       x: { type: "keyword", value: "center" },
@@ -132,7 +132,7 @@ describe("extractTransformOrPerspectiveOriginValues", () => {
 
     expect(
       extractTransformOrPerspectiveOriginValues(
-        parseCssValue("transformOrigin", "right") as TupleValue
+        parseCssValue("transform-origin", "right") as TupleValue
       )
     ).toEqual({
       x: { type: "keyword", value: "right" },
@@ -142,7 +142,7 @@ describe("extractTransformOrPerspectiveOriginValues", () => {
 
     expect(
       extractTransformOrPerspectiveOriginValues(
-        parseCssValue("transformOrigin", "45px") as TupleValue
+        parseCssValue("transform-origin", "45px") as TupleValue
       )
     ).toEqual({
       x: { type: "unit", unit: "px", value: 45 },
@@ -152,7 +152,7 @@ describe("extractTransformOrPerspectiveOriginValues", () => {
 
     expect(
       extractTransformOrPerspectiveOriginValues(
-        parseCssValue("transformOrigin", "20px 40px") as TupleValue
+        parseCssValue("transform-origin", "20px 40px") as TupleValue
       )
     ).toEqual({
       x: { type: "unit", unit: "px", value: 20 },
@@ -162,7 +162,7 @@ describe("extractTransformOrPerspectiveOriginValues", () => {
 
     expect(
       extractTransformOrPerspectiveOriginValues(
-        parseCssValue("transformOrigin", "10px 20px 30px") as TupleValue
+        parseCssValue("transform-origin", "10px 20px 30px") as TupleValue
       )
     ).toEqual({
       x: { type: "unit", unit: "px", value: 10 },
@@ -172,7 +172,7 @@ describe("extractTransformOrPerspectiveOriginValues", () => {
 
     expect(
       extractTransformOrPerspectiveOriginValues(
-        parseCssValue("transformOrigin", "left top 30px") as TupleValue
+        parseCssValue("transform-origin", "left top 30px") as TupleValue
       )
     ).toEqual({
       x: { type: "keyword", value: "left" },
@@ -182,7 +182,7 @@ describe("extractTransformOrPerspectiveOriginValues", () => {
 
     expect(
       extractTransformOrPerspectiveOriginValues(
-        parseCssValue("transformOrigin", "bottom right 60px") as TupleValue
+        parseCssValue("transform-origin", "bottom right 60px") as TupleValue
       )
     ).toEqual({
       x: { type: "keyword", value: "right" },
@@ -192,7 +192,7 @@ describe("extractTransformOrPerspectiveOriginValues", () => {
 
     expect(
       extractTransformOrPerspectiveOriginValues(
-        parseCssValue("transformOrigin", "left 50% 60px") as TupleValue
+        parseCssValue("transform-origin", "left 50% 60px") as TupleValue
       )
     ).toEqual({
       x: { type: "keyword", value: "left" },
@@ -202,7 +202,7 @@ describe("extractTransformOrPerspectiveOriginValues", () => {
 
     expect(
       extractTransformOrPerspectiveOriginValues(
-        parseCssValue("transformOrigin", "50% bottom 60px") as TupleValue
+        parseCssValue("transform-origin", "50% bottom 60px") as TupleValue
       )
     ).toEqual({
       x: { type: "unit", value: 50, unit: "%" },

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

@@ -7,7 +7,7 @@ setEnv("*");
 
 test("parse var()", () => {
   const result = new Map([
-    ["background-image", parseCssValue("backgroundImage", "var(--bg)")],
+    ["background-image", parseCssValue("background-image", "var(--bg)")],
   ]);
   expect(
     parseCssFragment("var(--bg)", ["background-image", "background"])
@@ -22,17 +22,17 @@ test("parse var()", () => {
 
 test("fallback further to valid values", () => {
   const result = new Map([
-    ["background-image", parseCssValue("backgroundImage", "none")],
-    ["background-position-x", parseCssValue("backgroundPositionX", "0%")],
-    ["background-position-y", parseCssValue("backgroundPositionY", "0%")],
-    ["background-size", parseCssValue("backgroundSize", "auto auto")],
-    ["background-repeat", parseCssValue("backgroundRepeat", "repeat")],
-    ["background-attachment", parseCssValue("backgroundAttachment", "scroll")],
-    ["background-origin", parseCssValue("backgroundOrigin", "padding-box")],
-    ["background-clip", parseCssValue("backgroundClip", "border-box")],
+    ["background-image", parseCssValue("background-image", "none")],
+    ["background-position-x", parseCssValue("background-position-x", "0%")],
+    ["background-position-y", parseCssValue("background-position-y", "0%")],
+    ["background-size", parseCssValue("background-size", "auto auto")],
+    ["background-repeat", parseCssValue("background-repeat", "repeat")],
+    ["background-attachment", parseCssValue("background-attachment", "scroll")],
+    ["background-origin", parseCssValue("background-origin", "padding-box")],
+    ["background-clip", parseCssValue("background-clip", "border-box")],
     [
       "background-color",
-      parseCssValue("backgroundColor", "rgba(255, 255, 255, 1)"),
+      parseCssValue("background-color", "rgba(255, 255, 255, 1)"),
     ],
   ]);
   expect(parseCssFragment("#fff", ["background-image", "background"])).toEqual(
@@ -42,14 +42,14 @@ test("fallback further to valid values", () => {
 
 test("parse shorthand property", () => {
   const result = new Map([
-    ["transition-property", parseCssValue("transitionProperty", "opacity")],
-    ["transition-duration", parseCssValue("transitionDuration", "1s")],
+    ["transition-property", parseCssValue("transition-property", "opacity")],
+    ["transition-duration", parseCssValue("transition-duration", "1s")],
     [
       "transition-timing-function",
-      parseCssValue("transitionTimingFunction", "ease"),
+      parseCssValue("transition-timing-function", "ease"),
     ],
-    ["transition-delay", parseCssValue("transitionDelay", "0s")],
-    ["transition-behavior", parseCssValue("transitionBehavior", "normal")],
+    ["transition-delay", parseCssValue("transition-delay", "0s")],
+    ["transition-behavior", parseCssValue("transition-behavior", "normal")],
   ]);
   expect(parseCssFragment("opacity 1s", ["transition"])).toEqual(result);
   expect(parseCssFragment("transition: opacity 1s", ["transition"])).toEqual(
@@ -68,8 +68,8 @@ test("parse longhand properties", () => {
     )
   ).toEqual(
     new Map([
-      ["transition-property", parseCssValue("transitionProperty", "opacity")],
-      ["transition-duration", parseCssValue("transitionDuration", "1s")],
+      ["transition-property", parseCssValue("transition-property", "opacity")],
+      ["transition-duration", parseCssValue("transition-duration", "1s")],
     ])
   );
 });

apps/builder/app/builder/features/style-panel/shared/filter-content.tsx

@@ -50,7 +50,7 @@ const filterFunctions = {
   // and pass the args as value and property
   "drop-shadow": {
     default: "0px 2px 5px rgba(0, 0, 0, 0.2)",
-    fakeProperty: "textShadow",
+    fakeProperty: "text-shadow",
   },
   // https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale#syntax
   // number  | percentage

packages/css-data/bin/mdn-data.ts

@@ -7,15 +7,14 @@ import properties from "mdn-data/css/properties.json";
 import syntaxes from "mdn-data/css/syntaxes.json";
 import selectors from "mdn-data/css/selectors.json";
 import data from "css-tree/dist/data";
-import {
-  type KeywordValue,
-  type StyleValue,
-  type Unit,
-  type UnitValue,
-  type UnparsedValue,
-  type FontFamilyValue,
-  type CssProperty,
-  hyphenateProperty,
+import type {
+  KeywordValue,
+  StyleValue,
+  Unit,
+  UnitValue,
+  UnparsedValue,
+  FontFamilyValue,
+  CssProperty,
 } from "@webstudio-is/css-engine";
 import * as customData from "../src/custom-data";
 import { camelCaseProperty } from "../src/parse-css";
@@ -356,7 +355,7 @@ const getPropertiesData = (
       );
     }
 
-    propertiesData[camelCaseProperty(property as CssProperty)] = {
+    propertiesData[property] = {
       unitGroups: Array.from(unitGroups),
       inherited: config.inherited,
       initial: parseInitialValue(property, config.initial, unitGroups),
@@ -383,20 +382,16 @@ const getKeywordValues = (filteredProperties: FilteredProperties) => {
   const commonKeywords = ["initial", "inherit", "unset"];
 
   for (const property in filteredProperties) {
-    const key = camelCaseProperty(property as CssProperty);
     // prevent merging with custom keywords
-    if (result[key]) {
+    if (result[property]) {
       continue;
     }
     const keywords = new Set<string>();
-    walkSyntax(
-      filteredProperties[property as keyof typeof filteredProperties].syntax,
-      (node) => {
-        if (node.type === "Keyword") {
-          keywords.add(beautifyKeyword(property, node.name));
-        }
+    walkSyntax(filteredProperties[property].syntax, (node) => {
+      if (node.type === "Keyword") {
+        keywords.add(beautifyKeyword(property, node.name));
       }
-    );
+    });
 
     if (property in nonStandardValues) {
       for (const nonStandartKeyword of nonStandardValues[
@@ -411,7 +406,7 @@ const getKeywordValues = (filteredProperties: FilteredProperties) => {
       keywords.add(commonKeyword);
     }
 
-    result[key] = [...(result[key] ?? []), ...keywords];
+    result[property] = [...(result[property] ?? []), ...keywords];
   }
 
   return result;
@@ -421,11 +416,11 @@ const getTypes = (propertiesData: typeof customData.propertiesData) => {
   let types = "";
 
   const camelCasedProperties = Object.keys(propertiesData).map((property) =>
-    JSON.stringify(property)
+    JSON.stringify(camelCaseProperty(property as CssProperty))
   );
   types += `export type CamelCasedProperty = ${camelCasedProperties.join(" | ")};\n\n`;
   const hyphenatedProperties = Object.keys(propertiesData).map((property) =>
-    JSON.stringify(hyphenateProperty(property))
+    JSON.stringify(property)
   );
   types += `export type HyphenatedProperty = ${hyphenatedProperties.join(" | ")};\n\n`;
 
@@ -450,7 +445,7 @@ writeToFile("units.ts", "units", units);
 
 const propertiesData = Object.fromEntries(
   Object.entries(longhandPropertiesData).map(([property, data]) => [
-    hyphenateProperty(property),
+    property,
     data,
   ])
 );
@@ -474,7 +469,7 @@ writeFileSync(join(targetDir, "properties.ts"), propertiesContent);
 
 const keywordValues = Object.fromEntries(
   Object.entries(getKeywordValues(filteredData.allLonghands)).map(
-    ([property, data]) => [hyphenateProperty(property), data]
+    ([property, data]) => [property, data]
   )
 );
 const keywordValuesContent = `${autogeneratedHint}