Remove class prefix in arbitrary variant that is used multiple times (#8992)

* Remove prefix in multi-used arbitrary variant

* Update changelog

Co-authored-by: Jordan Pittman <[email protected]>

Author: wongjn

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Don’t prefix classes within reused arbitrary variants ([#8992](https://github.com/tailwindlabs/tailwindcss/pull/8992))
 
 ## [3.1.7] - 2022-07-29
 

src/lib/generateRules.js

@@ -129,7 +129,6 @@ function applyVariant(variant, matches, context) {
   }
 
   let args
-  let isArbitraryVariant = false
 
   // Find partial arbitrary variants
   if (variant.endsWith(']') && !variant.startsWith('[')) {
@@ -145,8 +144,6 @@ function applyVariant(variant, matches, context) {
       return []
     }
 
-    isArbitraryVariant = true
-
     let fn = parseVariant(selector)
 
     let sort = Array.from(context.variantOrder.values()).pop() << 1n
@@ -303,7 +300,7 @@ function applyVariant(variant, matches, context) {
             ...meta,
             sort: variantSort | meta.sort,
             collectedFormats: (meta.collectedFormats ?? []).concat(collectedFormats),
-            isArbitraryVariant,
+            isArbitraryVariant: isArbitraryValue(variant),
           },
           clone.nodes[0],
         ]

tests/arbitrary-variants.test.js

@@ -566,3 +566,52 @@ test('classes in arbitrary variants should not be prefixed', () => {
     `)
   })
 })
+
+test('classes in the same arbitrary variant should not be prefixed', () => {
+  let config = {
+    prefix: 'tw-',
+    content: [
+      {
+        raw: `
+          <div class="[.foo_&]:tw-text-red-400 [.foo_&]:tw-bg-white">should not be red</div>
+          <div class="foo">
+            <div class="[.foo_&]:tw-text-red-400 [.foo_&]:tw-bg-white">should be red</div>
+          </div>
+          <div class="[&_.foo]:tw-text-red-400 [&_.foo]:tw-bg-white">
+            <div>should not be red</div>
+            <div class="foo">should be red</div>
+          </div>
+        `,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = `
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .foo .\[\.foo_\&\]\:tw-bg-white {
+        --tw-bg-opacity: 1;
+        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+      }
+
+      .foo .\[\.foo_\&\]\:tw-text-red-400 {
+        --tw-text-opacity: 1;
+        color: rgb(248 113 113 / var(--tw-text-opacity));
+      }
+
+      .\[\&_\.foo\]\:tw-bg-white .foo {
+        --tw-bg-opacity: 1;
+        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+      }
+
+      .\[\&_\.foo\]\:tw-text-red-400 .foo {
+        --tw-text-opacity: 1;
+        color: rgb(248 113 113 / var(--tw-text-opacity));
+      }
+    `)
+  })
+})