From cd763e12c2b13e56d1f32dd1334564bd7c35063a Mon Sep 17 00:00:00 2001
From: Brad Cornes <bradlc41@gmail.com>
Date: Fri, 19 Mar 2021 13:31:10 +0000
Subject: [PATCH] re-escape commas when updating classes (fixes #45)

---
 src/lib/utils.js                    | 1 +
 src/pluginUtils.js                  | 8 +++++++-
 tests/08-arbitrary-values.test.css  | 5 +++++
 tests/08-arbitrary-values.test.html | 1 +
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/lib/utils.js b/src/lib/utils.js
index 10dfe93..0d07913 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -89,5 +89,6 @@ module.exports = {
   bigSign,
   isPlainObject,
   escapeClassName,
+  escapeCommas,
   nameClass,
 }
diff --git a/src/pluginUtils.js b/src/pluginUtils.js
index 417e9d6..4ddc46f 100644
--- a/src/pluginUtils.js
+++ b/src/pluginUtils.js
@@ -1,7 +1,7 @@
 const selectorParser = require('postcss-selector-parser')
 const postcss = require('postcss')
 const { toRgba } = require('tailwindcss/lib/util/withAlphaVariable')
-const { nameClass } = require('./lib/utils')
+const { nameClass, escapeCommas } = require('./lib/utils')
 
 function updateAllClasses(selectors, updateClass) {
   let parser = selectorParser((selectors) => {
@@ -13,6 +13,9 @@ function updateAllClasses(selectors, updateClass) {
         },
       })
       sel.value = updatedClass
+      if (sel.raws && sel.raws.value) {
+        sel.raws.value = escapeCommas(sel.raws.value)
+      }
     })
   })
 
@@ -37,6 +40,9 @@ function updateLastClasses(selectors, updateClass) {
         },
       })
       lastClass.value = updatedClass
+      if (lastClass.raws && lastClass.raws.value) {
+        lastClass.raws.value = escapeCommas(lastClass.raws.value)
+      }
     })
   })
   let result = parser.processSync(selectors)
diff --git a/tests/08-arbitrary-values.test.css b/tests/08-arbitrary-values.test.css
index 29f73b4..1906465 100644
--- a/tests/08-arbitrary-values.test.css
+++ b/tests/08-arbitrary-values.test.css
@@ -79,3 +79,8 @@
 .duration-\[2s\] {
   transition-duration: 2s;
 }
+@media (min-width: 1024px) {
+  .lg\:grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
+    grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
+  }
+}
diff --git a/tests/08-arbitrary-values.test.html b/tests/08-arbitrary-values.test.html
index f414c70..3f39b53 100644
--- a/tests/08-arbitrary-values.test.html
+++ b/tests/08-arbitrary-values.test.html
@@ -19,6 +19,7 @@
     <div class="space-x-[20cm]"></div>
     <div class="space-x-[calc(20%-1cm)]"></div>
     <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
+    <div class="lg:grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
     <div class="rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]"></div>
     <div class="text-[2.23rem]"></div>
     <div class="duration-[2s]"></div>