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 + [ + '
', + [ + 'bg-blue-300', + 'group-[[data-can-play]:not([data-playing])]/parent:bg-red-300', + 'p-4', + 'w-60', + ], + ], + // Without group name modifier + [ + '
', + ['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) + } + }) }) })