diff --git a/apps/builder/app/builder/features/style-panel/shared/model.tsx b/apps/builder/app/builder/features/style-panel/shared/model.tsx
index 686ae7fb9fb4..13c589d7fb6b 100644
--- a/apps/builder/app/builder/features/style-panel/shared/model.tsx
+++ b/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;
diff --git a/apps/builder/app/shared/style-object-model.test.tsx b/apps/builder/app/shared/style-object-model.test.tsx
index 9a2cb715ad81..c78d4a323c65 100644
--- a/apps/builder/app/shared/style-object-model.test.tsx
+++ b/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({
diff --git a/apps/builder/app/shared/style-object-model.ts b/apps/builder/app/shared/style-object-model.ts
index 73533b44429a..755b6fd03e14 100644
--- a/apps/builder/app/shared/style-object-model.ts
+++ b/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 };
diff --git a/apps/builder/app/shared/webstudio-data-migrator.ts b/apps/builder/app/shared/webstudio-data-migrator.ts
index 239d6d78cf09..11c5281b1a27 100644
--- a/apps/builder/app/shared/webstudio-data-migrator.ts
+++ b/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
diff --git a/packages/css-data/bin/html.css.ts b/packages/css-data/bin/html.css.ts
index 67d55edf84dd..04b823c45b82 100644
--- a/packages/css-data/bin/html.css.ts
+++ b/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 });
diff --git a/packages/css-data/src/__generated__/html.ts b/packages/css-data/src/__generated__/html.ts
index 8dd64bd0d8d8..ab93882f5ae6 100644
--- a/packages/css-data/src/__generated__/html.ts
+++ b/packages/css-data/src/__generated__/html.ts
@@ -1,7 +1,6 @@
-import type { HtmlTags } from "html-tags";
 import type { StyleValue } from "@webstudio-is/css-engine";
 
