From fc14133f281f7e645150a5e0854e650b722dfca7 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Mon, 14 Oct 2024 17:34:51 +0300
Subject: [PATCH] experimental: autocomplete variables in backgrounds code
 (#4281)

Ref https://github.com/webstudio-is/webstudio/issues/3399

Using dedicated inputs to autocomplete variables makes UI more complex.
Though we already have "Code" fields which can be used for the same
purpose.

Here added css fragment editor to background gradient.

![Screenshot 2024-10-14 at 15 56
54](https://github.com/user-attachments/assets/2c41f3e7-9f79-46c3-92be-870f69ac515d)
---
 .../backdrop-filter/backdrop-filter.tsx       |   4 +-
 .../backgrounds/background-content.tsx        |  74 +----------
 .../backgrounds/background-gradient.tsx       |  66 ++++------
 .../sections/backgrounds/background-image.tsx |   4 +-
 .../sections/backgrounds/backgrounds.tsx      |   4 +-
 .../sections/box-shadows/box-shadows.tsx      |   4 +-
 .../style-panel/sections/filter/filter.tsx    |   4 +-
 .../sections/text-shadows/text-shadows.tsx    |   4 +-
 .../transitions/transition-content.tsx        |   6 +-
 .../sections/transitions/transitions.tsx      |   9 +-
 .../style-panel/shared/css-fragment.test.ts   |  75 ++++++++++++
 .../style-panel/shared/css-fragment.tsx       | 109 +++++++++++++++++
 .../style-panel/shared/filter-content.tsx     |   4 +-
 .../shared/parse-css-fragment.test.ts         |  75 ------------
 .../style-panel/shared/parse-css-fragment.ts  |  14 ---
 .../style-panel/shared/repeated-style.test.ts | 115 +++++++++++++-----
 .../style-panel/shared/repeated-style.tsx     |  41 +++++--
 .../style-panel/shared/shadow-content.tsx     |   9 +-
 .../app/builder/shared/code-editor-base.tsx   |  47 +++++++
 .../app/builder/shared/code-editor.tsx        |  52 +-------
 .../app/builder/shared/expression-editor.tsx  |  52 +-------
 apps/builder/package.json                     |   1 +
 pnpm-lock.yaml                                |  71 ++++++-----
 23 files changed, 437 insertions(+), 407 deletions(-)
 create mode 100644 apps/builder/app/builder/features/style-panel/shared/css-fragment.test.ts
 create mode 100644 apps/builder/app/builder/features/style-panel/shared/css-fragment.tsx
 delete mode 100644 apps/builder/app/builder/features/style-panel/shared/parse-css-fragment.test.ts
 delete mode 100644 apps/builder/app/builder/features/style-panel/shared/parse-css-fragment.ts

diff --git a/apps/builder/app/builder/features/style-panel/sections/backdrop-filter/backdrop-filter.tsx b/apps/builder/app/builder/features/style-panel/sections/backdrop-filter/backdrop-filter.tsx
index 7efe65f88c18..64eba8fc50b7 100644
--- a/apps/builder/app/builder/features/style-panel/sections/backdrop-filter/backdrop-filter.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/backdrop-filter/backdrop-filter.tsx
@@ -8,7 +8,7 @@ import { InfoCircleIcon } from "@webstudio-is/icons";
 import { humanizeString } from "~/shared/string-utils";
 import { RepeatedStyleSection } from "../../shared/style-section";
 import { FilterSectionContent } from "../../shared/filter-content";
-import { parseCssFragment } from "../../shared/parse-css-fragment";
+import { parseCssFragment } from "../../shared/css-fragment";
 import {
   addRepeatedStyleItem,
   editRepeatedStyleItem,
@@ -44,7 +44,7 @@ export const Section = () => {
       onAdd={() => {
         addRepeatedStyleItem(
           [styleDecl],
-          parseCssFragment(initialBackdropFilter, "backdropFilter")
+          parseCssFragment(initialBackdropFilter, ["backdropFilter"])
         );
       }}
     >
diff --git a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-content.tsx b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-content.tsx
index ea72a517442c..9cdc0d4ad21b 100644
--- a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-content.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-content.tsx
@@ -11,13 +11,7 @@ import {
   RepeatRowIcon,
   CrossSmallIcon,
 } from "@webstudio-is/icons";
-import {
-  LayersValue,
-  type StyleProperty,
-  type StyleValue,
-  toValue,
-  UnparsedValue,
-} from "@webstudio-is/css-engine";
+import { type StyleValue, toValue } from "@webstudio-is/css-engine";
 import {
   theme,
   Flex,
@@ -35,17 +29,11 @@ import { BackgroundImage } from "./background-image";
 import { BackgroundPosition } from "./background-position";
 import { PropertyInlineLabel } from "../../property-label";
 import { ToggleGroupTooltip } from "../../controls/toggle-group/toggle-group-control";
-import { $availableVariables, useComputedStyleDecl } from "../../shared/model";
+import { useComputedStyleDecl } from "../../shared/model";
 import {
   getRepeatedStyleItem,
   setRepeatedStyleItem,
 } from "../../shared/repeated-style";
-import { CssValueInputContainer } from "../../shared/css-value-input";
-import {
-  setProperty,
-  type StyleUpdateOptions,
-} from "../../shared/use-style-data";
-import type { ComputedStyleDecl } from "~/shared/style-object-model";
 
 const detectImageOrGradientToggle = (styleValue?: StyleValue) => {
   if (styleValue?.type === "image") {
@@ -73,54 +61,6 @@ const Spacer = styled("div", {
   height: theme.spacing[5],
 });
 
-const setGradientProperty = (
-  styleDecl: ComputedStyleDecl,
-  index: number,
-  newItem: StyleValue,
-  options?: StyleUpdateOptions
-) => {
-  const property = styleDecl.property as StyleProperty;
-  let items: StyleValue[] = [];
-  if (styleDecl.cascadedValue.type === "var") {
-    items = [styleDecl.cascadedValue];
-  }
-  if (styleDecl.cascadedValue.type === "layers") {
-    items = styleDecl.cascadedValue.value;
-  }
-  const unpackedItem = newItem.type === "layers" ? newItem.value[0] : newItem;
-  if (items.length === 1 && unpackedItem.type === "var") {
-    setProperty(property)(unpackedItem, options);
-  } else {
-    const newValue = { type: "layers", value: items } as LayersValue;
-    newValue.value[index] = newItem as UnparsedValue;
-    setProperty(property)(newValue, options);
-  }
-};
-
-const GradientControl = ({ index }: { index: number }) => {
-  const styleDecl = useComputedStyleDecl("backgroundImage");
-  const value =
-    styleDecl.cascadedValue.type === "var"
-      ? styleDecl.cascadedValue
-      : getRepeatedStyleItem(styleDecl, index);
-  return (
-    <CssValueInputContainer
-      property="backgroundImage"
-      styleSource="default"
-      getOptions={() => $availableVariables.get()}
-      value={value}
-      setValue={(newValue, options) => {
-        setGradientProperty(styleDecl, index, newValue, options);
-      }}
-      deleteProperty={() => {
-        if (value) {
-          setGradientProperty(styleDecl, index, value);
-        }
-      }}
-    />
-  );
-};
-
 const BackgroundRepeat = ({ index }: { index: number }) => {
   const styleDecl = useComputedStyleDecl("backgroundRepeat");
   const value = getRepeatedStyleItem(styleDecl, index);
@@ -275,16 +215,6 @@ export const BackgroundContent = ({ index }: { index: number }) => {
               </FloatingPanelProvider>
             </>
           )}
-          {imageGradientToggle === "gradient" && (
-            <>
-              <PropertyInlineLabel
-                label="Gradient"
-                description={propertyDescriptions.backgroundImage}
-                properties={["backgroundImage"]}
-              />
-              <GradientControl index={index} />
-            </>
-          )}
 
           <PropertyInlineLabel
             label="Clip"
diff --git a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-gradient.tsx b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-gradient.tsx
index a24865591eee..4e5e43046d30 100644
--- a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-gradient.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-gradient.tsx
@@ -1,28 +1,19 @@
-import type {
-  InvalidValue,
-  LayersValue,
-  StyleValue,
+import {
+  toValue,
+  type InvalidValue,
+  type StyleValue,
 } from "@webstudio-is/css-engine";
 import { parseCssValue } from "@webstudio-is/css-data";
-import {
-  Flex,
-  Label,
-  Text,
-  TextArea,
-  textVariants,
-  theme,
-  Tooltip,
-} from "@webstudio-is/design-system";
+import { Flex, Label, Text, theme, Tooltip } from "@webstudio-is/design-system";
 import { useEffect, useRef, useState } from "react";
-import { parseCssFragment } from "../../shared/parse-css-fragment";
 import { InfoCircleIcon } from "@webstudio-is/icons";
 import { setProperty } from "../../shared/use-style-data";
 import { useComputedStyleDecl } from "../../shared/model";
 import {
   editRepeatedStyleItem,
-  getRepeatedStyleItem,
   setRepeatedStyleItem,
 } from "../../shared/repeated-style";
+import { parseCssFragment, CssFragmentEditor } from "../../shared/css-fragment";
 
 type IntermediateValue = {
   type: "intermediate";
@@ -33,18 +24,17 @@ const isTransparent = (color: StyleValue) =>
   color.type === "keyword" && color.value === "transparent";
 
 export const BackgroundGradient = ({ index }: { index: number }) => {
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const property = "backgroundImage";
-  const styleDecl = useComputedStyleDecl(property);
-  const styleValue = getRepeatedStyleItem(styleDecl, index);
+  const styleDecl = useComputedStyleDecl("backgroundImage");
+  let styleValue = styleDecl.cascadedValue;
+  if (styleValue.type === "layers") {
+    styleValue = styleValue.value[index];
+  }
 
   const [intermediateValue, setIntermediateValue] = useState<
     IntermediateValue | InvalidValue | undefined
   >(undefined);
 
-  const textAreaValue =
-    intermediateValue?.value ??
-    (styleValue?.type === "unparsed" ? styleValue.value : undefined);
+  const textAreaValue = intermediateValue?.value ?? toValue(styleValue);
 
   const handleChange = (value: string) => {
     setIntermediateValue({
@@ -55,9 +45,9 @@ export const BackgroundGradient = ({ index }: { index: number }) => {
     // This doesn't have the same behavior as CssValueInput.
     // However, it's great to see the immediate results when making gradient changes,
     // especially until we have a better gradient tool.
-    const newValue = parseCssValue(property, value);
+    const newValue = parseCssValue("backgroundImage", value);
 
-    if (newValue.type === "unparsed") {
+    if (newValue.type === "unparsed" || newValue.type === "var") {
       setRepeatedStyleItem(styleDecl, index, newValue, { isEphemeral: true });
       return;
     }
@@ -76,21 +66,15 @@ export const BackgroundGradient = ({ index }: { index: number }) => {
       return;
     }
 
-    const parsed = parseCssFragment(intermediateValue.value, "background");
+    const parsed = parseCssFragment(intermediateValue.value, [
+      "backgroundImage",
+      "background",
+    ]);
     const backgroundImage = parsed.get("backgroundImage");
     const backgroundColor = parsed.get("backgroundColor");
-    const layers: LayersValue =
-      backgroundImage?.type === "layers"
-        ? backgroundImage
-        : { type: "layers", value: [] };
-    const [firstLayer] = layers.value;
 
     // set invalid state
-    if (
-      backgroundColor?.type === "invalid" ||
-      layers.value.length === 0 ||
-      firstLayer.type === "invalid"
-    ) {
+    if (backgroundColor?.type === "invalid" || backgroundImage === undefined) {
       setIntermediateValue({ type: "invalid", value: intermediateValue.value });
       if (styleValue) {
         setRepeatedStyleItem(styleDecl, index, styleValue, {
@@ -107,7 +91,7 @@ export const BackgroundGradient = ({ index }: { index: number }) => {
     editRepeatedStyleItem(
       [styleDecl],
       index,
-      new Map([["backgroundImage", layers]])
+      new Map([["backgroundImage", backgroundImage]])
     );
   };
 
@@ -153,15 +137,9 @@ export const BackgroundGradient = ({ index }: { index: number }) => {
           </Tooltip>
         </Flex>
       </Label>
-      <TextArea
-        ref={textAreaRef}
-        css={{ ...textVariants.mono }}
-        rows={2}
-        autoGrow
-        maxRows={4}
-        name="description"
+      <CssFragmentEditor
+        invalid={intermediateValue?.type === "invalid"}
         value={textAreaValue ?? ""}
-        color={intermediateValue?.type === "invalid" ? "error" : undefined}
         onChange={handleChange}
         onBlur={handleOnComplete}
         onKeyDown={(event) => {
diff --git a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-image.tsx b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-image.tsx
index e72a160db092..d0659442becd 100644
--- a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-image.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-image.tsx
@@ -15,7 +15,7 @@ import { useStore } from "@nanostores/react";
 import { $assets } from "~/shared/nano-states";
 import type { StyleUpdateOptions } from "../../shared/use-style-data";
 import { InfoCircleIcon } from "@webstudio-is/icons";
-import { parseCssFragment } from "../../shared/parse-css-fragment";
+import { parseCssFragment } from "../../shared/css-fragment";
 import { useComputedStyleDecl } from "../../shared/model";
 import {
   getRepeatedStyleItem,
@@ -90,7 +90,7 @@ export const BackgroundImage = ({ index }: { index: number }) => {
       value: value,
     });
 
-    const parsed = parseCssFragment(value, "background");
+    const parsed = parseCssFragment(value, ["backgroundImage", "background"]);
     const newValue = parsed.get("backgroundImage");
 
     if (newValue === undefined || newValue?.type === "invalid") {
diff --git a/apps/builder/app/builder/features/style-panel/sections/backgrounds/backgrounds.tsx b/apps/builder/app/builder/features/style-panel/sections/backgrounds/backgrounds.tsx
index 247610b5a0ff..3f8ed8fc80ea 100644
--- a/apps/builder/app/builder/features/style-panel/sections/backgrounds/backgrounds.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/backgrounds/backgrounds.tsx
@@ -11,7 +11,7 @@ import {
   RepeatedStyle,
 } from "../../shared/repeated-style";
 import { useComputedStyles } from "../../shared/model";
-import { parseCssFragment } from "../../shared/parse-css-fragment";
+import { parseCssFragment } from "../../shared/css-fragment";
 import { BackgroundContent } from "./background-content";
 import {
   getBackgroundLabel,
@@ -34,7 +34,7 @@ export const Section = () => {
       description="Add one or more backgrounds to the instance such as a color, image, or gradient."
       properties={properties}
       onAdd={() => {
-        addRepeatedStyleItem(styles, parseCssFragment("none", "background"));
+        addRepeatedStyleItem(styles, parseCssFragment("none", ["background"]));
       }}
     >
       <Flex gap={1} direction="column">
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 8d583708774a..06ed6a53b6cf 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
@@ -12,7 +12,7 @@ import {
   editRepeatedStyleItem,
   RepeatedStyle,
 } from "../../shared/repeated-style";
-import { parseCssFragment } from "../../shared/parse-css-fragment";
+import { parseCssFragment } from "../../shared/css-fragment";
 
 export const properties = ["boxShadow"] satisfies [
   StyleProperty,
@@ -67,7 +67,7 @@ export const Section = () => {
       onAdd={() => {
         addRepeatedStyleItem(
           [styleDecl],
-          parseCssFragment(initialBoxShadow, "boxShadow")
+          parseCssFragment(initialBoxShadow, ["boxShadow"])
         );
       }}
     >
diff --git a/apps/builder/app/builder/features/style-panel/sections/filter/filter.tsx b/apps/builder/app/builder/features/style-panel/sections/filter/filter.tsx
index a1094a35a35e..638e24f30c02 100644
--- a/apps/builder/app/builder/features/style-panel/sections/filter/filter.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/filter/filter.tsx
@@ -12,7 +12,7 @@ import {
   editRepeatedStyleItem,
   RepeatedStyle,
 } from "../../shared/repeated-style";
-import { parseCssFragment } from "../../shared/parse-css-fragment";
+import { parseCssFragment } from "../../shared/css-fragment";
 import { useComputedStyleDecl } from "../../shared/model";
 import { humanizeString } from "~/shared/string-utils";
 
@@ -44,7 +44,7 @@ export const Section = () => {
       onAdd={() => {
         addRepeatedStyleItem(
           [styleDecl],
-          parseCssFragment(initialFilter, "filter")
+          parseCssFragment(initialFilter, ["filter"])
         );
       }}
     >
diff --git a/apps/builder/app/builder/features/style-panel/sections/text-shadows/text-shadows.tsx b/apps/builder/app/builder/features/style-panel/sections/text-shadows/text-shadows.tsx
index f12f252dcfc4..7323aa18515a 100644
--- a/apps/builder/app/builder/features/style-panel/sections/text-shadows/text-shadows.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/text-shadows/text-shadows.tsx
@@ -11,7 +11,7 @@ import {
   editRepeatedStyleItem,
   RepeatedStyle,
 } from "../../shared/repeated-style";
-import { parseCssFragment } from "../../shared/parse-css-fragment";
+import { parseCssFragment } from "../../shared/css-fragment";
 import { useComputedStyleDecl } from "../../shared/model";
 
 export const properties = ["textShadow"] satisfies [
@@ -54,7 +54,7 @@ export const Section = () => {
       onAdd={() => {
         addRepeatedStyleItem(
           [styleDecl],
-          parseCssFragment(initialTextShadow, "textShadow")
+          parseCssFragment(initialTextShadow, ["textShadow"])
         );
       }}
     >
diff --git a/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx b/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx
index 963580ac3c49..b7fdcfb572ee 100644
--- a/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx
@@ -21,7 +21,7 @@ import { properties, propertyDescriptions } from "@webstudio-is/css-data";
 import type { StyleUpdateOptions } from "../../shared/use-style-data";
 import { type IntermediateStyleValue } from "../../shared/css-value-input";
 import { CssValueInputContainer } from "../../shared/css-value-input";
-import { parseCssFragment } from "../../shared/parse-css-fragment";
+import { parseCssFragment } from "../../shared/css-fragment";
 import { PropertyInlineLabel } from "../../property-label";
 import { TransitionProperty } from "./transition-property";
 import { TransitionTiming } from "./transition-timing";
@@ -82,7 +82,7 @@ export const TransitionContent = ({ index }: { index: number }) => {
     editRepeatedStyleItem(
       styles,
       index,
-      parseCssFragment(intermediateValue.value, "transition")
+      parseCssFragment(intermediateValue.value, ["transition"])
     );
   };
 
@@ -111,7 +111,7 @@ export const TransitionContent = ({ index }: { index: number }) => {
     editRepeatedStyleItem(
       styles,
       index,
-      parseCssFragment(shorthand, "transition"),
+      parseCssFragment(shorthand, ["transition"]),
       options
     );
   };
diff --git a/apps/builder/app/builder/features/style-panel/sections/transitions/transitions.tsx b/apps/builder/app/builder/features/style-panel/sections/transitions/transitions.tsx
index e48e59604470..6f13b8e512df 100644
--- a/apps/builder/app/builder/features/style-panel/sections/transitions/transitions.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/transitions/transitions.tsx
@@ -28,7 +28,7 @@ import {
   type TransitionProperty,
 } from "./transition-utils";
 import { TransitionContent } from "./transition-content";
-import { parseCssFragment } from "../../shared/parse-css-fragment";
+import { parseCssFragment } from "../../shared/css-fragment";
 
 export { transitionLongHandProperties as properties };
 
@@ -116,10 +116,9 @@ export const Section = () => {
                   setIsOpen(true);
                   addRepeatedStyleItem(
                     styles,
-                    parseCssFragment(
-                      "opacity 200ms ease 0ms normal",
-                      "transition"
-                    )
+                    parseCssFragment("opacity 200ms ease 0ms normal", [
+                      "transition",
+                    ])
                   );
                 }}
               />
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-fragment.test.ts b/apps/builder/app/builder/features/style-panel/shared/css-fragment.test.ts
new file mode 100644
index 000000000000..29f7706b726a
--- /dev/null
+++ b/apps/builder/app/builder/features/style-panel/shared/css-fragment.test.ts
@@ -0,0 +1,75 @@
+import { expect, test } from "@jest/globals";
+import { parseCssFragment } from "./css-fragment";
+import { parseCssValue } from "@webstudio-is/css-data";
+import { setEnv } from "@webstudio-is/feature-flags";
+
+setEnv("*");
+
+test("parse var()", () => {
+  const result = new Map([
+    ["backgroundImage", parseCssValue("backgroundImage", "var(--bg)")],
+  ]);
+  expect(
+    parseCssFragment("var(--bg)", ["backgroundImage", "background"])
+  ).toEqual(result);
+  expect(
+    parseCssFragment("background-image: var(--bg)", [
+      "backgroundImage",
+      "background",
+    ])
+  ).toEqual(result);
+});
+
+test("fallback further to valid values", () => {
+  const result = new Map([
+    ["backgroundImage", parseCssValue("backgroundImage", "none")],
+    ["backgroundPositionX", parseCssValue("backgroundPositionX", "0%")],
+    ["backgroundPositionY", parseCssValue("backgroundPositionY", "0%")],
+    ["backgroundSize", parseCssValue("backgroundSize", "auto auto")],
+    ["backgroundRepeat", parseCssValue("backgroundRepeat", "repeat")],
+    ["backgroundAttachment", parseCssValue("backgroundAttachment", "scroll")],
+    ["backgroundOrigin", parseCssValue("backgroundOrigin", "padding-box")],
+    ["backgroundClip", parseCssValue("backgroundClip", "border-box")],
+    [
+      "backgroundColor",
+      parseCssValue("backgroundColor", "rgba(255, 255, 255, 1)"),
+    ],
+  ]);
+  expect(parseCssFragment("#fff", ["backgroundImage", "background"])).toEqual(
+    result
+  );
+});
+
+test("parse shorthand property", () => {
+  const result = new Map([
+    ["transitionProperty", parseCssValue("transitionProperty", "opacity")],
+    ["transitionDuration", parseCssValue("transitionDuration", "1s")],
+    [
+      "transitionTimingFunction",
+      parseCssValue("transitionTimingFunction", "ease"),
+    ],
+    ["transitionDelay", parseCssValue("transitionDelay", "0s")],
+    ["transitionBehavior", parseCssValue("transitionBehavior", "normal")],
+  ]);
+  expect(parseCssFragment("opacity 1s", ["transition"])).toEqual(result);
+  expect(parseCssFragment("transition: opacity 1s", ["transition"])).toEqual(
+    result
+  );
+});
+
+test("parse longhand properties", () => {
+  expect(
+    parseCssFragment(
+      `
+       transition-property: opacity;
+       transition-duration: 1s;
+     `,
+      ["transition"]
+    )
+  ).toEqual(
+    new Map([
+      ["transitionProperty", parseCssValue("transitionProperty", "opacity")],
+      ["transitionDuration", parseCssValue("transitionDuration", "1s")],
+    ])
+  );
+});
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-fragment.tsx b/apps/builder/app/builder/features/style-panel/shared/css-fragment.tsx
new file mode 100644
index 000000000000..03c6c825db5e
--- /dev/null
+++ b/apps/builder/app/builder/features/style-panel/shared/css-fragment.tsx
@@ -0,0 +1,109 @@
+import { useMemo, useRef } from "react";
+import { matchSorter, type RankingInfo } from "match-sorter";
+import { EditorView, keymap, tooltips } from "@codemirror/view";
+import { css } from "@codemirror/lang-css";
+import {
+  autocompletion,
+  completionKeymap,
+  type CompletionSource,
+} from "@codemirror/autocomplete";
+import { toValue } from "@webstudio-is/css-engine";
+import { parseCss } from "@webstudio-is/css-data";
+import { css as style } from "@webstudio-is/design-system";
+import { isFeatureEnabled } from "@webstudio-is/feature-flags";
+import {
+  CodeEditorBase,
+  getMinMaxHeightVars,
+} from "~/builder/shared/code-editor-base";
+import { $availableVariables } from "./model";
+
+export const parseCssFragment = (css: string, fallbacks: string[]) => {
+  let parsed = parseCss(`.styles{${css}}`, {
+    customProperties: isFeatureEnabled("cssVars"),
+  });
+  if (parsed.length === 0) {
+    for (const fallbackProperty of fallbacks) {
+      parsed = parseCss(`.styles{${fallbackProperty}: ${css}}`, {
+        customProperties: isFeatureEnabled("cssVars"),
+      });
+      parsed = parsed.filter((styleDecl) => styleDecl.value.type !== "invalid");
+      if (parsed.length > 0) {
+        break;
+      }
+    }
+  }
+  return new Map(
+    parsed.map((styleDecl) => [styleDecl.property, styleDecl.value])
+  );
+};
+
+const compareVariables = (left: RankingInfo, right: RankingInfo) => {
+  return left.rankedValue.localeCompare(right.rankedValue, undefined, {
+    numeric: true,
+  });
+};
+
+const scopeCompletionSource: CompletionSource = (context) => {
+  const word = context.matchBefore(/[-\w]+/);
+  if (word === null || (word.from === word.to && false === context.explicit)) {
+    return null;
+  }
+  const search = word.text;
+  const availableVariables = $availableVariables.get();
+  const options = availableVariables.map((varValue) => ({
+    label: toValue(varValue),
+    displayLabel: `--${varValue.value}`,
+  }));
+  const matches = matchSorter(options, search, {
+    keys: ["label"],
+    baseSort: compareVariables,
+  });
+  return {
+    from: word.from,
+    filter: false,
+    options: matches,
+  };
+};
+
+const wrapperStyle = style({
+  position: "relative",
+  ...getMinMaxHeightVars({ minHeight: "40px", maxHeight: "80px" }),
+});
+
+export const CssFragmentEditor = ({
+  onKeyDown,
+  ...props
+}: {
+  invalid?: boolean;
+  value: string;
+  onChange: (newValue: string) => void;
+  onBlur?: (event: FocusEvent) => void;
+  onKeyDown?: (event: KeyboardEvent) => void;
+}) => {
+  const onKeyDownRef = useRef(onKeyDown);
+  onKeyDownRef.current = onKeyDown;
+  const extensions = useMemo(() => {
+    return [
+      css(),
+      // render autocomplete in body
+      // to prevent popover scroll overflow
+      tooltips({ parent: document.body }),
+      autocompletion({
+        override: [scopeCompletionSource],
+        icons: false,
+      }),
+      keymap.of([...completionKeymap]),
+      EditorView.domEventHandlers({
+        keydown(event) {
+          onKeyDownRef.current?.(event);
+        },
+      }),
+    ];
+  }, []);
+
+  return (
+    <div className={wrapperStyle()}>
+      <CodeEditorBase {...props} extensions={extensions} />
+    </div>
+  );
+};
diff --git a/apps/builder/app/builder/features/style-panel/shared/filter-content.tsx b/apps/builder/app/builder/features/style-panel/shared/filter-content.tsx
index d7f2cbb353a7..a211ae393d19 100644
--- a/apps/builder/app/builder/features/style-panel/shared/filter-content.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/filter-content.tsx
@@ -23,7 +23,7 @@ import {
 import { parseCssValue } from "@webstudio-is/css-data";
 import type { StyleUpdateOptions } from "../shared/use-style-data";
 import { ShadowContent } from "./shadow-content";
-import { parseCssFragment } from "./parse-css-fragment";
+import { parseCssFragment } from "./css-fragment";
 
 // filters can't be validated directly in the css-engine. Because, these are not properties
 // but functions that proeprties accept. So, we need to validate them manually using fake proeprties
@@ -150,7 +150,7 @@ export const FilterSectionContent = ({
     value: string,
     options: StyleUpdateOptions = { isEphemeral: false }
   ) => {
-    const parsed = parseCssFragment(value, camelCase(property));
+    const parsed = parseCssFragment(value, [camelCase(property)]);
     const parsedValue = parsed.get(property);
     const invalid = parsedValue === undefined || parsedValue.type === "invalid";
     setIntermediateValue({
diff --git a/apps/builder/app/builder/features/style-panel/shared/parse-css-fragment.test.ts b/apps/builder/app/builder/features/style-panel/shared/parse-css-fragment.test.ts
deleted file mode 100644
index 1c4f90e8dd26..000000000000
--- a/apps/builder/app/builder/features/style-panel/shared/parse-css-fragment.test.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { expect, test } from "@jest/globals";
-import { parseCssFragment } from "./parse-css-fragment";
-
-test("parse shorthand property", () => {
-  const result = new Map([
-    [
-      "transitionProperty",
-      {
-        type: "layers",
-        value: [{ type: "unparsed", value: "opacity" }],
-      },
-    ],
-    [
-      "transitionDuration",
-      {
-        type: "layers",
-        value: [{ type: "unit", unit: "s", value: 1 }],
-      },
-    ],
-    [
-      "transitionTimingFunction",
-      {
-        type: "layers",
-        value: [{ type: "keyword", value: "ease" }],
-      },
-    ],
-    [
-      "transitionDelay",
-      {
-        type: "layers",
-        value: [{ type: "unit", unit: "s", value: 0 }],
-      },
-    ],
-    [
-      "transitionBehavior",
-      {
-        type: "layers",
-        value: [{ type: "keyword", value: "normal" }],
-      },
-    ],
-  ]);
-  expect(parseCssFragment("opacity 1s", "transition")).toEqual(result);
-  expect(parseCssFragment("transition: opacity 1s", "transition")).toEqual(
-    result
-  );
-});
-
-test("parse longhand properties", () => {
-  expect(
-    parseCssFragment(
-      `
-       transition-property: opacity;
-       transition-duration: 1s;
-     `,
-      "transition"
-    )
-  ).toEqual(
-    new Map([
-      [
-        "transitionProperty",
-        {
-          type: "layers",
-          value: [{ type: "unparsed", value: "opacity" }],
-        },
-      ],
-      [
-        "transitionDuration",
-        {
-          type: "layers",
-          value: [{ type: "unit", unit: "s", value: 1 }],
-        },
-      ],
-    ])
-  );
-});
diff --git a/apps/builder/app/builder/features/style-panel/shared/parse-css-fragment.ts b/apps/builder/app/builder/features/style-panel/shared/parse-css-fragment.ts
deleted file mode 100644
index e0667c28bc3d..000000000000
--- a/apps/builder/app/builder/features/style-panel/shared/parse-css-fragment.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { parseCss } from "@webstudio-is/css-data";
-import { isFeatureEnabled } from "@webstudio-is/feature-flags";
-
-export const parseCssFragment = (css: string, fallbackProperty: string) => {
-  let parsed = parseCss(`.styles{${css}}`, {
-    customProperties: isFeatureEnabled("cssVars"),
-  });
-  if (parsed.length === 0) {
-    parsed = parseCss(`.styles{${fallbackProperty}: ${css}}`);
-  }
-  return new Map(
-    parsed.map((styleDecl) => [styleDecl.property, styleDecl.value])
-  );
-};
diff --git a/apps/builder/app/builder/features/style-panel/shared/repeated-style.test.ts b/apps/builder/app/builder/features/style-panel/shared/repeated-style.test.ts
index 57c19aa8dde8..6d1c734c381a 100644
--- a/apps/builder/app/builder/features/style-panel/shared/repeated-style.test.ts
+++ b/apps/builder/app/builder/features/style-panel/shared/repeated-style.test.ts
@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, test } from "@jest/globals";
+import { setEnv } from "@webstudio-is/feature-flags";
 import {
   toValue,
   type StyleProperty,
@@ -15,7 +16,7 @@ import {
   toggleRepeatedStyleItem,
 } from "./repeated-style";
 import { createComputedStyleDeclStore } from "./model";
-import { parseCssFragment } from "./parse-css-fragment";
+import { parseCssFragment } from "./css-fragment";
 import {
   $breakpoints,
   $selectedBreakpointId,
@@ -28,6 +29,7 @@ import { registerContainers } from "~/shared/sync";
 import { setProperty } from "./use-style-data";
 import type { ComputedStyleDecl } from "~/shared/style-object-model";
 
+setEnv("*");
 registerContainers();
 
 beforeEach(() => {
@@ -96,7 +98,7 @@ describe("add repeated item", () => {
     expect($transitionProperty.get().cascadedValue.type).toEqual("var");
     addRepeatedStyleItem(
       [$transitionProperty.get()],
-      parseCssFragment("opacity", "transitionProperty")
+      parseCssFragment("opacity", ["transitionProperty"])
     );
     expect(toValue($transitionProperty.get().cascadedValue)).toEqual(
       "var(--my-property), opacity"
@@ -108,11 +110,11 @@ describe("add repeated item", () => {
       createComputedStyleDeclStore("transitionProperty");
     addRepeatedStyleItem(
       [$transitionProperty.get()],
-      parseCssFragment("opacity", "transitionProperty")
+      parseCssFragment("opacity", ["transitionProperty"])
     );
     addRepeatedStyleItem(
       [$transitionProperty.get()],
-      parseCssFragment("transform", "transitionProperty")
+      parseCssFragment("transform", ["transitionProperty"])
     );
     expect(toValue($transitionProperty.get().cascadedValue)).toEqual(
       "opacity, transform"
@@ -123,11 +125,11 @@ describe("add repeated item", () => {
     const $filter = createComputedStyleDeclStore("filter");
     addRepeatedStyleItem(
       [$filter.get()],
-      parseCssFragment("blur(5px)", "filter")
+      parseCssFragment("blur(5px)", ["filter"])
     );
     addRepeatedStyleItem(
       [$filter.get()],
-      parseCssFragment("brightness(0.5)", "filter")
+      parseCssFragment("brightness(0.5)", ["filter"])
     );
     expect(toValue($filter.get().cascadedValue)).toEqual(
       "blur(5px) brightness(0.5)"
@@ -138,7 +140,7 @@ describe("add repeated item", () => {
     const $backgroundColor = createComputedStyleDeclStore("backgroundColor");
     addRepeatedStyleItem(
       [$backgroundColor.get()],
-      parseCssFragment("none", "background")
+      parseCssFragment("none", ["background"])
     );
     expect($backgroundColor.get().source.name).toEqual("default");
     expect(toValue($backgroundColor.get().cascadedValue)).toEqual(
@@ -160,7 +162,7 @@ describe("add repeated item", () => {
         $transitionDuration.get(),
         $transitionDelay.get(),
       ],
-      parseCssFragment("width 2s", "transition")
+      parseCssFragment("width 2s", ["transition"])
     );
     expect(toValue($transitionProperty.get().cascadedValue)).toEqual(
       "opacity, transform, width"
@@ -172,31 +174,80 @@ describe("add repeated item", () => {
   });
 });
 
-test("edit layer in repeated style", () => {
-  const $transitionProperty =
-    createComputedStyleDeclStore("transitionProperty");
-  setRawProperty("transitionProperty", "opacity, transform");
-  editRepeatedStyleItem(
-    [$transitionProperty.get()],
-    1,
-    parseCssFragment("width", "transitionProperty")
-  );
-  expect(toValue($transitionProperty.get().cascadedValue)).toEqual(
-    "opacity, width"
-  );
-});
+describe("edit item in repeated style", () => {
+  test("edit single variable", () => {
+    const $backgroundImage = createComputedStyleDeclStore("backgroundImage");
+    setRawProperty("backgroundImage", "none");
+    editRepeatedStyleItem(
+      [$backgroundImage.get()],
+      0,
+      parseCssFragment("var(--gradient1)", ["backgroundImage"])
+    );
+    expect(toValue($backgroundImage.get().cascadedValue)).toEqual(
+      "var(--gradient1)"
+    );
+    expect($backgroundImage.get().cascadedValue.type).toEqual("var");
+    editRepeatedStyleItem(
+      [$backgroundImage.get()],
+      // use greater index when access computed items
+      2,
+      parseCssFragment("var(--gradient2)", ["backgroundImage"])
+    );
+    expect(toValue($backgroundImage.get().cascadedValue)).toEqual(
+      "var(--gradient2)"
+    );
+    expect($backgroundImage.get().cascadedValue.type).toEqual("var");
+  });
 
-test("edit tuple in repeated style", () => {
-  const $filter = createComputedStyleDeclStore("filter");
-  setRawProperty("filter", "blur(5px) brightness(0.5)");
-  editRepeatedStyleItem(
-    [$filter.get()],
-    1,
-    parseCssFragment("contrast(200%)", "filter")
-  );
-  expect(toValue($filter.get().cascadedValue)).toEqual(
-    "blur(5px) contrast(200%)"
-  );
+  test("edit variable in multiple layers", () => {
+    const $backgroundImage = createComputedStyleDeclStore("backgroundImage");
+    setRawProperty("backgroundImage", "none, none");
+    editRepeatedStyleItem(
+      [$backgroundImage.get()],
+      1,
+      parseCssFragment("var(--gradient1)", ["backgroundImage"])
+    );
+    expect(toValue($backgroundImage.get().cascadedValue)).toEqual(
+      "none, var(--gradient1)"
+    );
+    expect($backgroundImage.get().cascadedValue.type).toEqual("layers");
+    editRepeatedStyleItem(
+      [$backgroundImage.get()],
+      1,
+      parseCssFragment("var(--gradient2)", ["backgroundImage"])
+    );
+    expect(toValue($backgroundImage.get().cascadedValue)).toEqual(
+      "none, var(--gradient2)"
+    );
+    expect($backgroundImage.get().cascadedValue.type).toEqual("layers");
+  });
+
+  test("edit layer", () => {
+    const $transitionProperty =
+      createComputedStyleDeclStore("transitionProperty");
+    setRawProperty("transitionProperty", "opacity, transform");
+    editRepeatedStyleItem(
+      [$transitionProperty.get()],
+      1,
+      parseCssFragment("width", ["transitionProperty"])
+    );
+    expect(toValue($transitionProperty.get().cascadedValue)).toEqual(
+      "opacity, width"
+    );
+  });
+
+  test("edit tuple", () => {
+    const $filter = createComputedStyleDeclStore("filter");
+    setRawProperty("filter", "blur(5px) brightness(0.5)");
+    editRepeatedStyleItem(
+      [$filter.get()],
+      1,
+      parseCssFragment("contrast(200%)", ["filter"])
+    );
+    expect(toValue($filter.get().cascadedValue)).toEqual(
+      "blur(5px) contrast(200%)"
+    );
+  });
 });
 
 test("set layers item into repeated style", () => {
diff --git a/apps/builder/app/builder/features/style-panel/shared/repeated-style.tsx b/apps/builder/app/builder/features/style-panel/shared/repeated-style.tsx
index 890138aebc78..e78bfe10f9e2 100644
--- a/apps/builder/app/builder/features/style-panel/shared/repeated-style.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/repeated-style.tsx
@@ -175,21 +175,44 @@ export const editRepeatedStyleItem = (
   const currentStyles = new Map(
     styles.map((styleDecl) => [styleDecl.property, styleDecl])
   );
-  const primaryValue = styles[0].cascadedValue;
   for (const [property, value] of newItems) {
     const styleDecl = currentStyles.get(property);
     if (styleDecl === undefined) {
       continue;
     }
-    const newValue = normalizeStyleValue(styleDecl, primaryValue);
-    if (value.type !== newValue.type) {
-      console.error(
-        `Unexpected item type "${value.type}" for ${property} repeated value`
-      );
-      continue;
+    let items: StyleValue[] = [];
+    if (styleDecl.cascadedValue.type === "var") {
+      items = [styleDecl.cascadedValue];
+    }
+    if (isRepeatedValue(styleDecl.cascadedValue)) {
+      items = styleDecl.cascadedValue.value;
+    }
+    if (items.length <= 1 && value.type === "var") {
+      batch.setProperty(property)(value);
+    } else {
+      let valueType;
+      if (isRepeatedValue(styleDecl.cascadedValue)) {
+        valueType = styleDecl.cascadedValue.type;
+      }
+      if (isRepeatedValue(value)) {
+        valueType = value.type;
+      }
+      if (valueType === undefined) {
+        continue;
+      }
+      const newItems: StyleValue[] = [...items];
+      if (value.type === "var") {
+        newItems.splice(index, 1, value);
+      }
+      if (isRepeatedValue(value)) {
+        newItems.splice(index, 1, ...value.value);
+      }
+      const newValue = {
+        type: valueType,
+        value: newItems as UnparsedValue[],
+      };
+      batch.setProperty(property)(newValue);
     }
-    newValue.value.splice(index, 1, ...value.value);
-    batch.setProperty(property)(newValue);
   }
   batch.publish(options);
 };
diff --git a/apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx b/apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx
index c6442603909c..95b8206fbbcd 100644
--- a/apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx
@@ -36,7 +36,7 @@ import type { IntermediateStyleValue } from "../shared/css-value-input";
 import { CssValueInputContainer } from "../shared/css-value-input";
 import { toPascalCase } from "../shared/keyword-utils";
 import type { StyleUpdateOptions } from "../shared/use-style-data";
-import { parseCssFragment } from "./parse-css-fragment";
+import { parseCssFragment } from "./css-fragment";
 import { PropertyInlineLabel } from "../property-label";
 import { styleConfigByName } from "./configs";
 import { ColorPicker } from "./color-picker";
@@ -163,10 +163,9 @@ export const ShadowContent = ({
     // https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow#formal_syntax
     // https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow#formal_syntax
     // Both share a similar syntax but the property name is different.
-    const parsed = parseCssFragment(
-      intermediateValue.value,
-      property === "dropShadow" ? "textShadow" : property
-    );
+    const parsed = parseCssFragment(intermediateValue.value, [
+      property === "dropShadow" ? "textShadow" : property,
+    ]);
     const parsedValue = parsed.get(
       property === "dropShadow" ? "textShadow" : property
     );
diff --git a/apps/builder/app/builder/shared/code-editor-base.tsx b/apps/builder/app/builder/shared/code-editor-base.tsx
index f8eea9a59abb..c096f9a999b6 100644
--- a/apps/builder/app/builder/shared/code-editor-base.tsx
+++ b/apps/builder/app/builder/shared/code-editor-base.tsx
@@ -41,6 +41,7 @@ import {
   Button,
   DialogClose,
   Flex,
+  rawTheme,
 } from "@webstudio-is/design-system";
 import { CrossIcon, MaximizeIcon, MinimizeIcon } from "@webstudio-is/icons";
 
@@ -151,6 +152,51 @@ const highlightStyle = HighlightStyle.define([
   },
 ]);
 
+const autocompletionTooltipTheme = EditorView.theme({
+  ".cm-tooltip.cm-tooltip-autocomplete": {
+    ...textVariants.mono,
+    border: "none",
+    backgroundColor: "transparent",
+    // override none set on body by radix popover
+    pointerEvents: "auto",
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete ul": {
+    minWidth: "160px",
+    maxWidth: "260px",
+    width: "max-content",
+    boxSizing: "border-box",
+    borderRadius: rawTheme.borderRadius[6],
+    backgroundColor: rawTheme.colors.backgroundMenu,
+    border: `1px solid ${rawTheme.colors.borderMain}`,
+    boxShadow: `${rawTheme.shadows.menuDropShadow}, inset 0 0 0 1px ${rawTheme.colors.borderMenuInner}`,
+    padding: rawTheme.spacing[3],
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete ul li": {
+    ...textVariants.labelsTitleCase,
+    textTransform: "none",
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    color: rawTheme.colors.foregroundMain,
+    padding: rawTheme.spacing[3],
+    borderRadius: rawTheme.borderRadius[3],
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete li[aria-selected], .cm-tooltip.cm-tooltip-autocomplete li:hover":
+    {
+      color: rawTheme.colors.foregroundMain,
+      backgroundColor: rawTheme.colors.backgroundItemMenuItemHover,
+    },
+  ".cm-tooltip.cm-tooltip-autocomplete .cm-completionLabel": {
+    flexGrow: 1,
+  },
+  ".cm-tooltip.cm-tooltip-autocomplete .cm-completionDetail": {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    fontStyle: "normal",
+    color: rawTheme.colors.hint,
+  },
+});
+
 export type EditorApi = {
   replaceSelection: (string: string) => void;
 };
@@ -213,6 +259,7 @@ export const EditorContent = ({
     view.dispatch({
       effects: StateEffect.reconfigure.of([
         ...extensions,
+        autocompletionTooltipTheme,
         history(),
         drawSelection(),
         dropCursor(),
diff --git a/apps/builder/app/builder/shared/code-editor.tsx b/apps/builder/app/builder/shared/code-editor.tsx
index 5da089982a00..eddc6d5b7348 100644
--- a/apps/builder/app/builder/shared/code-editor.tsx
+++ b/apps/builder/app/builder/shared/code-editor.tsx
@@ -15,53 +15,9 @@ import {
 } from "@codemirror/autocomplete";
 import { html } from "@codemirror/lang-html";
 import { markdown } from "@codemirror/lang-markdown";
-import { theme, textVariants, css } from "@webstudio-is/design-system";
+import { css } from "@webstudio-is/design-system";
 import { CodeEditorBase, getMinMaxHeightVars } from "./code-editor-base";
 
-const autocompletionStyle = css({
-  "&.cm-tooltip.cm-tooltip-autocomplete": {
-    ...textVariants.mono,
-    border: "none",
-    backgroundColor: "transparent",
-    // override none set on body by radix popover
-    pointerEvents: "auto",
-    "& ul": {
-      minWidth: 160,
-      maxWidth: 260,
-      width: "max-content",
-      boxSizing: "border-box",
-      borderRadius: theme.borderRadius[6],
-      backgroundColor: theme.colors.backgroundMenu,
-      border: `1px solid ${theme.colors.borderMain}`,
-      boxShadow: `${theme.shadows.menuDropShadow}, inset 0 0 0 1px ${theme.colors.borderMenuInner}`,
-      padding: theme.spacing[3],
-      "& li": {
-        ...textVariants.labelsTitleCase,
-        textTransform: "none",
-        position: "relative",
-        display: "flex",
-        alignItems: "center",
-        color: theme.colors.foregroundMain,
-        padding: theme.spacing[3],
-        borderRadius: theme.borderRadius[3],
-        "&[aria-selected], &:hover": {
-          color: theme.colors.foregroundMain,
-          backgroundColor: theme.colors.backgroundItemMenuItemHover,
-        },
-        "& .cm-completionLabel": {
-          flexGrow: 1,
-        },
-        "& .cm-completionDetail": {
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          fontStyle: "normal",
-          color: theme.colors.hint,
-        },
-      },
-    },
-  },
-});
-
 const wrapperStyle = css({
   position: "relative",
   // 1 line is 16px
@@ -79,11 +35,7 @@ const getHtmlExtensions = () => [
   // render autocomplete in body
   // to prevent popover scroll overflow
   tooltips({ parent: document.body }),
-  autocompletion({
-    icons: false,
-    tooltipClass: () => autocompletionStyle.toString(),
-    closeOnBlur: false,
-  }),
+  autocompletion({ icons: false }),
   keymap.of([...closeBracketsKeymap, ...completionKeymap]),
 ];
 
diff --git a/apps/builder/app/builder/shared/expression-editor.tsx b/apps/builder/app/builder/shared/expression-editor.tsx
index 6b49ffc0a112..b522c86132a0 100644
--- a/apps/builder/app/builder/shared/expression-editor.tsx
+++ b/apps/builder/app/builder/shared/expression-editor.tsx
@@ -27,12 +27,7 @@ import {
   pickedCompletion,
 } from "@codemirror/autocomplete";
 import { javascript } from "@codemirror/lang-javascript";
-import {
-  theme,
-  textVariants,
-  css,
-  rawTheme,
-} from "@webstudio-is/design-system";
+import { textVariants, css, rawTheme } from "@webstudio-is/design-system";
 import {
   decodeDataSourceVariable,
   lintExpression,
@@ -318,50 +313,6 @@ const variables = ViewPlugin.fromClass(
   }
 );
 
-const autocompletionStyle = css({
-  "&.cm-tooltip.cm-tooltip-autocomplete": {
-    ...textVariants.mono,
-    border: "none",
-    backgroundColor: "transparent",
-    // override none set on body by radix popover
-    pointerEvents: "auto",
-    "& ul": {
-      minWidth: 160,
-      maxWidth: 260,
-      width: "max-content",
-      boxSizing: "border-box",
-      borderRadius: theme.borderRadius[6],
-      backgroundColor: theme.colors.backgroundMenu,
-      border: `1px solid ${theme.colors.borderMain}`,
-      boxShadow: `${theme.shadows.menuDropShadow}, inset 0 0 0 1px ${theme.colors.borderMenuInner}`,
-      padding: theme.spacing[3],
-      "& li": {
-        ...textVariants.labelsTitleCase,
-        textTransform: "none",
-        position: "relative",
-        display: "flex",
-        alignItems: "center",
-        color: theme.colors.foregroundMain,
-        padding: theme.spacing[3],
-        borderRadius: theme.borderRadius[3],
-        "&[aria-selected], &:hover": {
-          color: theme.colors.foregroundMain,
-          backgroundColor: theme.colors.backgroundItemMenuItemHover,
-        },
-        "& .cm-completionLabel": {
-          flexGrow: 1,
-        },
-        "& .cm-completionDetail": {
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          fontStyle: "normal",
-          color: theme.colors.hint,
-        },
-      },
-    },
-  },
-});
-
 const emptyScope: Scope = {};
 const emptyAliases: Aliases = new Map();
 
@@ -511,7 +462,6 @@ export const ExpressionEditor = ({
       autocompletion({
         override: [scopeCompletionSource],
         icons: false,
-        tooltipClass: () => autocompletionStyle.toString(),
       }),
       variables,
       keymap.of([...closeBracketsKeymap, ...completionKeymap]),
diff --git a/apps/builder/package.json b/apps/builder/package.json
index 1774f8ec13d9..d4b0e58a3395 100644
--- a/apps/builder/package.json
+++ b/apps/builder/package.json
@@ -20,6 +20,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@codemirror/autocomplete": "^6.18.1",
     "@codemirror/commands": "^6.7.0",
+    "@codemirror/lang-css": "^6.3.0",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-markdown": "^6.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a1a98b071e7..d94a66bf5125 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -133,6 +133,9 @@ importers:
       '@codemirror/commands':
         specifier: ^6.7.0
         version: 6.7.0
+      '@codemirror/lang-css':
+        specifier: ^6.3.0
+        version: 6.3.0(@codemirror/view@6.34.1)
       '@codemirror/lang-html':
         specifier: ^6.4.9
         version: 6.4.9
@@ -2691,8 +2694,8 @@ packages:
   '@codemirror/commands@6.7.0':
     resolution: {integrity: sha512-+cduIZ2KbesDhbykV02K25A5xIVrquSPz4UxxYBemRlAT2aW8dhwUgLDwej7q/RJUHKk4nALYcR1puecDvbdqw==}
 
-  '@codemirror/lang-css@6.2.1':
-    resolution: {integrity: sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==}
+  '@codemirror/lang-css@6.3.0':
+    resolution: {integrity: sha512-CyR4rUNG9OYcXDZwMPvJdtb6PHbBDKUc/6Na2BIwZ6dKab1JQqKa4di+RNRY9Myn7JB81vayKwJeQ7jEdmNVDA==}
 
   '@codemirror/lang-html@6.4.9':
     resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}
@@ -3849,23 +3852,23 @@ packages:
   '@lezer/common@1.2.2':
     resolution: {integrity: sha512-Z+R3hN6kXbgBWAuejUNPihylAL1Z5CaFqnIe0nTX8Ej+XlIy3EGtXxn6WtLMO+os2hRkQvm2yvaGMYliUzlJaw==}
 
-  '@lezer/css@1.1.4':
-    resolution: {integrity: sha512-CuUwjidrU7FOBokqASRJc72SmJ9g1PsHXDOWMoKg4md6+2u/Zxzwx5YsYrAFxRDsLrjLlsIyEF1rZHK3gFEJbw==}
+  '@lezer/css@1.1.9':
+    resolution: {integrity: sha512-TYwgljcDv+YrV0MZFFvYFQHCfGgbPMR6nuqLabBdmZoFH3EP1gvw8t0vae326Ne3PszQkbXfVBjCnf3ZVCr0bA==}
 
   '@lezer/highlight@1.2.1':
     resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
 
-  '@lezer/html@1.3.7':
-    resolution: {integrity: sha512-Wo+rZ5UjLP0VqUTyXjzgmTYRW5bvTJUFn4Uw0K3HCQjX2/+f+zRo9GLN5BCAojwHQISPvaQk8BWSv2SSKx/UcQ==}
+  '@lezer/html@1.3.10':
+    resolution: {integrity: sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==}
 
-  '@lezer/javascript@1.4.10':
-    resolution: {integrity: sha512-XJu3fZjHVVjJcRS7kHdwBO50irXc4H8rQwgm6SmT3Y8IHWk7WzpaLsaR2vdr/jSk/J4pQhXc1WLul7jVdxC+0Q==}
+  '@lezer/javascript@1.4.19':
+    resolution: {integrity: sha512-j44kbR1QL26l6dMunZ1uhKBFteVGLVCBGNUD2sUaMnic+rbTviVuoK0CD1l9FTW31EueWvFFswCKMH7Z+M3JRA==}
 
-  '@lezer/lr@1.3.14':
-    resolution: {integrity: sha512-z5mY4LStlA3yL7aHT/rqgG614cfcvklS+8oFRFBYrs4YaWLJyKKM4+nN6KopToX0o9Hj6zmH6M5kinOYuy06ug==}
+  '@lezer/lr@1.4.2':
+    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
 
-  '@lezer/markdown@1.3.0':
-    resolution: {integrity: sha512-ErbEQ15eowmJUyT095e9NJc3BI9yZ894fjSDtHftD0InkfUBGgnKSU6dvan9jqsZuNHg2+ag/1oyDRxNsENupQ==}
+  '@lezer/markdown@1.3.1':
+    resolution: {integrity: sha512-DGlzU/i8DC8k0uz1F+jeePrkATl0jWakauTzftMQOcbaMkHbNSRki/4E2tOzJWsVpoKYhe7iTJ03aepdwVUXUA==}
 
   '@mdx-js/mdx@2.3.0':
     resolution: {integrity: sha512-jLuwRlz8DQfQNiUCJR50Y09CGPq3fLtmtUQfVrj79E0JWu3dvsVcxVIcfhR5h0iXu+/z++zDrYeiJqifRynJkA==}
@@ -8966,8 +8969,8 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
-  style-mod@4.1.0:
-    resolution: {integrity: sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==}
+  style-mod@4.1.2:
+    resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
 
   style-to-object@0.4.1:
     resolution: {integrity: sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==}
@@ -10325,27 +10328,27 @@ snapshots:
       '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.2
 
-  '@codemirror/lang-css@6.2.1(@codemirror/view@6.34.1)':
+  '@codemirror/lang-css@6.3.0(@codemirror/view@6.34.1)':
     dependencies:
       '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
       '@lezer/common': 1.2.2
-      '@lezer/css': 1.1.4
+      '@lezer/css': 1.1.9
     transitivePeerDependencies:
       - '@codemirror/view'
 
   '@codemirror/lang-html@6.4.9':
     dependencies:
       '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.34.1)
+      '@codemirror/lang-css': 6.3.0(@codemirror/view@6.34.1)
       '@codemirror/lang-javascript': 6.2.2
       '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.2
-      '@lezer/css': 1.1.4
-      '@lezer/html': 1.3.7
+      '@lezer/css': 1.1.9
+      '@lezer/html': 1.3.10
 
   '@codemirror/lang-javascript@6.2.2':
     dependencies:
@@ -10355,7 +10358,7 @@ snapshots:
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.2
-      '@lezer/javascript': 1.4.10
+      '@lezer/javascript': 1.4.19
 
   '@codemirror/lang-markdown@6.3.0':
     dependencies:
@@ -10365,7 +10368,7 @@ snapshots:
       '@codemirror/state': 6.4.1
       '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.2
-      '@lezer/markdown': 1.3.0
+      '@lezer/markdown': 1.3.1
 
   '@codemirror/language@6.10.3':
     dependencies:
@@ -10373,8 +10376,8 @@ snapshots:
       '@codemirror/view': 6.34.1
       '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
-      '@lezer/lr': 1.3.14
-      style-mod: 4.1.0
+      '@lezer/lr': 1.4.2
+      style-mod: 4.1.2
 
   '@codemirror/lint@6.8.2':
     dependencies:
@@ -10387,7 +10390,7 @@ snapshots:
   '@codemirror/view@6.34.1':
     dependencies:
       '@codemirror/state': 6.4.1
-      style-mod: 4.1.0
+      style-mod: 4.1.2
       w3c-keyname: 2.2.8
 
   '@cspotcode/source-map-support@0.8.1':
@@ -11280,31 +11283,33 @@ snapshots:
 
   '@lezer/common@1.2.2': {}
 
-  '@lezer/css@1.1.4':
+  '@lezer/css@1.1.9':
     dependencies:
+      '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
-      '@lezer/lr': 1.3.14
+      '@lezer/lr': 1.4.2
 
   '@lezer/highlight@1.2.1':
     dependencies:
       '@lezer/common': 1.2.2
 
-  '@lezer/html@1.3.7':
+  '@lezer/html@1.3.10':
     dependencies:
       '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
-      '@lezer/lr': 1.3.14
+      '@lezer/lr': 1.4.2
 
-  '@lezer/javascript@1.4.10':
+  '@lezer/javascript@1.4.19':
     dependencies:
+      '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
-      '@lezer/lr': 1.3.14
+      '@lezer/lr': 1.4.2
 
-  '@lezer/lr@1.3.14':
+  '@lezer/lr@1.4.2':
     dependencies:
       '@lezer/common': 1.2.2
 
-  '@lezer/markdown@1.3.0':
+  '@lezer/markdown@1.3.1':
     dependencies:
       '@lezer/common': 1.2.2
       '@lezer/highlight': 1.2.1
@@ -17511,7 +17516,7 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
-  style-mod@4.1.0: {}
+  style-mod@4.1.2: {}
 
   style-to-object@0.4.1:
     dependencies: