refactor: switch to hyphenated preset styles (#4930)

Replaced camel case with kebab in all presets

Author: TrySound

apps/builder/app/builder/features/style-panel/shared/model.tsx

@@ -2,7 +2,7 @@ import { useMemo, useRef } from "react";
 import type { HtmlTags } from "html-tags";
 import { computed, type ReadableAtom } from "nanostores";
 import { useStore } from "@nanostores/react";
-import { properties } from "@webstudio-is/css-data";
+import { camelCaseProperty, properties } from "@webstudio-is/css-data";
 import {
   compareMedia,
   toVarFallback,
@@ -155,7 +155,10 @@ export const getDefinedStyles = ({
     const meta = metas.get(instance.component);
     for (const preset of Object.values(meta?.presetStyle ?? {})) {
       for (const styleDecl of preset) {
-        presetStyles.add(styleDecl);
+        presetStyles.add({
+          property: camelCaseProperty(styleDecl.property),
+          value: styleDecl.value,
+        });
       }
     }
     const styleSources = styleSourceSelections.get(instance.id)?.values;

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

@@ -753,6 +753,7 @@ test("support html styles", () => {
     jsx: (
       <$.Body ws:id="bodyId" ws:tag="body">
         <$.Span ws:id="spanId" ws:tag="span"></$.Span>
+        <$.Heading ws:id="headingId" ws:tag="h1"></$.Heading>
       </$.Body>
     ),
   });
@@ -764,6 +765,13 @@ test("support html styles", () => {
       property: "display",
     }).usedValue
   ).toEqual({ type: "keyword", value: "block" });
+  expect(
+    getComputedStyleDecl({
+      model,
+      instanceSelector: ["headingId", "bodyId"],
+      property: "marginTop",
+    }).usedValue
+  ).toEqual({ type: "unit", value: 0.67, unit: "em" });
   // tag without browser styles
   expect(
     getComputedStyleDecl({

apps/builder/app/shared/style-object-model.ts

@@ -1,11 +1,13 @@
 import type { HtmlTags } from "html-tags";
 import { html, properties } from "@webstudio-is/css-data";
-import type {
-  StyleValue,
-  StyleProperty,
-  VarFallback,
-  VarValue,
-  UnparsedValue,
+import {
+  type StyleValue,
+  type StyleProperty,
+  type VarFallback,
+  type VarValue,
+  type UnparsedValue,
+  type CssProperty,
+  hyphenateProperty,
 } from "@webstudio-is/css-engine";
 import {
   type Instance,
@@ -93,7 +95,7 @@ export const getPresetStyleDeclKey = ({
   component: string;
   tag: string;
   state?: string;
-  property: string;
+  property: CssProperty;
 }) => `${component}:${tag}:${state ?? ""}:${property}`;
 
 /**
@@ -141,13 +143,14 @@ const getCascadedValue = ({
   let selectedIndex = -1;
   // store the source of latest value
   let source: StyleValueSource = { name: "default" };
+  const hyphenatedProperty = hyphenateProperty(property);
 
   // https://drafts.csswg.org/css-cascade-5/#declared
   const declaredValues: StyleValue[] = [];
 
   // browser styles
   if (tag) {
-    const key = `${tag}:${property}` as const;
+    const key = `${tag}:${hyphenatedProperty}`;
     const browserValue = html.get(key);
     if (browserValue) {
       declaredValues.push(browserValue);
@@ -169,7 +172,12 @@ const getCascadedValue = ({
   // preset component styles
   if (component && tag) {
     for (const state of states) {
-      const key = getPresetStyleDeclKey({ component, tag, state, property });
+      const key = getPresetStyleDeclKey({
+        component,
+        tag,
+        state,
+        property: hyphenatedProperty,
+      });
       const styleValue = presetStyles.get(key);
       if (styleValue) {
         source = { name: "preset", state, instanceId };

apps/builder/app/shared/webstudio-data-migrator.ts

@@ -25,7 +25,7 @@ import { expandShorthands, parseCssValue } from "@webstudio-is/css-data";
  */
 export const migrateWebstudioDataMutable = (data: WebstudioData) => {
   for (const [styleDeclKey, styleDecl] of data.styles) {
-    const property = hyphenateProperty(styleDecl.property);
+    const property = hyphenateProperty(styleDecl.property) as string;
 
     // expands overflow shorthand into overflow-x and overflow-y longhands
     // expands transition shorthand into transition-property, transition-duration, transition-timing-function, transition-delay longhands

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

@@ -1,20 +1,16 @@
 import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import type { StyleValue } from "@webstudio-is/css-engine";
-import { camelCaseProperty, parseCss } from "../src/parse-css";
+import { 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}:${camelCaseProperty(styleDecl.property)}`,
-    styleDecl.value,
-  ]);
+  result.push([`${styleDecl.selector}:${styleDecl.property}`, styleDecl.value]);
 }
 let code = "";
-code += `import type { HtmlTags } from "html-tags";\n`;
 code += `import type { StyleValue } from "@webstudio-is/css-engine";\n\n`;
-const type = "Map<`${HtmlTags}:${string}`, StyleValue>";
+const type = "Map<string, StyleValue>";
 code += `export const html: ${type} = new Map(${JSON.stringify(result)})`;
 
 mkdirSync("./src/__generated__", { recursive: true });