From d88fd1e6e7b988cac452ab5bdc640fbaadb3ec68 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 15 Jun 2023 09:25:24 -0400
Subject: [PATCH] Do proper CSS unescaping for variables

---
 src/lib/parseCssConfig.js       | 16 +++++++++++++++-
 tests/css-configuration.test.js |  7 +++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/lib/parseCssConfig.js b/src/lib/parseCssConfig.js
index 81c737e7d..fbef1387d 100644
--- a/src/lib/parseCssConfig.js
+++ b/src/lib/parseCssConfig.js
@@ -128,7 +128,7 @@ export class CssBasedConfig {
   parseVariableName(name) {
     // Unescape the name if needed
     // This is needed for CSS variables that contain special characters
-    name = name.replace(/\\/g, '')
+    name = unescape(name)
 
     for (const [prefix, plugin] of Object.entries(this.prefixPluginMap)) {
       if (!name.startsWith(prefix)) continue
@@ -188,3 +188,17 @@ export class CssBasedConfig {
 function camelize(str) {
   return str.replace(/-([a-zA-Z])/g, (v) => v.slice(1).toUpperCase())
 }
+
+/**
+ * @param {string} str
+ * @returns {string}
+ */
+function unescape(str) {
+  let pattern = /\\([0-9a-fA-F]{1,6}[\t\n\f\r ]?|[\S\s])/g
+
+  return str.replace(pattern, (match) =>
+    match.length > 2
+      ? String.fromCodePoint(parseInt(match.slice(1).trimEnd(), 16))
+      : match[1]
+  )
+}
diff --git a/tests/css-configuration.test.js b/tests/css-configuration.test.js
index 64d452bf7..76803bdc8 100644
--- a/tests/css-configuration.test.js
+++ b/tests/css-configuration.test.js
@@ -23,6 +23,7 @@ test('it does something', () => {
           <div class="px-1/4"></div>
           <div class="px-1/2"></div>
           <div class="px-3/4"></div>
+          <div class="px-2xl"></div>
           <div class="shadow"></div>
           <div class="animate-flash"></div>
         `,
@@ -51,6 +52,7 @@ test('it does something', () => {
         --spacing-1\/4: 25%;
         --spacing-1\/2: 50%;
         --spacing-3\/4: 75%;
+        --spacing-\32 xl: 20rem;
 
         --shadow--default: 0 3px 5px -2px hsl(220 3% 15% / 4%), 0 7px 14px -5px hsl(220
                 3% 15% / 6%);
@@ -72,6 +74,10 @@ test('it does something', () => {
         padding-left: 25%;
         padding-right: 25%;
       }
+      .px-2xl {
+        padding-left: 20rem;
+        padding-right: 20rem;
+      }
       .px-3\/4 {
         padding-left: 75%;
         padding-right: 75%;
@@ -122,6 +128,7 @@ test('it does something', () => {
         --spacing-1\/4: 25%;
         --spacing-1\/2: 50%;
         --spacing-3\/4: 75%;
+        --spacing-2xl: 20rem;
         --shadow--default: 0 3px 5px -2px #2526270a, 0 7px 14px -5px #2526270f;
         --animation-flash: flash 1s;
       }