From 3f6d31e3ae56dcee53a1f4bdf2ec4530d4e9d3a5 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 15 Jul 2020 17:09:58 -0400
Subject: [PATCH 1/3] Add failing test

---
 __tests__/variantsAtRule.test.js | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index 12f836f9a..25f950d21 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -684,3 +684,32 @@ test('plugin variants can wrap rules in another at-rule using the raw PostCSS AP
     expect(result.warnings().length).toBe(0)
   })
 })
+
+test('nested variants are all applied', () => {
+  const input = `
+    @variants responsive {
+      @variants hover {
+        @variants focus {
+          .banana { color: yellow; }
+          .chocolate { color: brown; }
+        }
+      }
+    }
+  `
+
+  const output = `
+    @responsive {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
+      .hover\\:banana:hover { color: yellow; }
+      .hover\\:chocolate:hover { color: brown; }
+    }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})

From 7dc0261bc645602e4c8d48fd4364b8bbdffb39ed Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 15 Jul 2020 17:28:33 -0400
Subject: [PATCH 2/3] Only wrap with variants if rules don't already contain
 any variants

---
 __tests__/processPlugins.test.js | 27 +++++++++++++++++++++++++++
 src/util/wrapWithVariants.js     | 10 ++++++++++
 2 files changed, 37 insertions(+)

diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js
index ff3bf7d8d..5ceea53e0 100644
--- a/__tests__/processPlugins.test.js
+++ b/__tests__/processPlugins.test.js
@@ -1261,6 +1261,33 @@ test('plugins can use the array shorthand to add variants to components', () =>
   `)
 })
 
+test('components that add variants manually do not add an extra variants wrapper', () => {
+  const { components } = processPlugins(
+    [
+      function({ addComponents }) {
+        addComponents({
+          '@variants responsive': {
+            '.btn-blue': {
+              backgroundColor: 'blue',
+            },
+          },
+        })
+      },
+    ],
+    makeConfig()
+  )
+
+  expect(css(components)).toMatchCss(`
+    @layer components {
+      @variants responsive {
+        .btn-blue {
+          background-color: blue
+        }
+      }
+    }
+  `)
+})
+
 test("component declarations are not affected by the 'important' option", () => {
   const { components } = processPlugins(
     [
diff --git a/src/util/wrapWithVariants.js b/src/util/wrapWithVariants.js
index 4c1fcf9d3..6820a3476 100644
--- a/src/util/wrapWithVariants.js
+++ b/src/util/wrapWithVariants.js
@@ -2,6 +2,16 @@ import postcss from 'postcss'
 import cloneNodes from './cloneNodes'
 
 export default function wrapWithVariants(rules, variants) {
+  let foundVariantAtRule = false
+
+  postcss.root({ nodes: rules }).walkAtRules('variants', () => {
+    foundVariantAtRule = true
+  })
+
+  if (foundVariantAtRule) {
+    return cloneNodes(rules)
+  }
+
   return postcss
     .atRule({
       name: 'variants',

From 79c3f03f31f06143b73e76ac5c4cfeeadf84102b Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 15 Jul 2020 17:29:23 -0400
Subject: [PATCH 3/3] Remove stale test

---
 __tests__/variantsAtRule.test.js | 29 -----------------------------
 1 file changed, 29 deletions(-)

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index 25f950d21..12f836f9a 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -684,32 +684,3 @@ test('plugin variants can wrap rules in another at-rule using the raw PostCSS AP
     expect(result.warnings().length).toBe(0)
   })
 })
-
-test('nested variants are all applied', () => {
-  const input = `
-    @variants responsive {
-      @variants hover {
-        @variants focus {
-          .banana { color: yellow; }
-          .chocolate { color: brown; }
-        }
-      }
-    }
-  `
-
-  const output = `
-    @responsive {
-      .banana { color: yellow; }
-      .chocolate { color: brown; }
-      .focus\\:banana:focus { color: yellow; }
-      .focus\\:chocolate:focus { color: brown; }
-      .hover\\:banana:hover { color: yellow; }
-      .hover\\:chocolate:hover { color: brown; }
-    }
-  `
-
-  return run(input).then(result => {
-    expect(result.css).toMatchCss(output)
-    expect(result.warnings().length).toBe(0)
-  })
-})