From b544febfcbb27a63b0eae755accc58ef23b5a7c7 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 6 Feb 2019 14:20:03 -0500
Subject: [PATCH] Use root instead of array to unify code paths

---
 __tests__/responsiveAtRule.test.js     |  2 +-
 src/lib/substituteResponsiveAtRules.js | 31 +++++---------------------
 2 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/__tests__/responsiveAtRule.test.js b/__tests__/responsiveAtRule.test.js
index da9a411d1..42babf4bf 100644
--- a/__tests__/responsiveAtRule.test.js
+++ b/__tests__/responsiveAtRule.test.js
@@ -233,7 +233,7 @@ test('it can generate responsive variants for nested at-rules', () => {
   })
 })
 
-test.only('it can generate responsive variants for deeply nested at-rules', () => {
+test('it can generate responsive variants for deeply nested at-rules', () => {
   const input = `
     @responsive {
       .banana { color: yellow; }
diff --git a/src/lib/substituteResponsiveAtRules.js b/src/lib/substituteResponsiveAtRules.js
index ca04fa92a..71c352410 100644
--- a/src/lib/substituteResponsiveAtRules.js
+++ b/src/lib/substituteResponsiveAtRules.js
@@ -8,12 +8,12 @@ export default function(config) {
   return function(css) {
     const screens = config.screens
     const separator = config.options.separator
-    const responsiveRules = []
+    const responsiveRules = postcss.root()
     let finalRules = []
 
     css.walkAtRules('responsive', atRule => {
       const nodes = atRule.nodes
-      responsiveRules.push(...cloneNodes(nodes))
+      responsiveRules.append(...cloneNodes(nodes))
       atRule.before(nodes)
       atRule.remove()
     })
@@ -24,34 +24,15 @@ export default function(config) {
         params: buildMediaQuery(screens[screen]),
       })
 
-      mediaQuery.append(
-        // Filter out nested `atRules`; we'll process those separately
-        responsiveRules.filter(rule => rule.type !== 'atrule').map(rule => {
-          const cloned = rule.clone()
-          cloned.selectors = _.map(rule.selectors, selector =>
+      mediaQuery.append(_.tap(responsiveRules.clone(), clonedRoot => {
+        clonedRoot.walkRules(rule => {
+          rule.selectors = _.map(rule.selectors, selector =>
             buildSelectorVariant(selector, screen, separator, message => {
               throw rule.error(message)
             })
           )
-          return cloned
         })
-      )
-
-      mediaQuery.append(
-        // Process nested `atRules`.
-        responsiveRules.filter(rule => rule.type === 'atrule').map(atRule => {
-          const clonedAtRule = atRule.clone()
-          clonedAtRule.nodes.forEach(rule => {
-            rule.selectors = _.map(rule.selectors, selector => {
-              const selectorVariant = buildSelectorVariant(selector, screen, separator, message => {
-                throw rule.error(message)
-              })
-              return selectorVariant
-            })
-          })
-          return clonedAtRule
-        })
-      )
+      }))
 
       finalRules.push(mediaQuery)
     })