Ensure complex variants with multiple classes work

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Ensure complex variants with multiple classes work [#6311](https://github.com/tailwindlabs/tailwindcss/pull/6311)
 
 ## [3.0.0] - 2021-12-09
 

src/lib/expandApplyAtRules.js

@@ -129,10 +129,10 @@ function processApply(root, context) {
     // TODO: Should we use postcss-selector-parser for this instead?
     function replaceSelector(selector, utilitySelectors, candidate) {
       let needle = `.${escapeClassName(candidate)}`
-      let utilitySelectorsList = utilitySelectors.split(/\s*,\s*/g)
+      let utilitySelectorsList = utilitySelectors.split(/\s*\,(?![^(]*\))\s*/g)
 
       return selector
-        .split(/\s*,\s*/g)
+        .split(/\s*\,(?![^(]*\))\s*/g)
         .map((s) => {
           let replaced = []
 

tests/variants.test.js

@@ -167,6 +167,44 @@ describe('custom advanced variants', () => {
       `)
     })
   })
+
+  test('using multiple classNames in your custom variant', () => {
+    let config = {
+      content: [
+        {
+          raw: html` <div class="my-variant:underline test"></div> `,
+        },
+      ],
+      plugins: [
+        function ({ addVariant }) {
+          addVariant('my-variant', '&:where(.one, .two, .three)')
+        },
+      ],
+    }
+
+    let input = css`
+      @tailwind components;
+      @tailwind utilities;
+
+      @layer components {
+        .test {
+          @apply my-variant:italic;
+        }
+      }
+    `
+
+    return run(input, config).then((result) => {
+      return expect(result.css).toMatchFormattedCss(css`
+        .test:where(.one, .two, .three) {
+          font-style: italic;
+        }
+
+        .my-variant\:underline:where(.one, .two, .three) {
+          text-decoration: underline;
+        }
+      `)
+    })
+  })
 })
 
 test('stacked peer variants', async () => {