Skip to content

Commit 0889342

Browse files
TrySoundTrySound
authored
refactor: switch to hyphenated preset styles (webstudio-is#4930)
Replaced camel case with kebab in all presets
1 parent 75b82d6 commit 0889342

27 files changed

Lines changed: 606 additions & 478 deletions

File tree

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useMemo, useRef } from "react";
22
import type { HtmlTags } from "html-tags";
33
import { computed, type ReadableAtom } from "nanostores";
44
import { useStore } from "@nanostores/react";
5-
import { properties } from "@webstudio-is/css-data";
5+
import { camelCaseProperty, properties } from "@webstudio-is/css-data";
66
import {
77
compareMedia,
88
toVarFallback,
@@ -155,7 +155,10 @@ export const getDefinedStyles = ({
155155
const meta = metas.get(instance.component);
156156
for (const preset of Object.values(meta?.presetStyle ?? {})) {
157157
for (const styleDecl of preset) {
158-
presetStyles.add(styleDecl);
158+
presetStyles.add({
159+
property: camelCaseProperty(styleDecl.property),
160+
value: styleDecl.value,
161+
});
159162
}
160163
}
161164
const styleSources = styleSourceSelections.get(instance.id)?.values;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -753,6 +753,7 @@ test("support html styles", () => {
753753
jsx: (
754754
<$.Body ws:id="bodyId" ws:tag="body">
755755
<$.Span ws:id="spanId" ws:tag="span"></$.Span>
756+
<$.Heading ws:id="headingId" ws:tag="h1"></$.Heading>
756757
</$.Body>
757758
),
758759
});
@@ -764,6 +765,13 @@ test("support html styles", () => {
764765
property: "display",
765766
}).usedValue
766767
).toEqual({ type: "keyword", value: "block" });
768+
expect(
769+
getComputedStyleDecl({
770+
model,
771+
instanceSelector: ["headingId", "bodyId"],
772+
property: "marginTop",
773+
}).usedValue
774+
).toEqual({ type: "unit", value: 0.67, unit: "em" });
767775
// tag without browser styles
768776
expect(
769777
getComputedStyleDecl({

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

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import type { HtmlTags } from "html-tags";
22
import { html, properties } from "@webstudio-is/css-data";
3-
import type {
4-
StyleValue,
5-
StyleProperty,
6-
VarFallback,
7-
VarValue,
8-
UnparsedValue,
3+
import {
4+
type StyleValue,
5+
type StyleProperty,
6+
type VarFallback,
7+
type VarValue,
8+
type UnparsedValue,
9+
type CssProperty,
10+
hyphenateProperty,
911
} from "@webstudio-is/css-engine";
1012
import {
1113
type Instance,
@@ -93,7 +95,7 @@ export const getPresetStyleDeclKey = ({
9395
component: string;
9496
tag: string;
9597
state?: string;
96-
property: string;
98+
property: CssProperty;
9799
}) => `${component}:${tag}:${state ?? ""}:${property}`;
98100

99101
/**
@@ -141,13 +143,14 @@ const getCascadedValue = ({
141143
let selectedIndex = -1;
142144
// store the source of latest value
143145
let source: StyleValueSource = { name: "default" };
146+
const hyphenatedProperty = hyphenateProperty(property);
144147

145148
// https://drafts.csswg.org/css-cascade-5/#declared
146149
const declaredValues: StyleValue[] = [];
147150

148151
// browser styles
149152
if (tag) {
150-
const key = `${tag}:${property}` as const;
153+
const key = `${tag}:${hyphenatedProperty}`;
151154
const browserValue = html.get(key);
152155
if (browserValue) {
153156
declaredValues.push(browserValue);
@@ -169,7 +172,12 @@ const getCascadedValue = ({
169172
// preset component styles
170173
if (component && tag) {
171174
for (const state of states) {
172-
const key = getPresetStyleDeclKey({ component, tag, state, property });
175+
const key = getPresetStyleDeclKey({
176+
component,
177+
tag,
178+
state,
179+
property: hyphenatedProperty,
180+
});
173181
const styleValue = presetStyles.get(key);
174182
if (styleValue) {
175183
source = { name: "preset", state, instanceId };

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import { expandShorthands, parseCssValue } from "@webstudio-is/css-data";
2525
*/
2626
export const migrateWebstudioDataMutable = (data: WebstudioData) => {
2727
for (const [styleDeclKey, styleDecl] of data.styles) {
28-
const property = hyphenateProperty(styleDecl.property);
28+
const property = hyphenateProperty(styleDecl.property) as string;
2929

3030
// expands overflow shorthand into overflow-x and overflow-y longhands
3131
// expands transition shorthand into transition-property, transition-duration, transition-timing-function, transition-delay longhands

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
11
import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
22
import type { StyleValue } from "@webstudio-is/css-engine";
3-
import { camelCaseProperty, parseCss } from "../src/parse-css";
3+
import { parseCss } from "../src/parse-css";
44

55
const css = readFileSync("./src/html.css", "utf8");
66
const parsed = parseCss(css);
77
const result: [string, StyleValue][] = [];
88
for (const styleDecl of parsed) {
9-
result.push([
10-
`${styleDecl.selector}:${camelCaseProperty(styleDecl.property)}`,
11-
styleDecl.value,
12-
]);
9+
result.push([`${styleDecl.selector}:${styleDecl.property}`, styleDecl.value]);
1310
}
1411
let code = "";
15-
code += `import type { HtmlTags } from "html-tags";\n`;
1612
code += `import type { StyleValue } from "@webstudio-is/css-engine";\n\n`;
17-
const type = "Map<`${HtmlTags}:${string}`, StyleValue>";
13+
const type = "Map<string, StyleValue>";
1814
code += `export const html: ${type} = new Map(${JSON.stringify(result)})`;
1915

2016
mkdirSync("./src/__generated__", { recursive: true });

0 commit comments

Comments
 (0)