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] 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 95762c310..ca04fa92a 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)
     })