Skip to content

Commit af653fa

Browse files
TrySoundTrySound
authored
refactor: hyphenate keyword values (#4987)
Regenerated keyword values data with hyphenated properties. Since the new object is strictly typed we can use it directly without styleConfigByName utility which I removed.
1 parent a273aba commit af653fa

File tree

22 files changed

+530
-487
lines changed

22 files changed

+530
-487
lines changed

‎apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
theme,
88
toast,
99
} from "@webstudio-is/design-system";
10+
import { keywordValues } from "@webstudio-is/css-data";
1011
import { toPascalCase } from "~/builder/features/style-panel/shared/keyword-utils";
1112
import { useIds } from "~/shared/form-utils";
1213

@@ -28,7 +29,6 @@ import {
2829
import { toValue, type StyleValue } from "@webstudio-is/css-engine";
2930
import { useState } from "react";
3031
import { Keyframes } from "./animation-keyframes";
31-
import { styleConfigByName } from "~/builder/features/style-panel/shared/configs";
3232
import { titleCase } from "title-case";
3333

3434
type Props = {
@@ -168,9 +168,9 @@ const EasingInput = ({
168168
: { type: "unparsed", value }
169169
}
170170
getOptions={() => [
171-
...styleConfigByName(property).items.map((item) => ({
171+
...keywordValues["animation-timing-function"].map((value) => ({
172172
type: "keyword" as const,
173-
value: item.name,
173+
value,
174174
})),
175175
]}
176176
property={property}

‎apps/builder/app/builder/features/style-panel/controls/color/color-control.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
import type { CssProperty, StyleProperty } from "@webstudio-is/css-engine";
1+
import {
2+
hyphenateProperty,
3+
type CssProperty,
4+
type StyleProperty,
5+
} from "@webstudio-is/css-engine";
6+
import { keywordValues } from "@webstudio-is/css-data";
27
import { ColorPicker } from "../../shared/color-picker";
3-
import { styleConfigByName } from "../../shared/configs";
48
import {
59
$availableColorVariables,
610
useComputedStyleDecl,
@@ -22,9 +26,9 @@ export const ColorControl = ({
2226
value={value}
2327
currentColor={currentColor}
2428
getOptions={() => [
25-
...styleConfigByName(property).items.map((item) => ({
29+
...(keywordValues[hyphenateProperty(property)] ?? []).map((item) => ({
2630
type: "keyword" as const,
27-
value: item.name,
31+
value: item,
2832
})),
2933
...$availableColorVariables.get(),
3034
]}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,14 @@ import {
55
NestedInputButton,
66
FloatingPanel,
77
} from "@webstudio-is/design-system";
8-
import { FontsManager } from "~/builder/shared/fonts-manager";
98
import { forwardRef, useMemo, useState, type ComponentProps } from "react";
109
import { toValue } from "@webstudio-is/css-engine";
1110
import { matchSorter } from "match-sorter";
11+
import { UploadIcon } from "@webstudio-is/icons";
12+
import { keywordValues, parseCssValue } from "@webstudio-is/css-data";
13+
import { FontsManager } from "~/builder/shared/fonts-manager";
1214
import { useAssets } from "~/builder/shared/assets";
1315
import { toItems } from "~/builder/shared/fonts-manager";
14-
import { UploadIcon } from "@webstudio-is/icons";
15-
import { styleConfigByName } from "../../shared/configs";
16-
import { parseCssValue } from "@webstudio-is/css-data";
1716
import { useComputedStyleDecl } from "../../shared/model";
1817
import { setProperty } from "../../shared/use-style-data";
1918

@@ -50,10 +49,11 @@ export const FontFamilyControl = () => {
5049
>();
5150
const { assetContainers } = useAssets("font");
5251
const items = useMemo(() => {
53-
const fallbacks = styleConfigByName("fontFamily").items;
54-
return [...toItems(assetContainers), ...fallbacks].map(({ label }) => ({
55-
value: label,
56-
}));
52+
const fallbacks = keywordValues["font-family"];
53+
return [
54+
...toItems(assetContainers).map(({ label }) => ({ value: label })),
55+
...fallbacks.map((value) => ({ value })),
56+
];
5757
}, [assetContainers]);
5858
const [isFontManagerOpen, setIsFontMangerOpen] = useState(false);
5959

‎apps/builder/app/builder/features/style-panel/controls/position/position-control.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
camelCaseProperty,
3+
keywordValues,
34
propertyDescriptions,
45
} from "@webstudio-is/css-data";
56
import {
@@ -8,10 +9,10 @@ import {
89
type StyleValue,
910
type StyleProperty,
1011
type CssProperty,
12+
hyphenateProperty,
1113
} from "@webstudio-is/css-engine";
1214
import { Flex, Grid, PositionGrid } from "@webstudio-is/design-system";
1315
import type { ComputedStyleDecl } from "~/shared/style-object-model";
14-
import { styleConfigByName } from "../../shared/configs";
1516
import { CssValueInputContainer } from "../../shared/css-value-input";
1617
import {
1718
deleteProperty,
@@ -60,12 +61,13 @@ export const PositionControl = ({
6061
property: StyleProperty | CssProperty;
6162
styleDecl: ComputedStyleDecl;
6263
}) => {
63-
const { items } = styleConfigByName(property);
6464
const value = toTuple(styleDecl.cascadedValue);
65-
const keywords = items.map((item) => ({
66-
type: "keyword" as const,
67-
value: item.name,
68-
}));
65+
const keywords = (keywordValues[hyphenateProperty(property)] ?? []).map(
66+
(value) => ({
67+
type: "keyword" as const,
68+
value,
69+
})
70+
);
6971

7072
const setValue = setProperty(property);
7173

‎apps/builder/app/builder/features/style-panel/controls/select/select-control.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1+
import { noCase } from "change-case";
12
import {
23
camelCaseProperty,
34
declarationDescriptions,
5+
keywordValues,
46
parseCssValue,
57
} from "@webstudio-is/css-data";
68
import {
9+
hyphenateProperty,
710
StyleValue,
811
toValue,
912
type CssProperty,
1013
type StyleProperty,
1114
} from "@webstudio-is/css-engine";
1215
import { Box, Select, theme } from "@webstudio-is/design-system";
13-
import { styleConfigByName } from "../../shared/configs";
1416
import { toKebabCase } from "../../shared/keyword-utils";
1517
import { useComputedStyleDecl } from "../../shared/model";
1618
import {
@@ -22,12 +24,11 @@ import {
2224
getRepeatedStyleItem,
2325
setRepeatedStyleItem,
2426
} from "../../shared/repeated-style";
25-
import { noCase } from "change-case";
2627

2728
export const SelectControl = ({
2829
property,
2930
index,
30-
items = styleConfigByName(property).items,
31+
items,
3132
}: {
3233
property: StyleProperty | CssProperty;
3334
index?: number;
@@ -45,7 +46,11 @@ export const SelectControl = ({
4546
setRepeatedStyleItem(styleDecl, index, value, options);
4647
}
4748
};
48-
const options = items.map(({ name }) => name);
49+
const options =
50+
items?.map(({ name }) => name) ??
51+
keywordValues[hyphenateProperty(property)] ??
52+
[];
53+
4954
// We can't render an empty string as a value when display was added but without a value.
5055
// One case is when advanced property is being added, but no value is set.
5156
const valueString = toValue(value) || "empty";

‎apps/builder/app/builder/features/style-panel/controls/text/text-control.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { useState } from "react";
2-
import type {
3-
CssProperty,
4-
StyleProperty,
5-
StyleValue,
2+
import {
3+
hyphenateProperty,
4+
type CssProperty,
5+
type StyleProperty,
6+
type StyleValue,
67
} from "@webstudio-is/css-engine";
8+
import { keywordValues } from "@webstudio-is/css-data";
79
import {
810
CssValueInput,
911
type IntermediateStyleValue,
1012
} from "../../shared/css-value-input";
11-
import { styleConfigByName } from "../../shared/configs";
1213
import { deleteProperty, setProperty } from "../../shared/use-style-data";
1314
import {
1415
$availableUnitVariables,
@@ -33,9 +34,9 @@ export const TextControl = ({
3334
value={value}
3435
intermediateValue={intermediateValue}
3536
getOptions={() => [
36-
...styleConfigByName(property).items.map((item) => ({
37+
...(keywordValues[hyphenateProperty(property)] ?? []).map((value) => ({
3738
type: "keyword" as const,
38-
value: item.name,
39+
value,
3940
})),
4041
...$availableUnitVariables.get(),
4142
]}

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { Grid, Select, theme } from "@webstudio-is/design-system";
22
import { toValue } from "@webstudio-is/css-engine";
3-
import { propertyDescriptions } from "@webstudio-is/css-data";
3+
import { keywordValues, propertyDescriptions } from "@webstudio-is/css-data";
44
import {
55
type StyleValue,
66
TupleValue,
77
TupleValueItem,
88
} from "@webstudio-is/css-engine";
9-
import { styleConfigByName } from "../../shared/configs";
109
import { CssValueInputContainer } from "../../shared/css-value-input";
1110
import type { SetValue } from "../../shared/use-style-data";
1211
import { PropertyInlineLabel } from "../../property-label";
@@ -41,12 +40,7 @@ export const BackgroundSize = ({ index }: { index: number }) => {
4140
const styleDecl = useComputedStyleDecl(property);
4241
const styleValue = getRepeatedStyleItem(styleDecl, index);
4342

44-
const { items: defaultItems } = styleConfigByName(property);
45-
46-
const selectOptions = [
47-
...defaultItems,
48-
{ name: "custom", label: "Custom" },
49-
].map(({ name }) => name);
43+
const selectOptions = [...keywordValues[property], "custom"];
5044
const selectValue =
5145
styleValue?.type === "keyword" ? toValue(styleValue) : "custom";
5246

‎apps/builder/app/builder/features/style-panel/sections/borders/border-color.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { toValue, type CssProperty } from "@webstudio-is/css-engine";
22
import { Box, Grid } from "@webstudio-is/design-system";
3-
import { styleConfigByName } from "../../shared/configs";
43
import { rowCss } from "./utils";
54
import { PropertyLabel, PropertyValueTooltip } from "../../property-label";
65
import { ColorPicker } from "../../shared/color-picker";
@@ -9,6 +8,7 @@ import {
98
useComputedStyles,
109
} from "../../shared/model";
1110
import { createBatchUpdate } from "../../shared/use-style-data";
11+
import { keywordValues } from "@webstudio-is/css-data";
1212

1313
export const properties = [
1414
"border-top-color",
@@ -17,8 +17,6 @@ export const properties = [
1717
"border-left-color",
1818
] satisfies [CssProperty, ...CssProperty[]];
1919

20-
const { items } = styleConfigByName("border-top-color");
21-
2220
export const BorderColor = () => {
2321
const styles = useComputedStyles(properties);
2422
const serialized = styles.map((styleDecl) =>
@@ -57,9 +55,9 @@ export const BorderColor = () => {
5755
property={local.property}
5856
value={value}
5957
getOptions={() => [
60-
...items.map((item) => ({
58+
...keywordValues["border-top-color"].map((value) => ({
6159
type: "keyword" as const,
62-
value: item.name,
60+
value,
6361
})),
6462
...$availableColorVariables.get(),
6563
]}

‎apps/builder/app/builder/features/style-panel/sections/borders/border-property.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { type ReactNode } from "react";
22
import type { CssProperty } from "@webstudio-is/css-engine";
33
import { toValue } from "@webstudio-is/css-engine";
44
import { Box, Grid, ToggleButton } from "@webstudio-is/design-system";
5+
import { keywordValues } from "@webstudio-is/css-data";
56
import { CssValueInputContainer } from "../../shared/css-value-input";
6-
import { styleConfigByName } from "../../shared/configs";
77
import { rowCss } from "./utils";
88
import { useSelectedInstanceKv } from "../../shared/instances-kv";
99
import {
@@ -79,9 +79,9 @@ export const BorderProperty = ({
7979
property={firstPropertyName}
8080
styleSource={styleValueSourceColor}
8181
getOptions={() => [
82-
...styleConfigByName(firstPropertyName).items.map((item) => ({
82+
...(keywordValues[firstPropertyName] ?? []).map((value) => ({
8383
type: "keyword" as const,
84-
value: item.name,
84+
value,
8585
})),
8686
...$availableUnitVariables.get(),
8787
]}
@@ -121,9 +121,9 @@ export const BorderProperty = ({
121121
property={styleDecl.property}
122122
styleSource={styleDecl.source.name}
123123
getOptions={() =>
124-
styleConfigByName(firstPropertyName).items.map((item) => ({
124+
(keywordValues[firstPropertyName] ?? []).map((value) => ({
125125
type: "keyword" as const,
126-
value: item.name,
126+
value,
127127
}))
128128
}
129129
value={styleDecl.cascadedValue}

‎apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
SmallToggleButton,
99
Tooltip,
1010
} from "@webstudio-is/design-system";
11-
import { propertyDescriptions } from "@webstudio-is/css-data";
11+
import { keywordValues, propertyDescriptions } from "@webstudio-is/css-data";
1212
import type { CssProperty, StyleValue } from "@webstudio-is/css-engine";
1313
import { toValue } from "@webstudio-is/css-engine";
1414
import {
@@ -40,7 +40,6 @@ import {
4040
AlignContentStretchIcon,
4141
} from "@webstudio-is/icons";
4242
import { MenuControl, SelectControl } from "../../controls";
43-
import { styleConfigByName } from "../../shared/configs";
4443
import { createBatchUpdate, deleteProperty } from "../../shared/use-style-data";
4544
import { StyleSection } from "../../shared/style-section";
4645
import {
@@ -56,6 +55,7 @@ import {
5655
} from "../../shared/model";
5756
import type { ComputedStyleDecl } from "~/shared/style-object-model";
5857
import { FlexGrid } from "./shared/flex-grid";
58+
import { humanizeString } from "~/shared/string-utils";
5959

6060
const GapLinked = ({
6161
isLinked,
@@ -139,24 +139,26 @@ const GapInput = ({
139139
onChange: (value: StyleValue) => void;
140140
onReset: () => void;
141141
}) => {
142-
const { label, items } = styleConfigByName(property);
143-
144142
return (
145143
<Box>
146144
<CssValueInput
147145
styleSource={styleDecl.source.name}
148146
icon={
149-
<GapTooltip label={label} styleDecl={styleDecl} onReset={onReset}>
147+
<GapTooltip
148+
label={humanizeString(property)}
149+
styleDecl={styleDecl}
150+
onReset={onReset}
151+
>
150152
{icon}
151153
</GapTooltip>
152154
}
153155
property={property}
154156
value={styleDecl.cascadedValue}
155157
intermediateValue={intermediateValue}
156158
getOptions={() => [
157-
...items.map((item) => ({
159+
...(keywordValues[property] ?? []).map((value) => ({
158160
type: "keyword" as const,
159-
value: item.name,
161+
value,
160162
})),
161163
...$availableUnitVariables.get(),
162164
]}

0 commit comments

Comments
 (0)