From 9d298ccf46941467d010fa45cdcbd601f0f95c07 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Wed, 26 Mar 2025 11:46:53 +0000
Subject: [PATCH] fix: Allow creating variables when input starts with dashes
 in advanced style section (#5051)

## Description

We broke this as we introduced a more flexible search to combobox when
you add properties

## Steps for reproduction

1. advanced panel
2. type --x
3. see you can create that variable right away without adding value

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 .../app/builder/shared/css-editor/add-style-input.tsx        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 723ea1c760..7fc86bfd0b 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
@@ -100,7 +100,10 @@ const getAutocompleteItems = () => {
 };
 
 const matchOrSuggestToCreate = (search: string, items: Array<SearchItem>) => {
-  const matched = matchSorter(items, search.replaceAll("-", " "), {
+  const searchWithSpaces = search.startsWith("--")
+    ? search
+    : search.replaceAll("-", " ");
+  const matched = matchSorter(items, searchWithSpaces, {
     keys: ["key"],
   });