From 28f73f2bf5821e037dadd1a11afc488030cec576 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 23 Nov 2017 09:58:42 -0500
Subject: [PATCH] Add support for including `responsive` in variants list

---
 __tests__/variantsAtRule.test.js     | 25 +++++++++++++++++++++++++
 src/lib/substituteVariantsAtRules.js |  6 ++++++
 2 files changed, 31 insertions(+)

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index 2a4636fb4..3dc19ec86 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__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)
+  })
+})
diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
index a47dbc111..fd8c85484 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/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 => {