Fix nested style have redundant CSS (#9644)

* Fix nested style have redundant `CSS`

* wip

* Update changelog

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

Author: KhooHaoYit

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Escape special characters in resolved content base paths ([#9650](https://github.com/tailwindlabs/tailwindcss/pull/9650))
+- Don't reuse container for array returning variant functions ([#9644](https://github.com/tailwindlabs/tailwindcss/pull/9644))
 
 ## [3.2.1] - 2022-10-21
 

src/lib/generateRules.js

@@ -210,7 +210,7 @@ function applyVariant(variant, matches, context) {
       let container = postcss.root({ nodes: [rule.clone()] })
 
       for (let [variantSort, variantFunction, containerFromArray] of variantFunctionTuples) {
-        let clone = containerFromArray ?? container.clone()
+        let clone = (containerFromArray ?? container).clone()
         let collectedFormats = []
 
         function prepareBackup() {

tests/variants.test.js

@@ -1029,3 +1029,40 @@ test('class inside pseudo-class function :has', () => {
     `)
   })
 })
+
+test('variant functions returning arrays should output correct results when nesting', async () => {
+  let config = {
+    content: [{ raw: html`<div class="test:foo" />` }],
+    corePlugins: { preflight: false },
+    plugins: [
+      function ({ addUtilities, addVariant }) {
+        addVariant('test', () => ['@media (test)'])
+        addUtilities({
+          '.foo': {
+            display: 'grid',
+            '> *': {
+              'grid-column': 'span 2',
+            },
+          },
+        })
+      },
+    ],
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  let result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css`
+    @media (test) {
+      .test\:foo {
+        display: grid;
+      }
+      .test\:foo > * {
+        grid-column: span 2;
+      }
+    }
+  `)
+})