fix(css-vars): escape symbols in css var (#6396)

* fix(css-vars): escape symbols in css var

* fix(css-vars): add changeset

* fix(css-var): add test

.changeset/tame-cobras-scream.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/styled-system": patch
+---
+
+Escape symbols in css variable to make it works

packages/styled-system/src/create-theme-vars/css-var.ts

@@ -4,21 +4,30 @@ function replaceWhiteSpace(value: string, replaceValue = "-") {
 
 function escape(value: string | number) {
   const valueStr = replaceWhiteSpace(value.toString())
-  if (valueStr.includes("\\.")) return value
+
+  return escapeSymbol(escapeDot(valueStr))
+}
+
+function escapeDot(value: string) {
+  if (value.includes("\\.")) return value
   const isDecimal = !Number.isInteger(parseFloat(value.toString()))
-  return isDecimal ? valueStr.replace(".", `\\.`) : value
+  return isDecimal ? value.replace(".", `\\.`) : value
+}
+
+function escapeSymbol(value: string) {
+  return value.replace(/[!-,/:-@[-^`{-~]/g, "\\$&")
 }
 
 export function addPrefix(value: string, prefix = "") {
-  return [prefix, escape(value)].filter(Boolean).join("-")
+  return [prefix, value].filter(Boolean).join("-")
 }
 
 export function toVarReference(name: string, fallback?: string) {
-  return `var(${escape(name)}${fallback ? `, ${fallback}` : ""})`
+  return `var(${name}${fallback ? `, ${fallback}` : ""})`
 }
 
 export function toVarDefinition(value: string, prefix = "") {
-  return `--${addPrefix(value, prefix)}`
+  return escape(`--${addPrefix(value, prefix)}`)
 }
 
 export function cssVar(name: string, fallback?: string, cssVarPrefix?: string) {

packages/styled-system/tests/css-var.test.ts

@@ -513,3 +513,38 @@ test("should convert semantic tokens", () => {
     }
   `)
 })
+
+test("should escape symbols in css var", () => {
+  const theme = {
+    colors: {
+      $red: "#ec0016",
+    },
+  }
+
+  expect(toCSSVar(theme)).toMatchInlineSnapshot(`
+    Object {
+      "__breakpoints": null,
+      "__cssMap": Object {
+        "colors.$red": Object {
+          "value": "#ec0016",
+          "var": "--colors-\\\\$red",
+          "varRef": "var(--colors-\\\\$red)",
+        },
+      },
+      "__cssVars": Object {
+        "--chakra-ring-color": "rgba(66, 153, 225, 0.6)",
+        "--chakra-ring-inset": "var(--chakra-empty,/*!*/ /*!*/)",
+        "--chakra-ring-offset-color": "#fff",
+        "--chakra-ring-offset-shadow": "0 0 #0000",
+        "--chakra-ring-offset-width": "0px",
+        "--chakra-ring-shadow": "0 0 #0000",
+        "--chakra-space-x-reverse": "0",
+        "--chakra-space-y-reverse": "0",
+        "--colors-\\\\$red": "#ec0016",
+      },
+      "colors": Object {
+        "$red": "#ec0016",
+      },
+    }
+  `)
+})