Merge pull request tailwindlabs#642 from justinanastos/fix/641/resposive-nested-atrules

Adding responsive variants for custom variants with atRules does not work as exepcted

Author: adamwathan

__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 {

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)
     })