-export const html: Map<`${HtmlTags}:${string}`, StyleValue> = new Map([
+export const html: Map<string, StyleValue> = new Map([
   ["article:display", { type: "keyword", value: "block" }],
   ["aside:display", { type: "keyword", value: "block" }],
   ["details:display", { type: "keyword", value: "block" }],
@@ -18,218 +17,218 @@ export const html: Map<`${HtmlTags}:${string}`, StyleValue> = new Map([
   ["section:display", { type: "keyword", value: "block" }],
   ["summary:display", { type: "keyword", value: "block" }],
   ["body:display", { type: "keyword", value: "block" }],
-  ["body:marginTop", { type: "unit", unit: "px", value: 8 }],
-  ["body:marginRight", { type: "unit", unit: "px", value: 8 }],
-  ["body:marginBottom", { type: "unit", unit: "px", value: 8 }],
-  ["body:marginLeft", { type: "unit", unit: "px", value: 8 }],
+  ["body:margin-top", { type: "unit", unit: "px", value: 8 }],
+  ["body:margin-right", { type: "unit", unit: "px", value: 8 }],
+  ["body:margin-bottom", { type: "unit", unit: "px", value: 8 }],
+  ["body:margin-left", { type: "unit", unit: "px", value: 8 }],
   ["p:display", { type: "keyword", value: "block" }],
   ["dl:display", { type: "keyword", value: "block" }],
-  ["p:marginTop", { type: "unit", unit: "em", value: 1 }],
-  ["dl:marginTop", { type: "unit", unit: "em", value: 1 }],
-  ["p:marginBottom", { type: "unit", unit: "em", value: 1 }],
-  ["dl:marginBottom", { type: "unit", unit: "em", value: 1 }],
+  ["p:margin-top", { type: "unit", unit: "em", value: 1 }],
+  ["dl:margin-top", { type: "unit", unit: "em", value: 1 }],
+  ["p:margin-bottom", { type: "unit", unit: "em", value: 1 }],
+  ["dl:margin-bottom", { type: "unit", unit: "em", value: 1 }],
   ["dd:display", { type: "keyword", value: "block" }],
-  ["dd:marginLeft", { type: "unit", unit: "px", value: 40 }],
+  ["dd:margin-left", { type: "unit", unit: "px", value: 40 }],
   ["blockquote:display", { type: "keyword", value: "block" }],
   ["figure:display", { type: "keyword", value: "block" }],
-  ["blockquote:marginTop", { type: "unit", unit: "em", value: 1 }],
-  ["blockquote:marginRight", { type: "unit", unit: "px", value: 40 }],
-  ["blockquote:marginBottom", { type: "unit", unit: "em", value: 1 }],
-  ["blockquote:marginLeft", { type: "unit", unit: "px", value: 40 }],
-  ["figure:marginTop", { type: "unit", unit: "em", value: 1 }],
-  ["figure:marginRight", { type: "unit", unit: "px", value: 40 }],
-  ["figure:marginBottom", { type: "unit", unit: "em", value: 1 }],
-  ["figure:marginLeft", { type: "unit", unit: "px", value: 40 }],
+  ["blockquote:margin-top", { type: "unit", unit: "em", value: 1 }],
+  ["blockquote:margin-right", { type: "unit", unit: "px", value: 40 }],
+  ["blockquote:margin-bottom", { type: "unit", unit: "em", value: 1 }],
+  ["blockquote:margin-left", { type: "unit", unit: "px", value: 40 }],
+  ["figure:margin-top", { type: "unit", unit: "em", value: 1 }],
+  ["figure:margin-right", { type: "unit", unit: "px", value: 40 }],
+  ["figure:margin-bottom", { type: "unit", unit: "em", value: 1 }],
+  ["figure:margin-left", { type: "unit", unit: "px", value: 40 }],
   ["address:display", { type: "keyword", value: "block" }],
-  ["address:fontStyle", { type: "keyword", value: "italic" }],
+  ["address:font-style", { type: "keyword", value: "italic" }],
   ["h1:display", { type: "keyword", value: "block" }],
-  ["h1:fontWeight", { type: "keyword", value: "bold" }],
-  ["h1:fontSize", { type: "unit", unit: "em", value: 2 }],
-  ["h1:marginTop", { type: "unit", unit: "em", value: 0.67 }],
-  ["h1:marginBottom", { type: "unit", unit: "em", value: 0.67 }],
+  ["h1:font-weight", { type: "keyword", value: "bold" }],
+  ["h1:font-size", { type: "unit", unit: "em", value: 2 }],
+  ["h1:margin-top", { type: "unit", unit: "em", value: 0.67 }],
+  ["h1:margin-bottom", { type: "unit", unit: "em", value: 0.67 }],
   ["h2:display", { type: "keyword", value: "block" }],
-  ["h2:fontWeight", { type: "keyword", value: "bold" }],
-  ["h2:fontSize", { type: "unit", unit: "em", value: 1.5 }],
-  ["h2:marginTop", { type: "unit", unit: "em", value: 0.83 }],
-  ["h2:marginBottom", { type: "unit", unit: "em", value: 0.83 }],
+  ["h2:font-weight", { type: "keyword", value: "bold" }],
+  ["h2:font-size", { type: "unit", unit: "em", value: 1.5 }],
+  ["h2:margin-top", { type: "unit", unit: "em", value: 0.83 }],
+  ["h2:margin-bottom", { type: "unit", unit: "em", value: 0.83 }],
   ["h3:display", { type: "keyword", value: "block" }],
-  ["h3:fontWeight", { type: "keyword", value: "bold" }],
-  ["h3:fontSize", { type: "unit", unit: "em", value: 1.17 }],
-  ["h3:marginTop", { type: "unit", unit: "em", value: 1 }],
-  ["h3:marginBottom", { type: "unit", unit: "em", value: 1 }],
+  ["h3:font-weight", { type: "keyword", value: "bold" }],
+  ["h3:font-size", { type: "unit", unit: "em", value: 1.17 }],
+  ["h3:margin-top", { type: "unit", unit: "em", value: 1 }],
+  ["h3:margin-bottom", { type: "unit", unit: "em", value: 1 }],
   ["h4:display", { type: "keyword", value: "block" }],
-  ["h4:fontWeight", { type: "keyword", value: "bold" }],
-  ["h4:marginTop", { type: "unit", unit: "em", value: 1.33 }],
-  ["h4:marginBottom", { type: "unit", unit: "em", value: 1.33 }],
+  ["h4:font-weight", { type: "keyword", value: "bold" }],
+  ["h4:margin-top", { type: "unit", unit: "em", value: 1.33 }],
+  ["h4:margin-bottom", { type: "unit", unit: "em", value: 1.33 }],
   ["h5:display", { type: "keyword", value: "block" }],
-  ["h5:fontWeight", { type: "keyword", value: "bold" }],
-  ["h5:fontSize", { type: "unit", unit: "em", value: 0.83 }],
-  ["h5:marginTop", { type: "unit", unit: "em", value: 1.67 }],
-  ["h5:marginBottom", { type: "unit", unit: "em", value: 1.67 }],
+  ["h5:font-weight", { type: "keyword", value: "bold" }],
+  ["h5:font-size", { type: "unit", unit: "em", value: 0.83 }],
+  ["h5:margin-top", { type: "unit", unit: "em", value: 1.67 }],
+  ["h5:margin-bottom", { type: "unit", unit: "em", value: 1.67 }],
   ["h6:display", { type: "keyword", value: "block" }],
-  ["h6:fontWeight", { type: "keyword", value: "bold" }],
-  ["h6:fontSize", { type: "unit", unit: "em", value: 0.67 }],
-  ["h6:marginTop", { type: "unit", unit: "em", value: 2.33 }],
-  ["h6:marginBottom", { type: "unit", unit: "em", value: 2.33 }],
+  ["h6:font-weight", { type: "keyword", value: "bold" }],
+  ["h6:font-size", { type: "unit", unit: "em", value: 0.67 }],
+  ["h6:margin-top", { type: "unit", unit: "em", value: 2.33 }],
+  ["h6:margin-bottom", { type: "unit", unit: "em", value: 2.33 }],
   ["pre:display", { type: "keyword", value: "block" }],
-  ["pre:whiteSpaceCollapse", { type: "keyword", value: "preserve" }],
-  ["pre:textWrapMode", { type: "keyword", value: "nowrap" }],
-  ["pre:marginTop", { type: "unit", unit: "em", value: 1 }],
-  ["pre:marginBottom", { type: "unit", unit: "em", value: 1 }],
+  ["pre:white-space-collapse", { type: "keyword", value: "preserve" }],
+  ["pre:text-wrap-mode", { type: "keyword", value: "nowrap" }],
+  ["pre:margin-top", { type: "unit", unit: "em", value: 1 }],
+  ["pre:margin-bottom", { type: "unit", unit: "em", value: 1 }],
   ["table:display", { type: "keyword", value: "table" }],
-  ["table:borderSpacing", { type: "unit", unit: "px", value: 2 }],
-  ["table:borderCollapse", { type: "keyword", value: "separate" }],
-  ["table:boxSizing", { type: "keyword", value: "border-box" }],
-  ["table:textIndent", { type: "unit", unit: "number", value: 0 }],
+  ["table:border-spacing", { type: "unit", unit: "px", value: 2 }],
+  ["table:border-collapse", { type: "keyword", value: "separate" }],
+  ["table:box-sizing", { type: "keyword", value: "border-box" }],
+  ["table:text-indent", { type: "unit", unit: "number", value: 0 }],
   ["caption:display", { type: "keyword", value: "table-caption" }],
-  ["caption:textAlign", { type: "keyword", value: "center" }],
+  ["caption:text-align", { type: "keyword", value: "center" }],
   ["tr:display", { type: "keyword", value: "table-row" }],
-  ["tr:verticalAlign", { type: "keyword", value: "inherit" }],
+  ["tr:vertical-align", { type: "keyword", value: "inherit" }],
   ["col:display", { type: "keyword", value: "table-column" }],
   ["colgroup:display", { type: "keyword", value: "table-column-group" }],
   ["tbody:display", { type: "keyword", value: "table-row-group" }],
-  ["tbody:verticalAlign", { type: "keyword", value: "middle" }],
+  ["tbody:vertical-align", { type: "keyword", value: "middle" }],
   ["thead:display", { type: "keyword", value: "table-header-group" }],
-  ["thead:verticalAlign", { type: "keyword", value: "middle" }],
+  ["thead:vertical-align", { type: "keyword", value: "middle" }],
   ["tfoot:display", { type: "keyword", value: "table-footer-group" }],
-  ["tfoot:verticalAlign", { type: "keyword", value: "middle" }],
+  ["tfoot:vertical-align", { type: "keyword", value: "middle" }],
   ["td:display", { type: "keyword", value: "table-cell" }],
-  ["td:verticalAlign", { type: "keyword", value: "inherit" }],
-  ["td:paddingTop", { type: "unit", unit: "px", value: 1 }],
-  ["td:paddingRight", { type: "unit", unit: "px", value: 1 }],
-  ["td:paddingBottom", { type: "unit", unit: "px", value: 1 }],
-  ["td:paddingLeft", { type: "unit", unit: "px", value: 1 }],
+  ["td:vertical-align", { type: "keyword", value: "inherit" }],
+  ["td:padding-top", { type: "unit", unit: "px", value: 1 }],
+  ["td:padding-right", { type: "unit", unit: "px", value: 1 }],
+  ["td:padding-bottom", { type: "unit", unit: "px", value: 1 }],
+  ["td:padding-left", { type: "unit", unit: "px", value: 1 }],
   ["th:display", { type: "keyword", value: "table-cell" }],
-  ["th:verticalAlign", { type: "keyword", value: "inherit" }],
-  ["th:fontWeight", { type: "keyword", value: "bold" }],
-  ["th:paddingTop", { type: "unit", unit: "px", value: 1 }],
-  ["th:paddingRight", { type: "unit", unit: "px", value: 1 }],
-  ["th:paddingBottom", { type: "unit", unit: "px", value: 1 }],
-  ["th:paddingLeft", { type: "unit", unit: "px", value: 1 }],
-  ["b:fontWeight", { type: "keyword", value: "bold" }],
-  ["strong:fontWeight", { type: "keyword", value: "bold" }],
-  ["i:fontStyle", { type: "keyword", value: "italic" }],
-  ["cite:fontStyle", { type: "keyword", value: "italic" }],
-  ["em:fontStyle", { type: "keyword", value: "italic" }],
-  ["var:fontStyle", { type: "keyword", value: "italic" }],
-  ["dfn:fontStyle", { type: "keyword", value: "italic" }],
-  ["code:fontFamily", { type: "fontFamily", value: ["monospace"] }],
-  ["kbd:fontFamily", { type: "fontFamily", value: ["monospace"] }],
-  ["samp:fontFamily", { type: "fontFamily", value: ["monospace"] }],
-  ["mark:backgroundColor", { type: "keyword", value: "yellow" }],
+  ["th:vertical-align", { type: "keyword", value: "inherit" }],
+  ["th:font-weight", { type: "keyword", value: "bold" }],
+  ["th:padding-top", { type: "unit", unit: "px", value: 1 }],
+  ["th:padding-right", { type: "unit", unit: "px", value: 1 }],
+  ["th:padding-bottom", { type: "unit", unit: "px", value: 1 }],
+  ["th:padding-left", { type: "unit", unit: "px", value: 1 }],
+  ["b:font-weight", { type: "keyword", value: "bold" }],
+  ["strong:font-weight", { type: "keyword", value: "bold" }],
+  ["i:font-style", { type: "keyword", value: "italic" }],
+  ["cite:font-style", { type: "keyword", value: "italic" }],
+  ["em:font-style", { type: "keyword", value: "italic" }],
+  ["var:font-style", { type: "keyword", value: "italic" }],
+  ["dfn:font-style", { type: "keyword", value: "italic" }],
+  ["code:font-family", { type: "fontFamily", value: ["monospace"] }],
+  ["kbd:font-family", { type: "fontFamily", value: ["monospace"] }],
+  ["samp:font-family", { type: "fontFamily", value: ["monospace"] }],
+  ["mark:background-color", { type: "keyword", value: "yellow" }],
   ["mark:color", { type: "keyword", value: "black" }],
-  ["u:textDecorationLine", { type: "keyword", value: "underline" }],
-  ["ins:textDecorationLine", { type: "keyword", value: "underline" }],
-  ["s:textDecorationLine", { type: "keyword", value: "line-through" }],
-  ["del:textDecorationLine", { type: "keyword", value: "line-through" }],
-  ["sub:verticalAlign", { type: "keyword", value: "sub" }],
-  ["sub:fontSize", { type: "keyword", value: "smaller" }],
-  ["sup:verticalAlign", { type: "keyword", value: "super" }],
-  ["sup:fontSize", { type: "keyword", value: "smaller" }],
-  ["a:textDecorationLine", { type: "keyword", value: "underline" }],
+  ["u:text-decoration-line", { type: "keyword", value: "underline" }],
+  ["ins:text-decoration-line", { type: "keyword", value: "underline" }],
+  ["s:text-decoration-line", { type: "keyword", value: "line-through" }],
+  ["del:text-decoration-line", { type: "keyword", value: "line-through" }],
+  ["sub:vertical-align", { type: "keyword", value: "sub" }],
+  ["sub:font-size", { type: "keyword", value: "smaller" }],
+  ["sup:vertical-align", { type: "keyword", value: "super" }],
+  ["sup:font-size", { type: "keyword", value: "smaller" }],
+  ["a:text-decoration-line", { type: "keyword", value: "underline" }],
   ["a:cursor", { type: "keyword", value: "pointer" }],
   ["a:color", { type: "rgb", alpha: 1, r: 0, g: 0, b: 238 }],
   ["ul:display", { type: "keyword", value: "block" }],
-  ["ul:listStyleType", { type: "keyword", value: "disc" }],
-  ["ul:marginTop", { type: "unit", unit: "em", value: 1 }],
-  ["ul:marginBottom", { type: "unit", unit: "em", value: 1 }],
-  ["ul:paddingLeft", { type: "unit", unit: "px", value: 40 }],
+  ["ul:list-style-type", { type: "keyword", value: "disc" }],
+  ["ul:margin-top", { type: "unit", unit: "em", value: 1 }],
+  ["ul:margin-bottom", { type: "unit", unit: "em", value: 1 }],
+  ["ul:padding-left", { type: "unit", unit: "px", value: 40 }],
   ["ol:display", { type: "keyword", value: "block" }],
-  ["ol:listStyleType", { type: "keyword", value: "decimal" }],
-  ["ol:marginTop", { type: "unit", unit: "em", value: 1 }],
-  ["ol:marginBottom", { type: "unit", unit: "em", value: 1 }],
-  ["ol:paddingLeft", { type: "unit", unit: "px", value: 40 }],
+  ["ol:list-style-type", { type: "keyword", value: "decimal" }],
+  ["ol:margin-top", { type: "unit", unit: "em", value: 1 }],
+  ["ol:margin-bottom", { type: "unit", unit: "em", value: 1 }],
+  ["ol:padding-left", { type: "unit", unit: "px", value: 40 }],
   ["li:display", { type: "keyword", value: "list-item" }],
-  ["li:textAlign", { type: "keyword", value: "match-parent" }],
+  ["li:text-align", { type: "keyword", value: "match-parent" }],
   ["hr:color", { type: "keyword", value: "gray" }],
-  ["hr:borderTopWidth", { type: "unit", unit: "px", value: 1 }],
-  ["hr:borderRightWidth", { type: "unit", unit: "px", value: 1 }],
-  ["hr:borderBottomWidth", { type: "unit", unit: "px", value: 1 }],
-  ["hr:borderLeftWidth", { type: "unit", unit: "px", value: 1 }],
-  ["hr:borderTopStyle", { type: "keyword", value: "solid" }],
-  ["hr:borderRightStyle", { type: "keyword", value: "solid" }],
-  ["hr:borderBottomStyle", { type: "keyword", value: "solid" }],
-  ["hr:borderLeftStyle", { type: "keyword", value: "solid" }],
-  ["hr:marginTop", { type: "unit", unit: "em", value: 0.5 }],
-  ["hr:marginRight", { type: "keyword", value: "auto" }],
-  ["hr:marginBottom", { type: "unit", unit: "em", value: 0.5 }],
-  ["hr:marginLeft", { type: "keyword", value: "auto" }],
-  ["hr:overflowX", { type: "keyword", value: "hidden" }],
-  ["hr:overflowY", { type: "keyword", value: "hidden" }],
+  ["hr:border-top-width", { type: "unit", unit: "px", value: 1 }],
+  ["hr:border-right-width", { type: "unit", unit: "px", value: 1 }],
+  ["hr:border-bottom-width", { type: "unit", unit: "px", value: 1 }],
+  ["hr:border-left-width", { type: "unit", unit: "px", value: 1 }],
+  ["hr:border-top-style", { type: "keyword", value: "solid" }],
+  ["hr:border-right-style", { type: "keyword", value: "solid" }],
+  ["hr:border-bottom-style", { type: "keyword", value: "solid" }],
+  ["hr:border-left-style", { type: "keyword", value: "solid" }],
+  ["hr:margin-top", { type: "unit", unit: "em", value: 0.5 }],
+  ["hr:margin-right", { type: "keyword", value: "auto" }],
+  ["hr:margin-bottom", { type: "unit", unit: "em", value: 0.5 }],
+  ["hr:margin-left", { type: "keyword", value: "auto" }],
+  ["hr:overflow-x", { type: "keyword", value: "hidden" }],
+  ["hr:overflow-y", { type: "keyword", value: "hidden" }],
   ["hr:display", { type: "keyword", value: "block" }],
   ["legend:display", { type: "keyword", value: "block" }],
-  ["legend:paddingLeft", { type: "unit", unit: "px", value: 2 }],
-  ["legend:paddingRight", { type: "unit", unit: "px", value: 2 }],
+  ["legend:padding-left", { type: "unit", unit: "px", value: 2 }],
+  ["legend:padding-right", { type: "unit", unit: "px", value: 2 }],
   ["fieldset:display", { type: "keyword", value: "block" }],
-  ["fieldset:marginLeft", { type: "unit", unit: "px", value: 2 }],
-  ["fieldset:marginRight", { type: "unit", unit: "px", value: 2 }],
-  ["fieldset:paddingTop", { type: "unit", unit: "em", value: 0.35 }],
-  ["fieldset:paddingRight", { type: "unit", unit: "em", value: 0.75 }],
-  ["fieldset:paddingBottom", { type: "unit", unit: "em", value: 0.625 }],
-  ["fieldset:paddingLeft", { type: "unit", unit: "em", value: 0.75 }],
-  ["fieldset:borderTopWidth", { type: "unit", unit: "px", value: 2 }],
-  ["fieldset:borderRightWidth", { type: "unit", unit: "px", value: 2 }],
-  ["fieldset:borderBottomWidth", { type: "unit", unit: "px", value: 2 }],
-  ["fieldset:borderLeftWidth", { type: "unit", unit: "px", value: 2 }],
-  ["fieldset:borderTopStyle", { type: "keyword", value: "solid" }],
-  ["fieldset:borderRightStyle", { type: "keyword", value: "solid" }],
-  ["fieldset:borderBottomStyle", { type: "keyword", value: "solid" }],
-  ["fieldset:borderLeftStyle", { type: "keyword", value: "solid" }],
-  ["fieldset:borderTopColor", { type: "keyword", value: "lightgray" }],
-  ["fieldset:borderRightColor", { type: "keyword", value: "lightgray" }],
-  ["fieldset:borderBottomColor", { type: "keyword", value: "lightgray" }],
-  ["fieldset:borderLeftColor", { type: "keyword", value: "lightgray" }],
-  ["fieldset:minWidth", { type: "keyword", value: "min-content" }],
+  ["fieldset:margin-left", { type: "unit", unit: "px", value: 2 }],
+  ["fieldset:margin-right", { type: "unit", unit: "px", value: 2 }],
+  ["fieldset:padding-top", { type: "unit", unit: "em", value: 0.35 }],
+  ["fieldset:padding-right", { type: "unit", unit: "em", value: 0.75 }],
+  ["fieldset:padding-bottom", { type: "unit", unit: "em", value: 0.625 }],
+  ["fieldset:padding-left", { type: "unit", unit: "em", value: 0.75 }],
+  ["fieldset:border-top-width", { type: "unit", unit: "px", value: 2 }],
+  ["fieldset:border-right-width", { type: "unit", unit: "px", value: 2 }],
+  ["fieldset:border-bottom-width", { type: "unit", unit: "px", value: 2 }],
+  ["fieldset:border-left-width", { type: "unit", unit: "px", value: 2 }],
+  ["fieldset:border-top-style", { type: "keyword", value: "solid" }],
+  ["fieldset:border-right-style", { type: "keyword", value: "solid" }],
+  ["fieldset:border-bottom-style", { type: "keyword", value: "solid" }],
+  ["fieldset:border-left-style", { type: "keyword", value: "solid" }],
+  ["fieldset:border-top-color", { type: "keyword", value: "lightgray" }],
+  ["fieldset:border-right-color", { type: "keyword", value: "lightgray" }],
+  ["fieldset:border-bottom-color", { type: "keyword", value: "lightgray" }],
+  ["fieldset:border-left-color", { type: "keyword", value: "lightgray" }],
+  ["fieldset:min-width", { type: "keyword", value: "min-content" }],
   ["label:cursor", { type: "keyword", value: "default" }],
   ["input:appearance", { type: "keyword", value: "auto" }],
-  ["input:paddingTop", { type: "unit", unit: "px", value: 1 }],
-  ["input:paddingRight", { type: "unit", unit: "px", value: 1 }],
-  ["input:paddingBottom", { type: "unit", unit: "px", value: 1 }],
-  ["input:paddingLeft", { type: "unit", unit: "px", value: 1 }],
-  ["input:borderTopWidth", { type: "unit", unit: "px", value: 2 }],
-  ["input:borderRightWidth", { type: "unit", unit: "px", value: 2 }],
-  ["input:borderBottomWidth", { type: "unit", unit: "px", value: 2 }],
-  ["input:borderLeftWidth", { type: "unit", unit: "px", value: 2 }],
-  ["input:borderTopStyle", { type: "keyword", value: "solid" }],
-  ["input:borderRightStyle", { type: "keyword", value: "solid" }],
-  ["input:borderBottomStyle", { type: "keyword", value: "solid" }],
-  ["input:borderLeftStyle", { type: "keyword", value: "solid" }],
-  ["input:backgroundColor", { type: "keyword", value: "white" }],
+  ["input:padding-top", { type: "unit", unit: "px", value: 1 }],
+  ["input:padding-right", { type: "unit", unit: "px", value: 1 }],
+  ["input:padding-bottom", { type: "unit", unit: "px", value: 1 }],
+  ["input:padding-left", { type: "unit", unit: "px", value: 1 }],
+  ["input:border-top-width", { type: "unit", unit: "px", value: 2 }],
+  ["input:border-right-width", { type: "unit", unit: "px", value: 2 }],
+  ["input:border-bottom-width", { type: "unit", unit: "px", value: 2 }],
+  ["input:border-left-width", { type: "unit", unit: "px", value: 2 }],
+  ["input:border-top-style", { type: "keyword", value: "solid" }],
+  ["input:border-right-style", { type: "keyword", value: "solid" }],
+  ["input:border-bottom-style", { type: "keyword", value: "solid" }],
+  ["input:border-left-style", { type: "keyword", value: "solid" }],
+  ["input:background-color", { type: "keyword", value: "white" }],
   ["input:cursor", { type: "keyword", value: "text" }],
   ["textarea:color", { type: "keyword", value: "initial" }],
   ["select:color", { type: "keyword", value: "initial" }],
   ["button:color", { type: "keyword", value: "initial" }],
-  ["textarea:letterSpacing", { type: "keyword", value: "normal" }],
-  ["select:letterSpacing", { type: "keyword", value: "normal" }],
-  ["button:letterSpacing", { type: "keyword", value: "normal" }],
-  ["textarea:wordSpacing", { type: "keyword", value: "normal" }],
-  ["select:wordSpacing", { type: "keyword", value: "normal" }],
-  ["button:wordSpacing", { type: "keyword", value: "normal" }],
-  ["textarea:lineHeight", { type: "keyword", value: "normal" }],
-  ["select:lineHeight", { type: "keyword", value: "normal" }],
-  ["button:lineHeight", { type: "keyword", value: "normal" }],
-  ["textarea:textTransform", { type: "keyword", value: "none" }],
-  ["select:textTransform", { type: "keyword", value: "none" }],
-  ["button:textTransform", { type: "keyword", value: "none" }],
-  ["textarea:textIndent", { type: "unit", unit: "number", value: 0 }],
-  ["select:textIndent", { type: "unit", unit: "number", value: 0 }],
-  ["button:textIndent", { type: "unit", unit: "number", value: 0 }],
+  ["textarea:letter-spacing", { type: "keyword", value: "normal" }],
+  ["select:letter-spacing", { type: "keyword", value: "normal" }],
+  ["button:letter-spacing", { type: "keyword", value: "normal" }],
+  ["textarea:word-spacing", { type: "keyword", value: "normal" }],
+  ["select:word-spacing", { type: "keyword", value: "normal" }],
+  ["button:word-spacing", { type: "keyword", value: "normal" }],
+  ["textarea:line-height", { type: "keyword", value: "normal" }],
+  ["select:line-height", { type: "keyword", value: "normal" }],
+  ["button:line-height", { type: "keyword", value: "normal" }],
+  ["textarea:text-transform", { type: "keyword", value: "none" }],
+  ["select:text-transform", { type: "keyword", value: "none" }],
+  ["button:text-transform", { type: "keyword", value: "none" }],
+  ["textarea:text-indent", { type: "unit", unit: "number", value: 0 }],
+  ["select:text-indent", { type: "unit", unit: "number", value: 0 }],
+  ["button:text-indent", { type: "unit", unit: "number", value: 0 }],
   [
-    "textarea:textShadow",
+    "textarea:text-shadow",
     {
       type: "layers",
       value: [{ type: "tuple", value: [{ type: "keyword", value: "none" }] }],
     },
   ],
   [
-    "select:textShadow",
+    "select:text-shadow",
     {
       type: "layers",
       value: [{ type: "tuple", value: [{ type: "keyword", value: "none" }] }],
     },
   ],
   [
-    "button:textShadow",
+    "button:text-shadow",
     {
       type: "layers",
       value: [{ type: "tuple", value: [{ type: "keyword", value: "none" }] }],
@@ -238,82 +237,82 @@ export const html: Map<`${HtmlTags}:${string}`, StyleValue> = new Map([
   ["textarea:display", { type: "keyword", value: "inline-block" }],
   ["select:display", { type: "keyword", value: "inline-block" }],
   ["button:display", { type: "keyword", value: "inline-block" }],
-  ["textarea:textAlign", { type: "keyword", value: "start" }],
+  ["textarea:text-align", { type: "keyword", value: "start" }],
   ["textarea:appearance", { type: "keyword", value: "auto" }],
-  ["textarea:marginTop", { type: "unit", unit: "px", value: 1 }],
-  ["textarea:marginBottom", { type: "unit", unit: "px", value: 1 }],
-  ["textarea:borderTopWidth", { type: "unit", unit: "px", value: 1 }],
-  ["textarea:borderRightWidth", { type: "unit", unit: "px", value: 1 }],
-  ["textarea:borderBottomWidth", { type: "unit", unit: "px", value: 1 }],
-  ["textarea:borderLeftWidth", { type: "unit", unit: "px", value: 1 }],
-  ["textarea:borderTopStyle", { type: "keyword", value: "solid" }],
-  ["textarea:borderRightStyle", { type: "keyword", value: "solid" }],
-  ["textarea:borderBottomStyle", { type: "keyword", value: "solid" }],
-  ["textarea:borderLeftStyle", { type: "keyword", value: "solid" }],
-  ["textarea:paddingTop", { type: "unit", unit: "px", value: 2 }],
-  ["textarea:paddingRight", { type: "unit", unit: "px", value: 2 }],
-  ["textarea:paddingBottom", { type: "unit", unit: "px", value: 2 }],
-  ["textarea:paddingLeft", { type: "unit", unit: "px", value: 2 }],
-  ["textarea:backgroundColor", { type: "keyword", value: "white" }],
-  ["textarea:verticalAlign", { type: "keyword", value: "text-bottom" }],
+  ["textarea:margin-top", { type: "unit", unit: "px", value: 1 }],
+  ["textarea:margin-bottom", { type: "unit", unit: "px", value: 1 }],
+  ["textarea:border-top-width", { type: "unit", unit: "px", value: 1 }],
+  ["textarea:border-right-width", { type: "unit", unit: "px", value: 1 }],
+  ["textarea:border-bottom-width", { type: "unit", unit: "px", value: 1 }],
+  ["textarea:border-left-width", { type: "unit", unit: "px", value: 1 }],
+  ["textarea:border-top-style", { type: "keyword", value: "solid" }],
+  ["textarea:border-right-style", { type: "keyword", value: "solid" }],
+  ["textarea:border-bottom-style", { type: "keyword", value: "solid" }],
+  ["textarea:border-left-style", { type: "keyword", value: "solid" }],
+  ["textarea:padding-top", { type: "unit", unit: "px", value: 2 }],
+  ["textarea:padding-right", { type: "unit", unit: "px", value: 2 }],
+  ["textarea:padding-bottom", { type: "unit", unit: "px", value: 2 }],
+  ["textarea:padding-left", { type: "unit", unit: "px", value: 2 }],
+  ["textarea:background-color", { type: "keyword", value: "white" }],
+  ["textarea:vertical-align", { type: "keyword", value: "text-bottom" }],
   ["textarea:cursor", { type: "keyword", value: "text" }],
   ["textarea:resize", { type: "keyword", value: "both" }],
-  ["textarea:whiteSpaceCollapse", { type: "keyword", value: "preserve" }],
-  ["textarea:textWrapMode", { type: "keyword", value: "wrap" }],
-  ["textarea:wordWrap", { type: "keyword", value: "break-word" }],
-  ["select:textAlign", { type: "keyword", value: "start" }],
-  ["select:marginTop", { type: "unit", unit: "number", value: 0 }],
-  ["select:marginRight", { type: "unit", unit: "number", value: 0 }],
-  ["select:marginBottom", { type: "unit", unit: "number", value: 0 }],
-  ["select:marginLeft", { type: "unit", unit: "number", value: 0 }],
-  ["select:paddingTop", { type: "unit", unit: "px", value: 1 }],
-  ["select:paddingRight", { type: "unit", unit: "px", value: 4 }],
-  ["select:paddingBottom", { type: "unit", unit: "px", value: 1 }],
-  ["select:paddingLeft", { type: "unit", unit: "px", value: 4 }],
-  ["select:borderTopWidth", { type: "unit", unit: "px", value: 2 }],
-  ["select:borderRightWidth", { type: "unit", unit: "px", value: 2 }],
-  ["select:borderBottomWidth", { type: "unit", unit: "px", value: 2 }],
-  ["select:borderLeftWidth", { type: "unit", unit: "px", value: 2 }],
-  ["select:borderTopStyle", { type: "keyword", value: "solid" }],
-  ["select:borderRightStyle", { type: "keyword", value: "solid" }],
-  ["select:borderBottomStyle", { type: "keyword", value: "solid" }],
-  ["select:borderLeftStyle", { type: "keyword", value: "solid" }],
-  ["select:textWrapMode", { type: "keyword", value: "nowrap" }],
-  ["select:wordWrap", { type: "keyword", value: "normal" }],
+  ["textarea:white-space-collapse", { type: "keyword", value: "preserve" }],
+  ["textarea:text-wrap-mode", { type: "keyword", value: "wrap" }],
+  ["textarea:word-wrap", { type: "keyword", value: "break-word" }],
+  ["select:text-align", { type: "keyword", value: "start" }],
+  ["select:margin-top", { type: "unit", unit: "number", value: 0 }],
+  ["select:margin-right", { type: "unit", unit: "number", value: 0 }],
+  ["select:margin-bottom", { type: "unit", unit: "number", value: 0 }],
+  ["select:margin-left", { type: "unit", unit: "number", value: 0 }],
+  ["select:padding-top", { type: "unit", unit: "px", value: 1 }],
+  ["select:padding-right", { type: "unit", unit: "px", value: 4 }],
+  ["select:padding-bottom", { type: "unit", unit: "px", value: 1 }],
+  ["select:padding-left", { type: "unit", unit: "px", value: 4 }],
+  ["select:border-top-width", { type: "unit", unit: "px", value: 2 }],
+  ["select:border-right-width", { type: "unit", unit: "px", value: 2 }],
+  ["select:border-bottom-width", { type: "unit", unit: "px", value: 2 }],
+  ["select:border-left-width", { type: "unit", unit: "px", value: 2 }],
+  ["select:border-top-style", { type: "keyword", value: "solid" }],
+  ["select:border-right-style", { type: "keyword", value: "solid" }],
+  ["select:border-bottom-style", { type: "keyword", value: "solid" }],
+  ["select:border-left-style", { type: "keyword", value: "solid" }],
+  ["select:text-wrap-mode", { type: "keyword", value: "nowrap" }],
+  ["select:word-wrap", { type: "keyword", value: "normal" }],
   ["select:cursor", { type: "keyword", value: "default" }],
-  ["select:boxSizing", { type: "keyword", value: "border-box" }],
-  ["select:userSelect", { type: "keyword", value: "none" }],
-  ["select:overflowX", { type: "keyword", value: "clip" }],
-  ["select:overflowY", { type: "keyword", value: "clip" }],
-  ["select:verticalAlign", { type: "keyword", value: "baseline" }],
+  ["select:box-sizing", { type: "keyword", value: "border-box" }],
+  ["select:user-select", { type: "keyword", value: "none" }],
+  ["select:overflow-x", { type: "keyword", value: "clip" }],
+  ["select:overflow-y", { type: "keyword", value: "clip" }],
+  ["select:vertical-align", { type: "keyword", value: "baseline" }],
   ["select:appearance", { type: "keyword", value: "auto" }],
   ["option:display", { type: "keyword", value: "block" }],
   ["option:float", { type: "keyword", value: "none" }],
   ["option:position", { type: "keyword", value: "static" }],
-  ["option:minHeight", { type: "unit", unit: "em", value: 1 }],
-  ["option:paddingTop", { type: "unit", unit: "px", value: 2 }],
-  ["option:paddingRight", { type: "unit", unit: "px", value: 2 }],
-  ["option:paddingBottom", { type: "unit", unit: "px", value: 2 }],
-  ["option:paddingLeft", { type: "unit", unit: "px", value: 4 }],
-  ["option:userSelect", { type: "keyword", value: "none" }],
-  ["option:textWrapMode", { type: "keyword", value: "nowrap" }],
-  ["option:wordWrap", { type: "keyword", value: "normal" }],
+  ["option:min-height", { type: "unit", unit: "em", value: 1 }],
+  ["option:padding-top", { type: "unit", unit: "px", value: 2 }],
+  ["option:padding-right", { type: "unit", unit: "px", value: 2 }],
+  ["option:padding-bottom", { type: "unit", unit: "px", value: 2 }],
+  ["option:padding-left", { type: "unit", unit: "px", value: 4 }],
+  ["option:user-select", { type: "keyword", value: "none" }],
+  ["option:text-wrap-mode", { type: "keyword", value: "nowrap" }],
+  ["option:word-wrap", { type: "keyword", value: "normal" }],
   ["button:appearance", { type: "keyword", value: "auto" }],
-  ["button:paddingTop", { type: "unit", unit: "px", value: 2 }],
-  ["button:paddingRight", { type: "unit", unit: "px", value: 6 }],
-  ["button:paddingBottom", { type: "unit", unit: "px", value: 3 }],
-  ["button:paddingLeft", { type: "unit", unit: "px", value: 6 }],
-  ["button:borderTopWidth", { type: "unit", unit: "px", value: 2 }],
-  ["button:borderRightWidth", { type: "unit", unit: "px", value: 2 }],
-  ["button:borderBottomWidth", { type: "unit", unit: "px", value: 2 }],
-  ["button:borderLeftWidth", { type: "unit", unit: "px", value: 2 }],
-  ["button:borderTopStyle", { type: "keyword", value: "solid" }],
-  ["button:borderRightStyle", { type: "keyword", value: "solid" }],
-  ["button:borderBottomStyle", { type: "keyword", value: "solid" }],
-  ["button:borderLeftStyle", { type: "keyword", value: "solid" }],
+  ["button:padding-top", { type: "unit", unit: "px", value: 2 }],
+  ["button:padding-right", { type: "unit", unit: "px", value: 6 }],
+  ["button:padding-bottom", { type: "unit", unit: "px", value: 3 }],
+  ["button:padding-left", { type: "unit", unit: "px", value: 6 }],
+  ["button:border-top-width", { type: "unit", unit: "px", value: 2 }],
+  ["button:border-right-width", { type: "unit", unit: "px", value: 2 }],
+  ["button:border-bottom-width", { type: "unit", unit: "px", value: 2 }],
+  ["button:border-left-width", { type: "unit", unit: "px", value: 2 }],
+  ["button:border-top-style", { type: "keyword", value: "solid" }],
+  ["button:border-right-style", { type: "keyword", value: "solid" }],
+  ["button:border-bottom-style", { type: "keyword", value: "solid" }],
+  ["button:border-left-style", { type: "keyword", value: "solid" }],
   ["button:cursor", { type: "keyword", value: "default" }],
-  ["button:boxSizing", { type: "keyword", value: "border-box" }],
-  ["button:userSelect", { type: "keyword", value: "none" }],
-  ["button:textAlign", { type: "keyword", value: "center" }],
-  ["button:backgroundColor", { type: "keyword", value: "lightgray" }],
+  ["button:box-sizing", { type: "keyword", value: "border-box" }],
+  ["button:user-select", { type: "keyword", value: "none" }],
+  ["button:text-align", { type: "keyword", value: "center" }],
+  ["button:background-color", { type: "keyword", value: "lightgray" }],
 ]);
diff --git a/packages/css-engine/src/core/to-property.ts b/packages/css-engine/src/core/to-property.ts
index 1fd39e98cc3d..7c10322b712b 100644
--- a/packages/css-engine/src/core/to-property.ts
+++ b/packages/css-engine/src/core/to-property.ts
@@ -1,5 +1,10 @@
+import type { CssProperty } from "../schema";
+
 /**
  * Hyphenates a camelcased CSS property name
  */
-export const hyphenateProperty = (property: string) =>
-  property.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+export const hyphenateProperty = (property: string): CssProperty =>
+  property.replace(
+    /[A-Z]/g,
+    (match) => "-" + match.toLowerCase()
+  ) as CssProperty;
diff --git a/packages/sdk-components-react-radix/src/accordion.ws.ts b/packages/sdk-components-react-radix/src/accordion.ws.ts
index de0d9a81d7a1..5e0f6994d568 100644
--- a/packages/sdk-components-react-radix/src/accordion.ws.ts
+++ b/packages/sdk-components-react-radix/src/accordion.ws.ts
@@ -77,11 +77,11 @@ export const metaAccordionHeader: WsComponentMeta = {
     h3: [
       ...h3,
       {
-        property: "marginTop",
+        property: "margin-top",
         value: { type: "unit", unit: "px", value: 0 },
       },
       {
-        property: "marginBottom",
+        property: "margin-bottom",
         value: { type: "unit", unit: "px", value: 0 },
       },
     ],
diff --git a/packages/sdk-components-react-radix/src/shared/preset-styles.ts b/packages/sdk-components-react-radix/src/shared/preset-styles.ts
index 5f4671ba4ca0..f995092be477 100644
--- a/packages/sdk-components-react-radix/src/shared/preset-styles.ts
+++ b/packages/sdk-components-react-radix/src/shared/preset-styles.ts
@@ -1,47 +1,47 @@
 // this module should not rely on "template" and other unpublished packages
-import type { StyleProperty, Unit } from "@webstudio-is/css-engine";
-import type { EmbedTemplateStyleDecl } from "@webstudio-is/sdk";
+import type { CssProperty, Unit } from "@webstudio-is/css-engine";
+import type { PresetStyleDecl } from "@webstudio-is/sdk";
 
-const unit = (property: StyleProperty, value: number, unit: Unit) => ({
+const unit = (property: CssProperty, value: number, unit: Unit) => ({
   property,
   value: { type: "unit", unit, value } as const,
 });
 
-const keyword = (property: StyleProperty, value: string) => ({
+const keyword = (property: CssProperty, value: string) => ({
   property,
   value: { type: "keyword", value } as const,
 });
 
-const rgb = (property: StyleProperty, r: number, g: number, b: number) => ({
+const rgb = (property: CssProperty, r: number, g: number, b: number) => ({
   property,
   value: { type: "rgb", alpha: 1, r, g, b } as const,
 });
 
-export const buttonReset: EmbedTemplateStyleDecl[] = [
+export const buttonReset: PresetStyleDecl[] = [
   {
-    property: "backgroundColor",
+    property: "background-color",
     value: { type: "keyword", value: "transparent" },
   },
   {
-    property: "backgroundImage",
+    property: "background-image",
     value: { type: "keyword", value: "none" },
   },
 
-  unit("borderTopWidth", 0, "px"),
-  unit("borderRightWidth", 0, "px"),
-  unit("borderBottomWidth", 0, "px"),
-  unit("borderLeftWidth", 0, "px"),
-  keyword("borderTopStyle", "solid"),
-  keyword("borderRightStyle", "solid"),
-  keyword("borderBottomStyle", "solid"),
-  keyword("borderLeftStyle", "solid"),
-  rgb("borderTopColor", 226, 232, 240),
-  rgb("borderRightColor", 226, 232, 240),
-  rgb("borderBottomColor", 226, 232, 240),
-  rgb("borderLeftColor", 226, 232, 240),
+  unit("border-top-width", 0, "px"),
+  unit("border-right-width", 0, "px"),
+  unit("border-bottom-width", 0, "px"),
+  unit("border-left-width", 0, "px"),
+  keyword("border-top-style", "solid"),
+  keyword("border-right-style", "solid"),
+  keyword("border-bottom-style", "solid"),
+  keyword("border-left-style", "solid"),
+  rgb("border-top-color", 226, 232, 240),
+  rgb("border-right-color", 226, 232, 240),
+  rgb("border-bottom-color", 226, 232, 240),
+  rgb("border-left-color", 226, 232, 240),
 
-  unit("paddingTop", 0, "px"),
-  unit("paddingRight", 0, "px"),
-  unit("paddingBottom", 0, "px"),
-  unit("paddingLeft", 0, "px"),
+  unit("padding-top", 0, "px"),
+  unit("padding-right", 0, "px"),
+  unit("padding-bottom", 0, "px"),
+  unit("padding-left", 0, "px"),
 ];
diff --git a/packages/sdk-components-react/src/blockquote.ws.ts b/packages/sdk-components-react/src/blockquote.ws.ts
index a9fd64c84180..dc6137e4f804 100644
--- a/packages/sdk-components-react/src/blockquote.ws.ts
+++ b/packages/sdk-components-react/src/blockquote.ws.ts
@@ -11,49 +11,49 @@ import { props } from "./__generated__/blockquote.props";
 const presetStyle = {
   blockquote: [
     {
-      property: "marginTop",
+      property: "margin-top",
       value: { type: "unit", value: 0, unit: "number" },
     },
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", value: 0, unit: "number" },
     },
     {
-      property: "marginBottom",
+      property: "margin-bottom",
       value: { type: "unit", value: 10, unit: "px" },
     },
     {
-      property: "marginLeft",
+      property: "margin-left",
       value: { type: "unit", value: 0, unit: "number" },
     },
 
     {
-      property: "paddingTop",
+      property: "padding-top",
       value: { type: "unit", value: 10, unit: "px" },
     },
     {
-      property: "paddingBottom",
+      property: "padding-bottom",
       value: { type: "unit", value: 10, unit: "px" },
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "unit", value: 20, unit: "px" },
     },
     {
-      property: "paddingRight",
+      property: "padding-right",
       value: { type: "unit", value: 20, unit: "px" },
     },
 
     {
-      property: "borderLeftWidth",
+      property: "border-left-width",
       value: { type: "unit", value: 5, unit: "px" },
     },
     {
-      property: "borderLeftStyle",
+      property: "border-left-style",
       value: { type: "keyword", value: "solid" },
     },
     {
-      property: "borderLeftColor",
+      property: "border-left-color",
       value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 },
     },
   ],
diff --git a/packages/sdk-components-react/src/body.ws.ts b/packages/sdk-components-react/src/body.ws.ts
index ed4c5723cc25..318bcc97f64a 100644
--- a/packages/sdk-components-react/src/body.ws.ts
+++ b/packages/sdk-components-react/src/body.ws.ts
@@ -13,11 +13,11 @@ const presetStyle = {
   body: [
     ...body,
     {
-      property: "WebkitFontSmoothing",
+      property: "-webkit-font-smoothing",
       value: { type: "keyword", value: "antialiased" },
     },
     {
-      property: "MozOsxFontSmoothing",
+      property: "-moz-osx-font-smoothing",
       value: { type: "keyword", value: "grayscale" },
     },
   ],
diff --git a/packages/sdk-components-react/src/checkbox.ws.ts b/packages/sdk-components-react/src/checkbox.ws.ts
index 796ba1885e29..0d420a0cdd9a 100644
--- a/packages/sdk-components-react/src/checkbox.ws.ts
+++ b/packages/sdk-components-react/src/checkbox.ws.ts
@@ -13,7 +13,7 @@ const presetStyle = {
   input: [
     ...checkbox,
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 },
     },
   ],
diff --git a/packages/sdk-components-react/src/code-text.ws.ts b/packages/sdk-components-react/src/code-text.ws.ts
index 2639ef19d10a..b8cc99d4f2a0 100644
--- a/packages/sdk-components-react/src/code-text.ws.ts
+++ b/packages/sdk-components-react/src/code-text.ws.ts
@@ -17,23 +17,23 @@ const presetStyle = {
       value: { type: "keyword", value: "block" },
     },
     {
-      property: "whiteSpaceCollapse",
+      property: "white-space-collapse",
       value: { type: "keyword", value: "preserve" },
     },
     {
-      property: "textWrapMode",
+      property: "text-wrap-mode",
       value: { type: "keyword", value: "wrap" },
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "unit", value: 0.2, unit: "em" },
     },
     {
-      property: "paddingRight",
+      property: "padding-right",
       value: { type: "unit", value: 0.2, unit: "em" },
     },
     {
-      property: "backgroundColor",
+      property: "background-color",
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 },
     },
   ],
diff --git a/packages/sdk-components-react/src/form.ws.ts b/packages/sdk-components-react/src/form.ws.ts
index 9d39c28541aa..bdab8deb40ce 100644
--- a/packages/sdk-components-react/src/form.ws.ts
+++ b/packages/sdk-components-react/src/form.ws.ts
@@ -12,7 +12,7 @@ import { props } from "./__generated__/form.props";
 const presetStyle = {
   form: [
     ...form,
-    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } },
+    { property: "min-height", value: { type: "unit", unit: "px", value: 20 } },
   ],
 } satisfies PresetStyle<typeof defaultTag>;
 
diff --git a/packages/sdk-components-react/src/html-embed.ws.ts b/packages/sdk-components-react/src/html-embed.ws.ts
index 40c2527eadbf..991f0cadbbcd 100644
--- a/packages/sdk-components-react/src/html-embed.ws.ts
+++ b/packages/sdk-components-react/src/html-embed.ws.ts
@@ -13,7 +13,7 @@ const presetStyle = {
       value: { type: "keyword", value: "contents" },
     },
     {
-      property: "whiteSpaceCollapse",
+      property: "white-space-collapse",
       value: { type: "keyword", value: "collapse" },
     },
   ],
diff --git a/packages/sdk-components-react/src/image.ws.ts b/packages/sdk-components-react/src/image.ws.ts
index b6dfdfdead8f..458ecf965bba 100644
--- a/packages/sdk-components-react/src/image.ws.ts
+++ b/packages/sdk-components-react/src/image.ws.ts
@@ -15,7 +15,7 @@ const presetStyle = {
 
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
     {
-      property: "maxWidth",
+      property: "max-width",
       value: { type: "unit", unit: "%", value: 100 },
     },
     // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
diff --git a/packages/sdk-components-react/src/italic.ws.ts b/packages/sdk-components-react/src/italic.ws.ts
index 65c0e84c6ccb..dcc8ba6791a5 100644
--- a/packages/sdk-components-react/src/italic.ws.ts
+++ b/packages/sdk-components-react/src/italic.ws.ts
@@ -13,7 +13,7 @@ const presetStyle = {
   i: [
     ...i,
     {
-      property: "fontStyle",
+      property: "font-style",
       value: { type: "keyword", value: "italic" },
     },
   ],
diff --git a/packages/sdk-components-react/src/list.ws.ts b/packages/sdk-components-react/src/list.ws.ts
index 751cf22811a2..2af94a0d5453 100644
--- a/packages/sdk-components-react/src/list.ws.ts
+++ b/packages/sdk-components-react/src/list.ws.ts
@@ -13,30 +13,30 @@ const presetStyle = {
   ol: [
     ...ol,
     {
-      property: "marginTop",
+      property: "margin-top",
       value: { type: "keyword", value: "0" },
     },
     {
-      property: "marginBottom",
+      property: "margin-bottom",
       value: { type: "keyword", value: "10px" },
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "keyword", value: "40px" },
     },
   ],
   ul: [
     ...ul,
     {
-      property: "marginTop",
+      property: "margin-top",
       value: { type: "keyword", value: "0" },
     },
     {
-      property: "marginBottom",
+      property: "margin-bottom",
       value: { type: "keyword", value: "10px" },
     },
     {
-      property: "paddingLeft",
+      property: "padding-left",
       value: { type: "keyword", value: "40px" },
     },
   ],
diff --git a/packages/sdk-components-react/src/markdown-embed.ws.ts b/packages/sdk-components-react/src/markdown-embed.ws.ts
index 89b87cd8e3fa..df6c6fae92c1 100644
--- a/packages/sdk-components-react/src/markdown-embed.ws.ts
+++ b/packages/sdk-components-react/src/markdown-embed.ws.ts
@@ -12,7 +12,7 @@ export const meta: WsComponentMeta = {
         value: { type: "keyword", value: "contents" },
       },
       {
-        property: "whiteSpaceCollapse",
+        property: "white-space-collapse",
         value: { type: "keyword", value: "collapse" },
       },
     ],
diff --git a/packages/sdk-components-react/src/option.ws.ts b/packages/sdk-components-react/src/option.ws.ts
index 4fddf956d071..82be10352f9b 100644
--- a/packages/sdk-components-react/src/option.ws.ts
+++ b/packages/sdk-components-react/src/option.ws.ts
@@ -11,7 +11,7 @@ import { props } from "./__generated__/option.props";
 const presetStyle = {
   option: [
     {
-      property: "backgroundColor",
+      property: "background-color",
       state: ":checked",
       value: {
         type: "rgb",
diff --git a/packages/sdk-components-react/src/radio-button.ws.ts b/packages/sdk-components-react/src/radio-button.ws.ts
index b6fd36f403a9..3ec8fb4ae074 100644
--- a/packages/sdk-components-react/src/radio-button.ws.ts
+++ b/packages/sdk-components-react/src/radio-button.ws.ts
@@ -13,7 +13,7 @@ const presetStyle = {
   input: [
     ...radio,
     {
-      property: "marginRight",
+      property: "margin-right",
       value: { type: "unit", unit: "em", value: 0.5 },
     },
   ],
diff --git a/packages/sdk-components-react/src/separator.ws.ts b/packages/sdk-components-react/src/separator.ws.ts
index c3d1d45aa49c..72fc3f457e49 100644
--- a/packages/sdk-components-react/src/separator.ws.ts
+++ b/packages/sdk-components-react/src/separator.ws.ts
@@ -18,23 +18,23 @@ const presetStyle = {
       value: { type: "keyword", value: "1px" },
     },
     {
-      property: "backgroundColor",
+      property: "background-color",
       value: { type: "keyword", value: "gray" },
     },
     {
-      property: "borderTopStyle",
+      property: "border-top-style",
       value: { type: "keyword", value: "none" },
     },
     {
-      property: "borderRightStyle",
+      property: "border-right-style",
       value: { type: "keyword", value: "none" },
     },
     {
-      property: "borderLeftStyle",
+      property: "border-left-style",
       value: { type: "keyword", value: "none" },
     },
     {
-      property: "borderBottomStyle",
+      property: "border-bottom-style",
       value: { type: "keyword", value: "none" },
     },
   ],
diff --git a/packages/sdk-components-react/src/text.ws.ts b/packages/sdk-components-react/src/text.ws.ts
index ec8d0fb7c567..91d94fd3ad6e 100644
--- a/packages/sdk-components-react/src/text.ws.ts
+++ b/packages/sdk-components-react/src/text.ws.ts
@@ -13,7 +13,7 @@ const presetStyle = {
   div: [
     ...div,
     {
-      property: "minHeight",
+      property: "min-height",
       value: { type: "unit", unit: "em", value: 1 },
     },
   ],
diff --git a/packages/sdk/scripts/normalize.css.ts b/packages/sdk/scripts/normalize.css.ts
index 34e66381e021..49f53a020fa9 100644
--- a/packages/sdk/scripts/normalize.css.ts
+++ b/packages/sdk/scripts/normalize.css.ts
@@ -1,6 +1,6 @@
 import { mkdir, readFile, writeFile } from "node:fs/promises";
-import { camelCaseProperty, parseCss } from "@webstudio-is/css-data";
 import htmlTags from "html-tags";
+import { parseCss } from "@webstudio-is/css-data";
 
 const mapGroupBy = <Item, Key>(
   array: Item[] | Iterable<Item>,
@@ -33,11 +33,11 @@ const validTags = [
 const cache = new Map<string, string>();
 
 let code = "";
-code += `import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";\n`;
+code += `import type { CssProperty, StyleValue } from "@webstudio-is/css-engine";\n`;
 code += `
 type StyleDecl = {
   state?: string;
-  property: StyleProperty;
+  property: CssProperty;
   value: StyleValue;
 }
 
@@ -48,7 +48,7 @@ for (const [tag, styles] of groups) {
   }
   const newStyles = styles.map(({ state, property, value }) => ({
     state,
-    property: camelCaseProperty(property),
+    property,
     value,
   }));
   let serializedStyles = JSON.stringify(newStyles);
diff --git a/packages/sdk/src/__generated__/normalize.css.ts b/packages/sdk/src/__generated__/normalize.css.ts
index 07a512d65636..d4214d607f28 100644
--- a/packages/sdk/src/__generated__/normalize.css.ts
+++ b/packages/sdk/src/__generated__/normalize.css.ts
@@ -1,27 +1,30 @@
-import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";
+import type { CssProperty, StyleValue } from "@webstudio-is/css-engine";
 
 type StyleDecl = {
   state?: string;
-  property: StyleProperty;
+  property: CssProperty;
   value: StyleValue;
 };
 
 export const div: StyleDecl[] = [
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
   {
-    property: "borderRightWidth",
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
-  { property: "outlineWidth", value: { type: "unit", unit: "px", value: 1 } },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
+  { property: "outline-width", value: { type: "unit", unit: "px", value: 1 } },
 ];
 
 export const address = div;
@@ -78,45 +81,51 @@ export const span = div;
 
 export const html: StyleDecl[] = [
   { property: "display", value: { type: "keyword", value: "grid" } },
-  { property: "minHeight", value: { type: "unit", unit: "%", value: 100 } },
+  { property: "min-height", value: { type: "unit", unit: "%", value: 100 } },
   {
-    property: "fontFamily",
+    property: "font-family",
     value: { type: "fontFamily", value: ["Arial", "Roboto", "sans-serif"] },
   },
-  { property: "fontSize", value: { type: "unit", unit: "px", value: 16 } },
+  { property: "font-size", value: { type: "unit", unit: "px", value: 16 } },
   {
-    property: "lineHeight",
+    property: "line-height",
     value: { type: "unit", unit: "number", value: 1.2 },
   },
   {
-    property: "whiteSpaceCollapse",
+    property: "white-space-collapse",
     value: { type: "keyword", value: "preserve" },
   },
 ];
 
 export const body: StyleDecl[] = [
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 },
+  },
   {
-    property: "marginRight",
+    property: "margin-bottom",
     value: { type: "unit", unit: "number", value: 0 },
   },
   {
-    property: "marginBottom",
+    property: "margin-left",
     value: { type: "unit", unit: "number", value: 0 },
   },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
   {
-    property: "borderRightWidth",
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
+  {
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
 ];
@@ -124,39 +133,45 @@ export const body: StyleDecl[] = [
 export const hr: StyleDecl[] = [
   { property: "height", value: { type: "unit", unit: "number", value: 0 } },
   { property: "color", value: { type: "keyword", value: "inherit" } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
   {
-    property: "borderRightWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
 ];
 
 export const b: StyleDecl[] = [
   {
-    property: "fontWeight",
+    property: "font-weight",
     value: { type: "unit", unit: "number", value: 700 },
   },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
   {
-    property: "borderRightWidth",
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
+  {
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
 ];
@@ -165,7 +180,7 @@ export const strong = b;
 
 export const code: StyleDecl[] = [
   {
-    property: "fontFamily",
+    property: "font-family",
     value: {
       type: "fontFamily",
       value: [
@@ -178,19 +193,22 @@ export const code: StyleDecl[] = [
       ],
     },
   },
-  { property: "fontSize", value: { type: "unit", unit: "em", value: 1 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "font-size", value: { type: "unit", unit: "em", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
   {
-    property: "borderRightWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
 ];
@@ -202,308 +220,386 @@ export const samp = code;
 export const pre = code;
 
 export const small: StyleDecl[] = [
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 80 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 80 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
   {
-    property: "borderRightWidth",
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
+  {
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
 ];
 
 export const sub: StyleDecl[] = [
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 75 } },
-  { property: "lineHeight", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 75 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 0 },
+  },
   { property: "position", value: { type: "keyword", value: "relative" } },
-  { property: "verticalAlign", value: { type: "keyword", value: "baseline" } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
   {
-    property: "borderRightWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   { property: "bottom", value: { type: "unit", unit: "em", value: -0.25 } },
 ];
 
 export const sup: StyleDecl[] = [
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 75 } },
-  { property: "lineHeight", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 75 } },
+  {
+    property: "line-height",
+    value: { type: "unit", unit: "number", value: 0 },
+  },
   { property: "position", value: { type: "keyword", value: "relative" } },
-  { property: "verticalAlign", value: { type: "keyword", value: "baseline" } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
   {
-    property: "borderRightWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   { property: "top", value: { type: "unit", unit: "em", value: -0.5 } },
 ];
 
 export const table: StyleDecl[] = [
-  { property: "textIndent", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
   {
-    property: "borderRightWidth",
+    property: "text-indent",
+    value: { type: "unit", unit: "number", value: 0 },
+  },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
+  {
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
-  { property: "borderTopColor", value: { type: "keyword", value: "inherit" } },
   {
-    property: "borderRightColor",
+    property: "border-top-color",
     value: { type: "keyword", value: "inherit" },
   },
   {
-    property: "borderBottomColor",
+    property: "border-right-color",
     value: { type: "keyword", value: "inherit" },
   },
-  { property: "borderLeftColor", value: { type: "keyword", value: "inherit" } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-bottom-color",
+    value: { type: "keyword", value: "inherit" },
+  },
+  {
+    property: "border-left-color",
+    value: { type: "keyword", value: "inherit" },
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
 ];
 
 export const input: StyleDecl[] = [
-  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
   {
-    property: "lineHeight",
+    property: "line-height",
     value: { type: "unit", unit: "number", value: 1.15 },
   },
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
   {
-    property: "marginRight",
+    property: "margin-right",
     value: { type: "unit", unit: "number", value: 0 },
   },
   {
-    property: "marginBottom",
+    property: "margin-bottom",
     value: { type: "unit", unit: "number", value: 0 },
   },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
   {
-    property: "borderRightWidth",
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 },
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
+  {
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
-  { property: "borderTopStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderRightStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderBottomStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderLeftStyle", value: { type: "keyword", value: "solid" } },
+  { property: "border-top-style", value: { type: "keyword", value: "solid" } },
+  {
+    property: "border-right-style",
+    value: { type: "keyword", value: "solid" },
+  },
+  {
+    property: "border-bottom-style",
+    value: { type: "keyword", value: "solid" },
+  },
+  { property: "border-left-style", value: { type: "keyword", value: "solid" } },
 ];
 
 export const textarea = input;
 
 export const optgroup: StyleDecl[] = [
-  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
   {
-    property: "lineHeight",
+    property: "line-height",
     value: { type: "unit", unit: "number", value: 1.15 },
   },
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 },
+  },
   {
-    property: "marginRight",
+    property: "margin-bottom",
     value: { type: "unit", unit: "number", value: 0 },
   },
   {
-    property: "marginBottom",
+    property: "margin-left",
     value: { type: "unit", unit: "number", value: 0 },
   },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
   {
-    property: "borderRightWidth",
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
+  {
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
 ];
 
 export const radio: StyleDecl[] = [
-  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
   {
-    property: "lineHeight",
+    property: "line-height",
     value: { type: "unit", unit: "number", value: 1.15 },
   },
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
+  {
+    property: "margin-right",
+    value: { type: "unit", unit: "number", value: 0 },
+  },
   {
-    property: "marginRight",
+    property: "margin-bottom",
     value: { type: "unit", unit: "number", value: 0 },
   },
   {
-    property: "marginBottom",
+    property: "margin-left",
     value: { type: "unit", unit: "number", value: 0 },
   },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
   {
-    property: "borderRightWidth",
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
-  { property: "borderTopStyle", value: { type: "keyword", value: "none" } },
-  { property: "borderRightStyle", value: { type: "keyword", value: "none" } },
-  { property: "borderBottomStyle", value: { type: "keyword", value: "none" } },
-  { property: "borderLeftStyle", value: { type: "keyword", value: "none" } },
+  {
+    property: "border-left-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
+  { property: "border-top-style", value: { type: "keyword", value: "none" } },
+  { property: "border-right-style", value: { type: "keyword", value: "none" } },
+  {
+    property: "border-bottom-style",
+    value: { type: "keyword", value: "none" },
+  },
+  { property: "border-left-style", value: { type: "keyword", value: "none" } },
 ];
 
 export const checkbox = radio;
 
 export const button: StyleDecl[] = [
-  { property: "fontFamily", value: { type: "keyword", value: "inherit" } },
-  { property: "fontSize", value: { type: "unit", unit: "%", value: 100 } },
+  { property: "font-family", value: { type: "keyword", value: "inherit" } },
+  { property: "font-size", value: { type: "unit", unit: "%", value: 100 } },
   {
-    property: "lineHeight",
+    property: "line-height",
     value: { type: "unit", unit: "number", value: 1.15 },
   },
-  { property: "marginTop", value: { type: "unit", unit: "number", value: 0 } },
+  { property: "margin-top", value: { type: "unit", unit: "number", value: 0 } },
   {
-    property: "marginRight",
+    property: "margin-right",
     value: { type: "unit", unit: "number", value: 0 },
   },
   {
-    property: "marginBottom",
+    property: "margin-bottom",
     value: { type: "unit", unit: "number", value: 0 },
   },
-  { property: "marginLeft", value: { type: "unit", unit: "number", value: 0 } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
   {
-    property: "borderRightWidth",
+    property: "margin-left",
+    value: { type: "unit", unit: "number", value: 0 },
+  },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
+  {
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
-  { property: "borderTopStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderRightStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderBottomStyle", value: { type: "keyword", value: "solid" } },
-  { property: "borderLeftStyle", value: { type: "keyword", value: "solid" } },
-  { property: "textTransform", value: { type: "keyword", value: "none" } },
+  { property: "border-top-style", value: { type: "keyword", value: "solid" } },
+  {
+    property: "border-right-style",
+    value: { type: "keyword", value: "solid" },
+  },
+  {
+    property: "border-bottom-style",
+    value: { type: "keyword", value: "solid" },
+  },
+  { property: "border-left-style", value: { type: "keyword", value: "solid" } },
+  { property: "text-transform", value: { type: "keyword", value: "none" } },
 ];
 
 export const select = button;
 
 export const legend: StyleDecl[] = [
-  { property: "paddingTop", value: { type: "unit", unit: "number", value: 0 } },
   {
-    property: "paddingRight",
+    property: "padding-top",
+    value: { type: "unit", unit: "number", value: 0 },
+  },
+  {
+    property: "padding-right",
     value: { type: "unit", unit: "number", value: 0 },
   },
   {
-    property: "paddingBottom",
+    property: "padding-bottom",
     value: { type: "unit", unit: "number", value: 0 },
   },
   {
-    property: "paddingLeft",
+    property: "padding-left",
     value: { type: "unit", unit: "number", value: 0 },
   },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
   {
-    property: "borderRightWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
 ];
 
 export const progress: StyleDecl[] = [
-  { property: "verticalAlign", value: { type: "keyword", value: "baseline" } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "vertical-align", value: { type: "keyword", value: "baseline" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
   {
-    property: "borderRightWidth",
+    property: "border-top-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-bottom-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
+  {
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
 ];
 
 export const summary: StyleDecl[] = [
   { property: "display", value: { type: "keyword", value: "list-item" } },
-  { property: "boxSizing", value: { type: "keyword", value: "border-box" } },
-  { property: "borderTopWidth", value: { type: "unit", unit: "px", value: 1 } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
+  {
+    property: "border-top-width",
+    value: { type: "unit", unit: "px", value: 1 },
+  },
   {
-    property: "borderRightWidth",
+    property: "border-right-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderBottomWidth",
+    property: "border-bottom-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
   {
-    property: "borderLeftWidth",
+    property: "border-left-width",
     value: { type: "unit", unit: "px", value: 1 },
   },
 ];
diff --git a/packages/sdk/src/css.test.tsx b/packages/sdk/src/css.test.tsx
index ce81a469cb15..56e3049f0019 100644
--- a/packages/sdk/src/css.test.tsx
+++ b/packages/sdk/src/css.test.tsx
@@ -171,7 +171,7 @@ test("generate component presets with multiple tags", () => {
             ],
             a: [
               {
-                property: "userSelect",
+                property: "user-select",
                 value: { type: "keyword", value: "none" },
               },
             ],
diff --git a/packages/sdk/src/schema/component-meta.ts b/packages/sdk/src/schema/component-meta.ts
index c836fc9a8d36..5afee52d0e59 100644
--- a/packages/sdk/src/schema/component-meta.ts
+++ b/packages/sdk/src/schema/component-meta.ts
@@ -2,10 +2,25 @@ import { z } from "zod";
 import type { HtmlTags } from "html-tags";
 import { PropMeta } from "./prop-meta";
 import { Matchers } from "./instances";
-import { EmbedTemplateStyleDecl, WsEmbedTemplate } from "./embed-template";
+import { WsEmbedTemplate } from "./embed-template";
+import { StyleValue, type CssProperty } from "@webstudio-is/css-engine";
+import type { Simplify } from "type-fest";
+
+export const PresetStyleDecl = z.object({
+  // State selector, e.g. :hover
+  state: z.optional(z.string()),
+  property: z.string(),
+  value: StyleValue,
+});
+
+export type PresetStyleDecl = Simplify<
+  Omit<z.infer<typeof PresetStyleDecl>, "property"> & {
+    property: CssProperty;
+  }
+>;
 
 export type PresetStyle<Tag extends HtmlTags = HtmlTags> = Partial<
-  Record<Tag, EmbedTemplateStyleDecl[]>
+  Record<Tag, PresetStyleDecl[]>
 >;
 
 // props are separated from the rest of the meta
@@ -70,9 +85,7 @@ export const WsComponentMeta = z.object({
   label: z.optional(z.string()),
   description: z.string().optional(),
   icon: z.string(),
-  presetStyle: z.optional(
-    z.record(z.string(), z.array(EmbedTemplateStyleDecl))
-  ),
+  presetStyle: z.optional(z.record(z.string(), z.array(PresetStyleDecl))),
   states: z.optional(z.array(ComponentState)),
   template: z.optional(WsEmbedTemplate),
   order: z.number().optional(),