refactor: output hyphenated properties from css parser (#4900)

We are going to switch to hyphenated properties in styles. Here
refactored css parser to output hyphenated property instead of camel
case and added camelCaseProperty utility which does the opposite of
hyphenateProperty.

Author: TrySound

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

@@ -1,12 +1,16 @@
 import {
+  type ParsedStyleDecl,
   properties,
   parseCss,
-  type ParsedStyleDecl,
+  camelCaseProperty,
 } from "@webstudio-is/css-data";
-import { type StyleProperty } from "@webstudio-is/css-engine";
-import { camelCase } from "change-case";
+import type { CssProperty, StyleProperty } from "@webstudio-is/css-engine";
 import { lexer } from "css-tree";
 
+type StyleDecl = Omit<ParsedStyleDecl, "property"> & {
+  property: StyleProperty;
+};
+
 /**
  * Does several attempts to parse:
  * - Custom property "--foo"
@@ -16,7 +20,7 @@ import { lexer } from "css-tree";
  * - Property and value: color: red
  * - Multiple properties: color: red; background: blue
  */
-export const parseStyleInput = (css: string): Array<ParsedStyleDecl> => {
+export const parseStyleInput = (css: string): Array<StyleDecl> => {
   css = css.trim();
   // Is it a custom property "--foo"?
   if (css.startsWith("--") && lexer.match("<custom-ident>", css).matched) {
@@ -30,12 +34,11 @@ export const parseStyleInput = (css: string): Array<ParsedStyleDecl> => {
   }
 
   // Is it a known regular property?
-  const camelCasedProperty = camelCase(css);
-  if (camelCasedProperty in properties) {
+  if (camelCaseProperty(css as CssProperty) in properties) {
     return [
       {
         selector: "selector",
-        property: css as StyleProperty,
+        property: camelCaseProperty(css as CssProperty),
         value: { type: "unset", value: "" },
       },
     ];
@@ -52,20 +55,29 @@ export const parseStyleInput = (css: string): Array<ParsedStyleDecl> => {
     ];
   }
 
-  const styles = parseCss(`selector{${css}}`);
+  const hyphenatedStyles = parseCss(`selector{${css}}`);
+  const newStyles: StyleDecl[] = [];
 
-  for (const style of styles) {
+  for (const { property, ...styleDecl } of hyphenatedStyles) {
     // somethingunknown: red; -> --somethingunknown: red;
     if (
       // Note: currently in tests it returns unparsed, but in the client it returns invalid,
       // because we use native APIs when available in parseCss.
-      style.value.type === "invalid" ||
-      (style.value.type === "unparsed" &&
-        style.property.startsWith("--") === false)
+      styleDecl.value.type === "invalid" ||
+      (styleDecl.value.type === "unparsed" &&
+        property.startsWith("--") === false)
     ) {
-      style.property = `--${style.property}`;
+      newStyles.push({
+        ...styleDecl,
+        property: `--${property}`,
+      });
+    } else {
+      newStyles.push({
+        ...styleDecl,
+        property: camelCaseProperty(property),
+      });
     }
   }
 
-  return styles;
+  return newStyles;
 };

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

@@ -7,8 +7,9 @@ import {
   completionKeymap,
   type CompletionSource,
 } from "@codemirror/autocomplete";
-import { parseCss } from "@webstudio-is/css-data";
+import { camelCaseProperty, parseCss } from "@webstudio-is/css-data";
 import { css as style } from "@webstudio-is/design-system";
+import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";
 import {
   EditorContent,
   EditorDialog,
@@ -18,7 +19,10 @@ import {
 } from "~/builder/shared/code-editor-base";
 import { $availableVariables } from "./model";
 
-export const parseCssFragment = (css: string, fallbacks: string[]) => {
+export const parseCssFragment = (
+  css: string,
+  fallbacks: string[]
+): Map<StyleProperty, StyleValue> => {
   let parsed = parseCss(`.styles{${css}}`);
   if (parsed.length === 0) {
     for (const fallbackProperty of fallbacks) {
@@ -30,7 +34,10 @@ export const parseCssFragment = (css: string, fallbacks: string[]) => {
     }
   }
   return new Map(
-    parsed.map((styleDecl) => [styleDecl.property, styleDecl.value])
+    parsed.map((styleDecl) => [
+      camelCaseProperty(styleDecl.property),
+      styleDecl.value,
+    ])
   );
 };
 

apps/builder/app/shared/copy-paste/plugin-webflow/styles.ts

@@ -7,11 +7,11 @@ import type { WfAsset, WfElementNode, WfNode, WfStyle } from "./schema";
 import { nanoid } from "nanoid";
 import { $styleSources } from "~/shared/nano-states";
 import {
+  camelCaseProperty,
   parseCss,
   pseudoElements,
   type ParsedStyleDecl,
 } from "@webstudio-is/css-data";
-import { kebabCase } from "change-case";
 import { equalMedia, hyphenateProperty } from "@webstudio-is/css-engine";
 import type { WfStylePresets } from "./style-presets-overrides";
 import { builderApi } from "~/shared/builder-api";
@@ -103,7 +103,7 @@ const replaceAtImages = (
 };
 
 const processStyles = (parsedStyles: ParsedStyleDecl[]) => {
-  const styles = new Map();
+  const styles = new Map<string, ParsedStyleDecl>();
   for (const parsedStyleDecl of parsedStyles) {
     const { breakpoint, selector, state, property } = parsedStyleDecl;
     const key = `${breakpoint}:${selector}:${state}:${property}`;
@@ -113,7 +113,7 @@ const processStyles = (parsedStyles: ParsedStyleDecl[]) => {
     const { breakpoint, selector, state, property } = parsedStyleDecl;
     const key = `${breakpoint}:${selector}:${state}:${property}`;
     styles.set(key, parsedStyleDecl);
-    if (property === "backgroundClip") {
+    if (property === "background-clip") {
       const colorKey = `${breakpoint}:${selector}:${state}:color`;
       styles.delete(colorKey);
       styles.set(colorKey, {
@@ -197,12 +197,12 @@ const addNodeStyles = ({
       fragment.styles.push({
         styleSourceId,
         breakpointId: breakpoint.id,
-        property: style.property,
+        property: camelCaseProperty(style.property),
         value: style.value,
         state: style.state,
       });
       if (style.value.type === "invalid") {
-        const error = `Invalid style value: Local "${kebabCase(style.property)}: ${style.value.value}"`;
+        const error = `Invalid style value: Local "${hyphenateProperty(style.property)}: ${style.value.value}"`;
         toast.error(error);
         console.error(error);
       }

apps/builder/app/shared/style-object-model.test.tsx

@@ -10,7 +10,7 @@ import {
   getStyleDeclKey,
 } from "@webstudio-is/sdk";
 import { $, renderData } from "@webstudio-is/template";
-import { parseCss } from "@webstudio-is/css-data";
+import { camelCaseProperty, parseCss } from "@webstudio-is/css-data";
 import type { StyleValue } from "@webstudio-is/css-engine";
 import {
   type StyleObjectModel,
@@ -54,7 +54,7 @@ const createModel = ({
       styleSourceId: selector,
       breakpointId: breakpoint ?? "base",
       state,
-      property,
+      property: camelCaseProperty(property),
       value,
     };
     styles.set(getStyleDeclKey(styleDecl), styleDecl);

packages/ai/src/chains/operations/edit-styles.server.ts

@@ -1,4 +1,7 @@
-import { parseTailwindToWebstudio } from "@webstudio-is/css-data";
+import {
+  camelCaseProperty,
+  parseTailwindToWebstudio,
+} from "@webstudio-is/css-data";
 import type { aiOperation, wsOperation } from "./edit-styles";
 
 export { name } from "./edit-styles";
@@ -11,10 +14,14 @@ export const aiOperationToWs = async (
   if (operation.className === "") {
     throw new Error(`Operation ${operation.operation} className is empty`);
   }
-  const styles = await parseTailwindToWebstudio(operation.className);
+  const hyphenatedStyles = await parseTailwindToWebstudio(operation.className);
+  const newStyles = hyphenatedStyles.map(({ property, ...styleDecl }) => ({
+    ...styleDecl,
+    property: camelCaseProperty(property),
+  }));
   return {
     operation: "applyStyles",
     instanceIds: operation.wsIds,
-    styles: styles,
+    styles: newStyles,
   };
 };

packages/css-data/bin/css-to-ws.ts

@@ -2,7 +2,7 @@
 import { parseArgs, type ParseArgsConfig } from "node:util";
 import * as path from "node:path";
 import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { parseCss } from "../src/parse-css";
+import { camelCaseProperty, parseCss } from "../src/parse-css";
 
 const cliOptions = {
   allowPositionals: true,
@@ -34,7 +34,13 @@ const objectGroupBy = <Item>(list: Item[], by: (item: Item) => string) => {
 };
 
 const css = readFileSync(sourcePath, "utf8");
-const parsed = parseCss(css);
+const parsed = parseCss(css).map(({ property, ...styleDecl }) => ({
+  selector: styleDecl.selector,
+  breakpoint: styleDecl.breakpoint,
+  state: styleDecl.state,
+  property: camelCaseProperty(property),
+  value: styleDecl.value,
+}));
 const records = objectGroupBy(parsed, (item) => item.selector);
 mkdirSync(path.dirname(destinationPath), { recursive: true });
 const code = `/* eslint-disable */

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

@@ -1,12 +1,15 @@
 import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import type { StyleValue } from "@webstudio-is/css-engine";
-import { parseCss } from "../src/parse-css";
+import { camelCaseProperty, parseCss } from "../src/parse-css";
 
 const css = readFileSync("./src/html.css", "utf8");
 const parsed = parseCss(css);
 const result: [string, StyleValue][] = [];
 for (const styleDecl of parsed) {
-  result.push([`${styleDecl.selector}:${styleDecl.property}`, styleDecl.value]);
+  result.push([
+    `${styleDecl.selector}:${camelCaseProperty(styleDecl.property)}`,
+    styleDecl.value,
+  ]);
 }
 let code = "";
 code += `import type { HtmlTags } from "html-tags";\n`;

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

@@ -7,28 +7,18 @@ 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 { camelCase } from "change-case";
-import type {
-  KeywordValue,
-  StyleValue,
-  Unit,
-  UnitValue,
-  UnparsedValue,
-  FontFamilyValue,
+import {
+  type KeywordValue,
+  type StyleValue,
+  type Unit,
+  type UnitValue,
+  type UnparsedValue,
+  type FontFamilyValue,
+  hyphenateProperty,
+  type CssProperty,
 } from "@webstudio-is/css-engine";
 import * as customData from "../src/custom-data";
-
-/**
- * Store prefixed properties without change
- * and convert to camel case only unprefixed properties
- * @todo stop converting to camel case and use hyphenated format
- */
-const normalizePropertyName = (property: string) => {
-  if (property.startsWith("-")) {
-    return property;
-  }
-  return camelCase(property);
-};
+import { camelCaseProperty } from "../src/parse-css";
 
 const units: Record<string, Array<string>> = {
   number: [],
@@ -233,7 +223,7 @@ const walkSyntax = (
   walk(parsed);
 };
 
-type FilteredProperties = { [property in Property]: Value };
+type FilteredProperties = { [property: string]: Value };
 
 const experimentalProperties = [
   "appearance",
@@ -299,7 +289,7 @@ const propertiesData = {
   ...customData.propertiesData,
 };
 
-let property: Property;
+let property: string;
 for (property in filteredProperties) {
   const config = filteredProperties[property];
   const unitGroups = new Set<string>();
@@ -326,7 +316,7 @@ for (property in filteredProperties) {
     );
   }
 
-  propertiesData[normalizePropertyName(property)] = {
+  propertiesData[camelCaseProperty(property as CssProperty)] = {
     unitGroups: Array.from(unitGroups),
     inherited: config.inherited,
     initial: parseInitialValue(property, config.initial, unitGroups),
@@ -367,7 +357,7 @@ const keywordValues = (() => {
   const result = { ...customData.keywordValues };
 
   for (const property in filteredProperties) {
-    const key = normalizePropertyName(property);
+    const key = camelCaseProperty(property as CssProperty);
     // prevent merging with custom keywords
     if (result[key]) {
       continue;
@@ -416,10 +406,14 @@ writeToFile("pseudo-elements.ts", "pseudoElements", pseudoElements);
 
 let types = "";
 
-const propertyLiterals = Object.keys(propertiesData).map((property) =>
+const camelCasedProperties = Object.keys(propertiesData).map((property) =>
   JSON.stringify(property)
 );
-types += `export type Property = ${propertyLiterals.join(" | ")};\n\n`;
+types += `export type CamelCasedProperty = ${camelCasedProperties.join(" | ")};\n\n`;
+const hyphenatedProperties = Object.keys(propertiesData).map((property) =>
+  JSON.stringify(hyphenateProperty(property))
+);
+types += `export type HyphenatedProperty = ${hyphenatedProperties.join(" | ")};\n\n`;
 
 const unitLiterals = Object.values(units)
   .flat()