From 8fbda555e5a69e3c1124b8a68d77beaebecfbf33 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Sat, 12 Apr 2025 00:00:12 +0700
Subject: [PATCH] fix: autocomplete properties with invalid values (#5118)

The logic assumed invalid values should become custom properties. Here
replaced that heuristic with property name check.

<img width="294" alt="Screenshot 2025-04-11 at 19 11 54"
src="https://github.com/user-attachments/assets/d2f08fbf-93ab-47c6-a075-3f4d311cc718"
/>
---
 .../css-editor/parse-style-input.test.ts      |  7 ++++++
 .../shared/css-editor/parse-style-input.ts    | 22 ++++++++-----------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/builder/app/builder/shared/css-editor/parse-style-input.test.ts b/apps/builder/app/builder/shared/css-editor/parse-style-input.test.ts
index 8816aef283..7f815c5f6e 100644
--- a/apps/builder/app/builder/shared/css-editor/parse-style-input.test.ts
+++ b/apps/builder/app/builder/shared/css-editor/parse-style-input.test.ts
@@ -87,4 +87,11 @@ describe("parseStyleInput", () => {
       new Map([["color", { type: "keyword", value: "red" }]])
     );
   });
+
+  test("output property with invalid value", () => {
+    const result = parseStyleInput("rotate: z 0;");
+    expect(result).toEqual(
+      new Map([["rotate", { type: "invalid", value: "z 0" }]])
+    );
+  });
 });
diff --git a/apps/builder/app/builder/shared/css-editor/parse-style-input.ts b/apps/builder/app/builder/shared/css-editor/parse-style-input.ts
index 4266fcc4fe..68e193697c 100644
--- a/apps/builder/app/builder/shared/css-editor/parse-style-input.ts
+++ b/apps/builder/app/builder/shared/css-editor/parse-style-input.ts
@@ -43,24 +43,20 @@ const ensureValue = (css: string) => {
  */
 export const parseStyleInput = (css: string): CssStyleMap => {
   css = ensureValue(css);
-
   const styles = parseCss(`selector{${css}}`);
-
   const styleMap: CssStyleMap = new Map();
-
   for (const { property, value } of styles) {
-    // somethingunknown: red; -> --somethingunknown: red;
-    if (
-      // Note: currently in tests it returns unparsed, but in the client it returns invalid,
-      // because we use native APIs when available in parseCss.
-      value.type === "invalid" ||
-      (value.type === "unparsed" && property.startsWith("--") === false)
-    ) {
-      styleMap.set(`--${property}`, value);
-    } else {
-      // @todo This should be returning { type: "guaranteedInvalid" }
+    if (property.startsWith("--")) {
       styleMap.set(property, value);
+      continue;
     }
+    // somethingunknown: red; -> --somethingunknown: red;
+    if (propertiesData[property] === undefined) {
+      styleMap.set(`--${property}`, value);
+      continue;
+    }
+    // @todo This should be returning { type: "guaranteedInvalid" }
+    styleMap.set(property, value);
   }
   return styleMap;
 };