fix: prevent creating css variable with invalid name (#4319)

Closes #4292

Here instead of validation error I just remove "create" option. It is
consitent with just random invalid name not starting with `--`.



https://github.com/user-attachments/assets/214b71b9-1b88-49de-8eb0-4e815c67486f

Author: TrySound

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx

@@ -1,3 +1,4 @@
+import { lexer } from "css-tree";
 import { colord } from "colord";
 import {
   memo,
@@ -111,10 +112,14 @@ const matchOrSuggestToCreate = (
   if (isFeatureEnabled("cssVars") === false) {
     return matched;
   }
-  if (search.trim().startsWith("--")) {
+  const propertyName = search.trim();
+  if (
+    propertyName.startsWith("--") &&
+    lexer.match("<custom-ident>", propertyName).matched
+  ) {
     matched.unshift({
-      value: search.trim(),
-      label: `Create "${search.trim()}"`,
+      value: propertyName,
+      label: `Create "${propertyName}"`,
     });
   }
   return matched;