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

Author: RobinMalfait

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
 

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]),
     ]),

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