From 81100a0bf9776d14c34163377eba7eab7a550085 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Sun, 16 Mar 2025 02:02:54 +0700 Subject: [PATCH] refactor: hyphenate builder Switched all left overs to hyphenated css properties including animation section. StyleProperty is only stored in data. --- .../animation/set-css-property.test.tsx | 4 +- .../animation/set-css-property.ts | 21 +++---- .../animation/subject-select.tsx | 4 +- .../font-family/font-family-control.tsx | 8 +-- .../font-weight/font-weight-control.tsx | 14 ++--- .../controls/image/image-control.tsx | 10 +-- .../controls/select/select-control.tsx | 12 ++-- .../toggle-group/toggle-group-control.tsx | 15 ++--- .../controls/toggle/toggle-control.tsx | 4 +- .../features/style-panel/property-label.tsx | 26 +++----- .../sections/box-shadows/box-shadows.tsx | 2 +- .../sections/text-shadows/text-shadows.tsx | 2 +- .../transitions/transition-content.tsx | 10 +-- .../features/style-panel/shared/model.tsx | 16 ++--- .../style-panel/shared/use-style-data.ts | 61 ++++++------------- .../shared/css-editor/add-style-input.tsx | 8 +-- .../copy-paste/plugin-webflow/styles.ts | 14 ++--- 17 files changed, 89 insertions(+), 142 deletions(-) diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/set-css-property.test.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/set-css-property.test.tsx index dcbb3d28c6b9..1904d5858d9a 100644 --- a/apps/builder/app/builder/features/settings-panel/props-section/animation/set-css-property.test.tsx +++ b/apps/builder/app/builder/features/settings-panel/props-section/animation/set-css-property.test.tsx @@ -56,7 +56,7 @@ test("Add Css Property styles", () => { data.styleSources, data.styleSourceSelections, data.styles - )("boxChildId", "viewTimelineName", { + )("boxChildId", "view-timeline-name", { type: "unparsed", value: "--view-timeline-name-child", }); @@ -66,7 +66,7 @@ test("Add Css Property styles", () => { data.styleSources, data.styleSourceSelections, data.styles - )("boxId", "viewTimelineName", { + )("boxId", "view-timeline-name", { type: "unparsed", value: "--view-timeline-name", }); diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/set-css-property.ts b/apps/builder/app/builder/features/settings-panel/props-section/animation/set-css-property.ts index 35f3c70dc358..76e42302374b 100644 --- a/apps/builder/app/builder/features/settings-panel/props-section/animation/set-css-property.ts +++ b/apps/builder/app/builder/features/settings-panel/props-section/animation/set-css-property.ts @@ -1,15 +1,17 @@ -import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine"; +import { nanoid } from "nanoid"; +import type { CssProperty, StyleValue } from "@webstudio-is/css-engine"; import { getStyleDeclKey, + StyleDecl, type Breakpoints, type Instance, type Styles, type StyleSources, type StyleSourceSelections, } from "@webstudio-is/sdk"; -import { nanoid } from "nanoid"; import { isBaseBreakpoint } from "~/shared/nano-states"; +import { camelCaseProperty } from "@webstudio-is/css-data"; export const setListedCssProperty = ( @@ -19,7 +21,7 @@ export const setListedCssProperty = styleSourceSelections: StyleSourceSelections, styles: Styles ) => - (instanceId: Instance["id"], property: StyleProperty, value: StyleValue) => { + (instanceId: Instance["id"], property: CssProperty, value: StyleValue) => { if (!styleSourceSelections.has(instanceId)) { const styleSourceId = nanoid(); styleSources.set(styleSourceId, { type: "local", id: styleSourceId }); @@ -48,17 +50,12 @@ export const setListedCssProperty = throw new Error("Base breakpoint not found"); } - const styleKey = getStyleDeclKey({ - breakpointId: baseBreakpoint.id, - property, - styleSourceId: localStyleSorceId, - }); - - styles.set(styleKey, { + const styleDecl: StyleDecl = { breakpointId: baseBreakpoint.id, - property, + property: camelCaseProperty(property), styleSourceId: localStyleSorceId, value, listed: true, - }); + }; + styles.set(getStyleDeclKey(styleDecl), styleDecl); }; diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/subject-select.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/subject-select.tsx index 96d56a504fa9..c51ba0ff9f14 100644 --- a/apps/builder/app/builder/features/settings-panel/props-section/animation/subject-select.tsx +++ b/apps/builder/app/builder/features/settings-panel/props-section/animation/subject-select.tsx @@ -49,7 +49,7 @@ const initSubjects = () => { selector.length !== 0; selector = selector.slice(1) ) { - const styleDecl = getInstanceStyleDecl("viewTimelineName", selector); + const styleDecl = getInstanceStyleDecl("view-timeline-name", selector); const instanceId = selector.at(0)!; const instance = instances.get(selector[0]); @@ -139,7 +139,7 @@ export const SubjectSelect = ({ styleSources, styleSourceSelections, styles - )(subjectItem.instanceId, "viewTimelineName", { + )(subjectItem.instanceId, "view-timeline-name", { type: "unparsed", value: newValue.subject, }); diff --git a/apps/builder/app/builder/features/style-panel/controls/font-family/font-family-control.tsx b/apps/builder/app/builder/features/style-panel/controls/font-family/font-family-control.tsx index 87ad5b37ad86..d8a788790623 100644 --- a/apps/builder/app/builder/features/style-panel/controls/font-family/font-family-control.tsx +++ b/apps/builder/app/builder/features/style-panel/controls/font-family/font-family-control.tsx @@ -1,3 +1,5 @@ +import { matchSorter } from "match-sorter"; +import { forwardRef, useMemo, useState, type ComponentProps } from "react"; import { Combobox, EnhancedTooltip, @@ -5,9 +7,7 @@ import { NestedInputButton, FloatingPanel, } from "@webstudio-is/design-system"; -import { forwardRef, useMemo, useState, type ComponentProps } from "react"; import { toValue } from "@webstudio-is/css-engine"; -import { matchSorter } from "match-sorter"; import { UploadIcon } from "@webstudio-is/icons"; import { keywordValues, parseCssValue } from "@webstudio-is/css-data"; import { FontsManager } from "~/builder/shared/fonts-manager"; @@ -41,9 +41,9 @@ const matchOrSuggestToCreate = ( }; export const FontFamilyControl = () => { - const fontFamily = useComputedStyleDecl("fontFamily"); + const fontFamily = useComputedStyleDecl("font-family"); const value = fontFamily.cascadedValue; - const setValue = setProperty("fontFamily"); + const setValue = setProperty("font-family"); const [intermediateValue, setIntermediateValue] = useState< string | undefined >(); diff --git a/apps/builder/app/builder/features/style-panel/controls/font-weight/font-weight-control.tsx b/apps/builder/app/builder/features/style-panel/controls/font-weight/font-weight-control.tsx index f8f66853fdb8..10391bd0f3c8 100644 --- a/apps/builder/app/builder/features/style-panel/controls/font-weight/font-weight-control.tsx +++ b/apps/builder/app/builder/features/style-panel/controls/font-weight/font-weight-control.tsx @@ -1,3 +1,5 @@ +import { useEffect } from "react"; +import { useStore } from "@nanostores/react"; import { Select, Text } from "@webstudio-is/design-system"; import { type FontWeight, @@ -5,12 +7,10 @@ import { fontWeights, } from "@webstudio-is/fonts"; import { toValue } from "@webstudio-is/css-engine"; -import { useEffect } from "react"; -import { useComputedStyles } from "../../shared/model"; -import { setProperty } from "../../shared/use-style-data"; import { canvasApi } from "~/shared/canvas-api"; -import { useStore } from "@nanostores/react"; import { $detectedFontsWeights } from "~/shared/nano-states"; +import { useComputedStyles } from "../../shared/model"; +import { setProperty } from "../../shared/use-style-data"; const allFontWeights = Object.keys(fontWeights) as Array; @@ -24,8 +24,8 @@ const labels = new Map( export const FontWeightControl = () => { // We need the font family to determine which font weights are available const [fontWeight, fontFamily] = useComputedStyles([ - "fontWeight", - "fontFamily", + "font-weight", + "font-family", ]); const detectedFontsWeights = useStore($detectedFontsWeights); const fontFamilyCss = toValue(fontFamily.usedValue); @@ -39,7 +39,7 @@ export const FontWeightControl = () => { const selectedWeight = fontWeightNames.get(fontWeightCss) ?? (fontWeightCss as FontWeight); - const setValue = setProperty("fontWeight"); + const setValue = setProperty("font-weight"); const setFontWeight = ( nextWeight: FontWeight, diff --git a/apps/builder/app/builder/features/style-panel/controls/image/image-control.tsx b/apps/builder/app/builder/features/style-panel/controls/image/image-control.tsx index a932039d985a..802de9607b51 100644 --- a/apps/builder/app/builder/features/style-panel/controls/image/image-control.tsx +++ b/apps/builder/app/builder/features/style-panel/controls/image/image-control.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from "react"; import { useStore } from "@nanostores/react"; import { Button, @@ -5,14 +6,9 @@ import { Flex, FloatingPanel, } from "@webstudio-is/design-system"; +import type { CssProperty, InvalidValue } from "@webstudio-is/css-engine"; import { $assets } from "~/shared/nano-states"; import { ImageManager } from "~/builder/shared/image-manager"; -import { useEffect, useState } from "react"; -import type { - CssProperty, - InvalidValue, - StyleProperty, -} from "@webstudio-is/css-engine"; import { useComputedStyleDecl } from "../../shared/model"; import { getRepeatedStyleItem, @@ -36,7 +32,7 @@ export const ImageControl = ({ property, index, }: { - property: StyleProperty | CssProperty; + property: CssProperty; index: number; }) => { const assets = useStore($assets); diff --git a/apps/builder/app/builder/features/style-panel/controls/select/select-control.tsx b/apps/builder/app/builder/features/style-panel/controls/select/select-control.tsx index afffa38eb94a..53b2a62bc729 100644 --- a/apps/builder/app/builder/features/style-panel/controls/select/select-control.tsx +++ b/apps/builder/app/builder/features/style-panel/controls/select/select-control.tsx @@ -6,11 +6,9 @@ import { parseCssValue, } from "@webstudio-is/css-data"; import { - hyphenateProperty, - StyleValue, toValue, + type StyleValue, type CssProperty, - type StyleProperty, } from "@webstudio-is/css-engine"; import { Box, Select, theme } from "@webstudio-is/design-system"; import { toKebabCase } from "../../shared/keyword-utils"; @@ -30,7 +28,7 @@ export const SelectControl = ({ index, items, }: { - property: StyleProperty | CssProperty; + property: CssProperty; index?: number; items?: Array<{ label: string; name: string }>; }) => { @@ -47,9 +45,7 @@ export const SelectControl = ({ } }; const options = - items?.map(({ name }) => name) ?? - keywordValues[hyphenateProperty(property)] ?? - []; + items?.map(({ name }) => name) ?? keywordValues[property] ?? []; // We can't render an empty string as a value when display was added but without a value. // One case is when advanced property is being added, but no value is set. @@ -86,7 +82,7 @@ export const SelectControl = ({ return; } // Preview on mouse enter or focus. - const nextValue = parseCssValue(camelCaseProperty(property), name); + const nextValue = parseCssValue(property, name); setValue(nextValue, { isEphemeral: true }); }} onOpenChange={(isOpen) => { diff --git a/apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx b/apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx index 2ad50df04aa3..41101f8b9e3e 100644 --- a/apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx +++ b/apps/builder/app/builder/features/style-panel/controls/toggle-group/toggle-group-control.tsx @@ -11,12 +11,7 @@ import { ToggleGroupButton, Tooltip, } from "@webstudio-is/design-system"; -import { - hyphenateProperty, - toValue, - type CssProperty, - type StyleProperty, -} from "@webstudio-is/css-engine"; +import { toValue, type CssProperty } from "@webstudio-is/css-engine"; import { humanizeString } from "~/shared/string-utils"; import { useComputedStyles } from "../../shared/model"; import { createBatchUpdate } from "../../shared/use-style-data"; @@ -42,7 +37,7 @@ export const ToggleGroupTooltip = ({ label?: string; code?: string; description: string | undefined; - properties: (StyleProperty | CssProperty)[]; + properties: CssProperty[]; isAdvanced?: boolean; children: ReactNode; }) => { @@ -103,7 +98,7 @@ export const ToggleGroupControl = ({ items, }: { label?: string; - properties: [CssProperty | StyleProperty, ...(CssProperty | StyleProperty)[]]; + properties: [CssProperty, ...CssProperty[]]; items: Array<{ child: JSX.Element; value: string; @@ -151,12 +146,12 @@ export const ToggleGroupControl = ({ isAdvanced={isAdvanced} label={label} code={properties - .map((property) => `${hyphenateProperty(property)}: ${item.value};`) + .map((property) => `${property}: ${item.value};`) .join("\n")} description={ item.description ?? declarationDescriptions[ - `${camelCaseProperty(properties[0])}:${item.value}` as keyof typeof declarationDescriptions + `${camelCaseProperty(properties[0])}:${item.value}` ] } properties={properties} diff --git a/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx b/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx index be92ef2539e7..689f3ec090db 100644 --- a/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx +++ b/apps/builder/app/builder/features/style-panel/controls/toggle/toggle-control.tsx @@ -34,9 +34,7 @@ export const ToggleControl = ({ const isAdvanced = computedStyleDecl.source.name !== "default" && currentItem === undefined; const description = - declarationDescriptions[ - `${camelCaseProperty(property)}:${currentValue}` as keyof typeof declarationDescriptions - ]; + declarationDescriptions[`${camelCaseProperty(property)}:${currentValue}`]; return ( { const styles = useComputedStyles(properties); const styleValueSourceColor = getPriorityStyleValueSource(styles); @@ -279,7 +274,7 @@ export const PropertyLabel = ({ resetProperty(); setIsOpen(false); }} - link={propertiesData[hyphenateProperty(properties[0])]?.mdnUrl} + link={propertiesData[properties[0]]?.mdnUrl} /> } > @@ -300,7 +295,7 @@ export const PropertySectionLabel = ({ }: { label: string; description: string | undefined; - properties: [StyleProperty | CssProperty, ...(StyleProperty | CssProperty)[]]; + properties: [CssProperty, ...CssProperty[]]; }) => { const styles = useComputedStyles(properties); const styleValueSourceColor = getPriorityStyleValueSource(styles); @@ -339,7 +334,7 @@ export const PropertySectionLabel = ({ resetProperty(); setIsOpen(false); }} - link={propertiesData[hyphenateProperty(properties[0])]?.mdnUrl} + link={propertiesData[properties[0]]?.mdnUrl} /> } > @@ -369,10 +364,7 @@ export const PropertyInlineLabel = ({ label: string; title?: string; description?: string; - properties?: [ - StyleProperty | CssProperty, - ...(StyleProperty | CssProperty)[], - ]; + properties?: [CssProperty, ...CssProperty[]]; disabled?: boolean; }) => { const [isOpen, setIsOpen] = useState(false); @@ -401,7 +393,7 @@ export const PropertyInlineLabel = ({ userSelect="text" css={{ whiteSpace: "break-spaces", cursor: "text" }} > - {properties.map(hyphenateProperty).join("\n")} + {properties.join("\n")} )} {description} @@ -428,7 +420,7 @@ export const PropertyValueTooltip = ({ }: { label: string; description: string | undefined; - properties: [StyleProperty | CssProperty, ...(StyleProperty | CssProperty)[]]; + properties: [CssProperty, ...CssProperty[]]; isAdvanced?: boolean; children: ReactNode; }) => { @@ -476,7 +468,7 @@ export const PropertyValueTooltip = ({ resetProperty(); setIsOpen(false); }} - link={propertiesData[hyphenateProperty(properties[0])]?.mdnUrl} + link={propertiesData[properties[0]]?.mdnUrl} /> } > diff --git a/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadows.tsx b/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadows.tsx index d0370b8931d6..7962944c33d9 100644 --- a/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadows.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadows.tsx @@ -68,7 +68,7 @@ const getItemProps = (layer: StyleValue, computedLayer?: StyleValue) => { }; export const Section = () => { - const styleDecl = useComputedStyleDecl("boxShadow"); + const styleDecl = useComputedStyleDecl("box-shadow"); return ( { }; export const Section = () => { - const styleDecl = useComputedStyleDecl("textShadow"); + const styleDecl = useComputedStyleDecl("text-shadow"); return ( export const TransitionContent = ({ index }: { index: number }) => { const styles = useComputedStyles([ - "transitionProperty", - "transitionDuration", - "transitionTimingFunction", - "transitionDelay", - "transitionBehavior", + "transition-property", + "transition-duration", + "transition-timing-function", + "transition-delay", + "transition-behavior", ]); const [ transitionProperty, 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 1b88a0f1e2bd..545ab28f604d 100644 --- a/apps/builder/app/builder/features/style-panel/shared/model.tsx +++ b/apps/builder/app/builder/features/style-panel/shared/model.tsx @@ -8,7 +8,6 @@ import { hyphenateProperty, toVarFallback, type CssProperty, - type StyleProperty, type StyleValue, type VarValue, } from "@webstudio-is/css-engine"; @@ -341,9 +340,9 @@ export const useStyleObjectModel = () => { return useStore($model); }; -export const useComputedStyleDecl = (property: StyleProperty | CssProperty) => { +export const useComputedStyleDecl = (property: CssProperty) => { const $store = useMemo( - () => createComputedStyleDeclStore(hyphenateProperty(property)), + () => createComputedStyleDeclStore(property), [property] ); return useStore($store); @@ -386,26 +385,23 @@ export const useParentComputedStyleDecl = (property: CssProperty) => { }; export const getInstanceStyleDecl = ( - property: StyleProperty, + property: CssProperty, instanceSelector: InstanceSelector ) => { return getComputedStyleDecl({ model: $model.get(), instanceSelector, - property: hyphenateProperty(property), + property, }); }; -export const useComputedStyles = ( - properties: (StyleProperty | CssProperty)[] -) => { +export const useComputedStyles = (properties: CssProperty[]) => { // cache each computed style store const cachedStores = useRef( new Map>() ); const stores: ReadableAtom[] = []; - for (const multiCaseProperty of properties) { - const property = hyphenateProperty(multiCaseProperty); + for (const property of properties) { let store = cachedStores.current.get(property); if (store === undefined) { store = createComputedStyleDeclStore(property); diff --git a/apps/builder/app/builder/features/style-panel/shared/use-style-data.ts b/apps/builder/app/builder/features/style-panel/shared/use-style-data.ts index e04a9daac786..5e274ccb288e 100644 --- a/apps/builder/app/builder/features/style-panel/shared/use-style-data.ts +++ b/apps/builder/app/builder/features/style-panel/shared/use-style-data.ts @@ -1,9 +1,6 @@ import { getStyleDeclKey, type StyleDecl } from "@webstudio-is/sdk"; -import type { - CssProperty, - StyleProperty, - StyleValue, -} from "@webstudio-is/css-engine"; +import type { CssProperty, StyleValue } from "@webstudio-is/css-engine"; +import { camelCaseProperty } from "@webstudio-is/css-data"; import { $selectedBreakpoint, $selectedOrLastStyleSourceSelector, @@ -15,16 +12,15 @@ import { import { serverSyncStore } from "~/shared/sync"; import { $ephemeralStyles } from "~/canvas/stores"; import { $selectedInstance } from "~/shared/awareness"; -import { camelCaseProperty } from "@webstudio-is/css-data"; -export type StyleUpdate = +type StyleUpdate = | { operation: "delete"; - property: StyleProperty; + property: CssProperty; } | { operation: "set"; - property: StyleProperty; + property: CssProperty; value: StyleValue; }; @@ -35,18 +31,16 @@ export type SetValue = ( options?: StyleUpdateOptions ) => void; -export type SetProperty = (property: StyleProperty | CssProperty) => SetValue; +export type SetProperty = (property: CssProperty) => SetValue; export type DeleteProperty = ( - property: StyleProperty | CssProperty, + property: CssProperty, options?: StyleUpdateOptions ) => void; export type CreateBatchUpdate = () => { - setProperty: ( - property: StyleProperty | CssProperty - ) => (style: StyleValue) => void; - deleteProperty: (property: StyleProperty | CssProperty) => void; + setProperty: (property: CssProperty) => (style: StyleValue) => void; + deleteProperty: (property: CssProperty) => void; publish: (options?: StyleUpdateOptions) => void; }; @@ -81,7 +75,7 @@ const publishUpdates = ( breakpointId: selectedBreakpoint.id, styleSourceId: styleSourceSelector.styleSourceId, state: styleSourceSelector.state, - property: update.property, + property: camelCaseProperty(update.property), value: update.value, listed: options.listed, }); @@ -117,7 +111,7 @@ const publishUpdates = ( breakpointId, styleSourceId: styleSourceSelector.styleSourceId, state: styleSourceSelector.state, - property: update.property, + property: camelCaseProperty(update.property), value: update.value, listed: options.listed, }; @@ -129,7 +123,7 @@ const publishUpdates = ( breakpointId, styleSourceId: styleSourceSelector.styleSourceId, state: styleSourceSelector.state, - property: update.property, + property: camelCaseProperty(update.property), }); styles.delete(styleDeclKey); } @@ -141,27 +135,18 @@ const publishUpdates = ( export const setProperty: SetProperty = (property) => { return (value, options: StyleUpdateOptions = { isEphemeral: false }) => { if (value.type !== "invalid") { - const updates = [ - { - operation: "set" as const, - property: camelCaseProperty(property), - value, - }, - ]; + const updates = [{ operation: "set" as const, property, value }]; const type = options.isEphemeral ? "preview" : "update"; - publishUpdates(type, updates, options); } }; }; export const deleteProperty = ( - property: StyleProperty | CssProperty, + property: CssProperty, options: StyleUpdateOptions = { isEphemeral: false } ) => { - const updates = [ - { operation: "delete" as const, property: camelCaseProperty(property) }, - ]; + const updates = [{ operation: "delete" as const, property }]; const type = options.isEphemeral ? "preview" : "update"; publishUpdates(type, updates, options); }; @@ -169,26 +154,18 @@ export const deleteProperty = ( export const createBatchUpdate = () => { let updates: StyleUpdate[] = []; - const setProperty = (property: StyleProperty | CssProperty) => { + const setProperty = (property: CssProperty) => { const setValue = (value: StyleValue) => { if (value.type === "invalid") { return; } - - updates.push({ - operation: "set", - property: camelCaseProperty(property), - value, - }); + updates.push({ operation: "set", property, value }); }; return setValue; }; - const deleteProperty = (property: StyleProperty | CssProperty) => { - updates.push({ - operation: "delete", - property: camelCaseProperty(property), - }); + const deleteProperty = (property: CssProperty) => { + updates.push({ operation: "delete", property }); }; const publish = (options: StyleUpdateOptions = { isEphemeral: false }) => { diff --git a/apps/builder/app/builder/shared/css-editor/add-style-input.tsx b/apps/builder/app/builder/shared/css-editor/add-style-input.tsx index 3821c1a631ff..723ea1c7603b 100644 --- a/apps/builder/app/builder/shared/css-editor/add-style-input.tsx +++ b/apps/builder/app/builder/shared/css-editor/add-style-input.tsx @@ -27,7 +27,7 @@ import { generateStyleMap, mergeStyles, toValue, - type StyleProperty, + type CssProperty, } from "@webstudio-is/css-engine"; import { deleteProperty, @@ -187,7 +187,7 @@ export const AddStyleInput = forwardRef< onItemHighlight: (item) => { const previousHighlightedItem = highlightedItemRef.current; if (item?.value === undefined && previousHighlightedItem) { - deleteProperty(previousHighlightedItem.property as StyleProperty, { + deleteProperty(previousHighlightedItem.property as CssProperty, { isEphemeral: true, }); highlightedItemRef.current = undefined; @@ -195,8 +195,8 @@ export const AddStyleInput = forwardRef< } if (item?.value) { - const value = parseCssValue(item.property as StyleProperty, item.value); - setProperty(item.property as StyleProperty)(value, { + const value = parseCssValue(item.property as CssProperty, item.value); + setProperty(item.property as CssProperty)(value, { isEphemeral: true, }); highlightedItemRef.current = item; diff --git a/apps/builder/app/shared/copy-paste/plugin-webflow/styles.ts b/apps/builder/app/shared/copy-paste/plugin-webflow/styles.ts index faff2614748e..18906082fd9b 100644 --- a/apps/builder/app/shared/copy-paste/plugin-webflow/styles.ts +++ b/apps/builder/app/shared/copy-paste/plugin-webflow/styles.ts @@ -1,22 +1,22 @@ +import { nanoid } from "nanoid"; +import { url } from "css-tree"; import type { Breakpoint, Instance, WebstudioFragment, } from "@webstudio-is/sdk"; -import type { WfAsset, WfElementNode, WfNode, WfStyle } from "./schema"; -import { nanoid } from "nanoid"; -import { $styleSources } from "~/shared/nano-states"; +import { equalMedia, hyphenateProperty } from "@webstudio-is/css-engine"; import { camelCaseProperty, parseCss, pseudoElements, type ParsedStyleDecl, } from "@webstudio-is/css-data"; -import { equalMedia, hyphenateProperty } from "@webstudio-is/css-engine"; -import type { WfStylePresets } from "./style-presets-overrides"; +import { $styleSources } from "~/shared/nano-states"; import { builderApi } from "~/shared/builder-api"; -import { url } from "css-tree"; import { mapGroupBy } from "~/shared/shim"; +import type { WfStylePresets } from "./style-presets-overrides"; +import type { WfAsset, WfElementNode, WfNode, WfStyle } from "./schema"; const { toast } = builderApi; @@ -202,7 +202,7 @@ const addNodeStyles = ({ state: style.state, }); if (style.value.type === "invalid") { - const error = `Invalid style value: Local "${hyphenateProperty(style.property)}: ${style.value.value}"`; + const error = `Invalid style value: Local "${style.property}: ${style.value.value}"`; toast.error(error); console.error(error); }