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] 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',