Skip escaped commas when splitting selector (tailwindlabs#5239)

Author: bradlc

src/util/pluginUtils.js

@@ -70,13 +70,28 @@ export function updateLastClasses(selectors, updateClass) {
   return result
 }
 
+function splitByNotEscapedCommas(str) {
+  let chunks = []
+  let currentChunk = ''
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === ',' && str[i - 1] !== '\\') {
+      chunks.push(currentChunk)
+      currentChunk = ''
+    } else {
+      currentChunk += str[i]
+    }
+  }
+  chunks.push(currentChunk)
+  return chunks
+}
+
 export function transformAllSelectors(transformSelector, { wrap, withRule } = {}) {
   return ({ container }) => {
     container.walkRules((rule) => {
       if (isKeyframeRule(rule)) {
         return rule
       }
-      let transformed = rule.selector.split(',').map(transformSelector).join(',')
+      let transformed = splitByNotEscapedCommas(rule.selector).map(transformSelector).join(',')
       rule.selector = transformed
       if (withRule) {
         withRule(rule)

tests/jit/prefix.test.css

@@ -72,6 +72,10 @@
     text-align: center;
   }
 }
+.tw-dark .dark\:tw-bg-\[rgb\(255\2c 0\2c 0\)\] {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 0, 0, var(--tw-bg-opacity));
+}
 .tw-dark .dark\:focus\:tw-text-left:focus {
   text-align: left;
 }

tests/jit/prefix.test.html

@@ -13,6 +13,7 @@
 <div class="md:hover:tw-text-right"></div>
 <div class="motion-safe:hover:tw-text-center"></div>
 <div class="dark:focus:tw-text-left"></div>
+<div class="dark:tw-bg-[rgb(255,0,0)]"></div>
 <div class="group-hover:focus-within:tw-text-left"></div>
 <div class="rtl:active:tw-text-center"></div>
 <div class="tw-animate-ping"></div>