From fa9be73c159494011c679c0aa414f29baf194eb6 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 11 Oct 2023 16:38:30 +0200
Subject: [PATCH] Ensure variants with arbitrary values and a modifier are
 correctly matched in the RegEx based parser (#12179)

* add failing test

* ensure variants can have modifiers in regex

* update changelog
---
 CHANGELOG.md                          |  1 +
 src/lib/defaultExtractor.js           |  6 ++++++
 tests/parse-candidate-strings.test.js | 24 ++++++++++++++++++++++++
 3 files changed, 31 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2b0328ae0e2..367202c89af7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Eliminate irrelevant rules when applying variants ([#12113](https://github.com/tailwindlabs/tailwindcss/pull/12113))
 - Improve RegEx parser, reduce possibilities as the key for arbitrary properties ([#12121](https://github.com/tailwindlabs/tailwindcss/pull/12121))
 - Fix sorting of utilities that share multiple candidates ([#12173](https://github.com/tailwindlabs/tailwindcss/pull/12173))
+- Ensure variants with arbitrary values and a modifier are correctly matched in the RegEx based parser ([#12179](https://github.com/tailwindlabs/tailwindcss/pull/12179))
 
 ### Added
 
diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
index 282cc38bc7d0..0751c1acba7e 100644
--- a/src/lib/defaultExtractor.js
+++ b/src/lib/defaultExtractor.js
@@ -80,12 +80,18 @@ function* buildRegExps(context) {
       // This is here to provide special support for the `@` variant
       regex.pattern([/@\[[^\s"'`]+\](\/[^\s"'`]+)?/, separator]),
 
+      // With variant modifier (e.g.: group-[..]/modifier)
+      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]\/\w+/, separator]),
+
       regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/, separator]),
       regex.pattern([/[^\s"'`\[\\]+/, separator]),
     ]),
 
     // With quotes allowed
     regex.any([
+      // With variant modifier (e.g.: group-[..]/modifier)
+      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s`]+\]\/\w+/, separator]),
+
       regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s`]+\]/, separator]),
       regex.pattern([/[^\s`\[\\]+/, separator]),
     ]),
diff --git a/tests/parse-candidate-strings.test.js b/tests/parse-candidate-strings.test.js
index cc0b1002de1f..5a9f00c3e5bb 100644
--- a/tests/parse-candidate-strings.test.js
+++ b/tests/parse-candidate-strings.test.js
@@ -458,5 +458,29 @@ describe.each([
       expect(extractions).toContain('p-2')
       expect(extractions).toContain('p-2.5')
     })
+
+    it.each([
+      // With group name modifier
+      [
+        '<div class="bg-blue-300 group-[[data-can-play]:not([data-playing])]/parent:bg-red-300 p-4 w-60" ></div>',
+        [
+          'bg-blue-300',
+          'group-[[data-can-play]:not([data-playing])]/parent:bg-red-300',
+          'p-4',
+          'w-60',
+        ],
+      ],
+      // Without group name modifier
+      [
+        '<div class="bg-blue-300 group-[[data-can-play]:not([data-playing])]:bg-red-300 p-4 w-60">',
+        ['bg-blue-300', 'group-[[data-can-play]:not([data-playing])]:bg-red-300', 'p-4', 'w-60'],
+      ],
+    ])('should work for issue #12169 (%#)', async (content, expectations) => {
+      let extractions = parse(content)
+
+      for (let value of expectations) {
+        expect(extractions).toContain(value)
+      }
+    })
   })
 })