From 3785a9cda664b638b0bdf8e38af4a10d8212660a Mon Sep 17 00:00:00 2001
From: Justin Anastos <justin.anastos@gmail.com>
Date: Tue, 5 Feb 2019 09:39:32 -0500
Subject: [PATCH 1/2] Add test for nested atRules in responsiveAtRule

---
 __tests__/responsiveAtRule.test.js | 108 +++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)

diff --git a/__tests__/responsiveAtRule.test.js b/__tests__/responsiveAtRule.test.js
index c13240a674ad..4b1d4509e694 100644
--- a/__tests__/responsiveAtRule.test.js
+++ b/__tests__/responsiveAtRule.test.js
@@ -6,6 +6,114 @@ function run(input, opts = config) {
   return postcss([plugin(opts)]).process(input, { from: undefined })
 }
 
+test('it can generate responsive variants for nested at rules', () => {
+  const input = `
+    @responsive {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+
+      @supports(display: grid) {
+        .grid\\:banana { color: blue; }
+        .grid\\:chocolate { color: green; }
+      }
+    }
+  `
+
+  const output = `
+    .banana {
+      color: yellow;
+    }
+
+    .chocolate {
+      color: brown;
+    }
+
+    @supports(display: grid) {
+      .grid\\:banana {
+        color: blue;
+      }
+
+      .grid\\:chocolate {
+        color: green;
+      }
+    }
+
+    @media (min-width: 500px) {
+      .sm\\:banana {
+        color: yellow;
+      }
+
+      .sm\\:chocolate {
+        color: brown;
+      }
+
+      @supports(display: grid) {
+        .sm\\:grid\\:banana {
+          color: blue;
+        }
+
+        .sm\\:grid\\:chocolate {
+          color: green;
+        }
+      }
+    }
+
+    @media (min-width: 750px) {
+      .md\\:banana {
+        color: yellow;
+      }
+
+      .md\\:chocolate {
+        color: brown;
+      }
+
+      @supports(display: grid) {
+        .md\\:grid\\:banana {
+          color: blue;
+        }
+
+        .md\\:grid\\:chocolate {
+          color: green;
+        }
+      }
+    }
+
+    @media (min-width: 1000px) {
+      .lg\\:banana {
+        color: yellow;
+      }
+
+      .lg\\:chocolate {
+        color: brown;
+      }
+
+      @supports(display: grid) {
+        .lg\\:grid\\:banana {
+          color: blue;
+        }
+
+        .lg\\:grid\\:chocolate {
+          color: green;
+        }
+      }
+    }
+  `
+
+  return run(input, {
+    screens: {
+      sm: '500px',
+      md: '750px',
+      lg: '1000px',
+    },
+    options: {
+      separator: ':',
+    },
+  }).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('it can generate responsive variants', () => {
   const input = `
     @responsive {

From 40bb6c619d465a2b6fb41cd625f168eedf85dd03 Mon Sep 17 00:00:00 2001
From: Justin Anastos <justin.anastos@gmail.com>
Date: Tue, 5 Feb 2019 09:00:27 -0500
Subject: [PATCH 2/2] Add nested atRule support to substituteResponsiveAtRules

---
 src/lib/substituteResponsiveAtRules.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/lib/substituteResponsiveAtRules.js b/src/lib/substituteResponsiveAtRules.js
index 95762c310379..ca04fa92a90c 100644
--- a/src/lib/substituteResponsiveAtRules.js
+++ b/src/lib/substituteResponsiveAtRules.js
@@ -25,7 +25,8 @@ export default function(config) {
       })
 
       mediaQuery.append(
-        responsiveRules.map(rule => {
+        // 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 =>
             buildSelectorVariant(selector, screen, separator, message => {
@@ -36,6 +37,22 @@ export default function(config) {
         })
       )
 
+      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)
     })