From 65a58de7c01d4e04226b263e0ca4975f3fb032d9 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Mon, 4 Nov 2024 00:26:34 +0400
Subject: [PATCH] fix: complete css variable properly in code inputs (#4360)

Fixes https://github.com/webstudio-is/webstudio/issues/4357
---
 .../app/builder/features/style-panel/shared/css-fragment.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 5308066e55..0d7cc133a0 100644
--- a/apps/builder/app/builder/features/style-panel/shared/css-fragment.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/css-fragment.tsx
@@ -45,7 +45,7 @@ const scopeCompletionSource: CompletionSource = (context) => {
   const search = word.text;
   const availableVariables = $availableVariables.get();
   const options = availableVariables.map((varValue) => ({
-    label: `--var(${varValue.value})`,
+    label: `var(--${varValue.value})`,
     displayLabel: `--${varValue.value}`,
   }));
   const matches = matchSorter(options, search, {