Add support for including responsive in variants list

__tests__/variantsAtRule.test.js

@@ -69,3 +69,28 @@ test('it can generate hover and focus variants', () => {
     expect(result.warnings().length).toBe(0)
   })
 })
+
+test('it wraps the output in a responsive at-rule if responsive is included as a variant', () => {
+  const input = `
+    @variants responsive, hover, focus {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+    @responsive {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
+      .hover\\:banana:hover { color: yellow; }
+      .hover\\:chocolate:hover { color: brown; }
+    }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})

src/lib/substituteVariantsAtRules.js

@@ -27,6 +27,12 @@ export default function() {
     css.walkAtRules('variants', atRule => {
       const variants = postcss.list.comma(atRule.params)
 
+      if (variants.includes('responsive')) {
+        const responsiveParent = postcss.atRule({ name: 'responsive' })
+        atRule.before(responsiveParent)
+        responsiveParent.append(atRule)
+      }
+
       atRule.before(atRule.clone().nodes)
 
       _.forEach(['focus', 'hover'], variant => {