Merge pull request #119 from tailwindlabs/fix-variant-commas

Re-escape commas when updating classes

src/lib/utils.js

@@ -89,5 +89,6 @@ module.exports = {
   bigSign,
   isPlainObject,
   escapeClassName,
+  escapeCommas,
   nameClass,
 }

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)

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;
+  }
+}

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>