From 888c73fa30bd820cfb729aabf88dadf995df1b4f Mon Sep 17 00:00:00 2001
From: Brad Cornes <bradlc41@gmail.com>
Date: Tue, 17 Aug 2021 16:57:14 +0100
Subject: [PATCH] Skip escaped commas when splitting selector

---
 src/util/pluginUtils.js    | 17 ++++++++++++++++-
 tests/jit/prefix.test.css  |  4 ++++
 tests/jit/prefix.test.html |  1 +
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
index 5babd0c36c0d..98cc2e08215a 100644
--- a/src/util/pluginUtils.js
+++ b/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)
diff --git a/tests/jit/prefix.test.css b/tests/jit/prefix.test.css
index 462723d00fe8..269943c5acd1 100644
--- a/tests/jit/prefix.test.css
+++ b/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;
 }
diff --git a/tests/jit/prefix.test.html b/tests/jit/prefix.test.html
index 69be55f076dd..b8936a14cf1c 100644
--- a/tests/jit/prefix.test.html
+++ b/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>