From 9d05910507dda8d7477dfe0c2d503b4ddb580125 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 22 Jun 2018 10:35:47 -0400
Subject: [PATCH] Generate variants based on the order specified in the modules
 config

---
 __tests__/variantsAtRule.test.js     | 27 ++++++++++++++++++++++++++-
 src/lib/substituteVariantsAtRules.js |  8 +++-----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index 51a462a72..43f9899e6 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -92,7 +92,7 @@ test('it can generate group-hover variants', () => {
 
 test('it can generate hover, active and focus variants', () => {
   const input = `
-    @variants hover, active, group-hover, focus {
+    @variants group-hover, hover, focus, active {
       .banana { color: yellow; }
       .chocolate { color: brown; }
     }
@@ -141,3 +141,28 @@ test('it wraps the output in a responsive at-rule if responsive is included as a
     expect(result.warnings().length).toBe(0)
   })
 })
+
+test('variants are generated in the order specified', () => {
+  const input = `
+    @variants focus, active, hover {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
+      .active\\:banana:active { color: yellow; }
+      .active\\:chocolate:active { 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 5ddaa8ea5..67e1e4595 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/src/lib/substituteVariantsAtRules.js
@@ -42,7 +42,7 @@ export default function(config) {
     const unwrappedConfig = config()
 
     css.walkAtRules('variants', atRule => {
-      const variants = postcss.list.comma(atRule.params)
+      const variants = postcss.list.comma(atRule.params).filter(variant => variant !== '')
 
       if (variants.includes('responsive')) {
         const responsiveParent = postcss.atRule({ name: 'responsive' })
@@ -52,10 +52,8 @@ export default function(config) {
 
       atRule.before(atRule.clone().nodes)
 
-      _.forEach(['group-hover', 'hover', 'focus', 'active'], variant => {
-        if (variants.includes(variant)) {
-          variantGenerators[variant](atRule, unwrappedConfig)
-        }
+      _.forEach(_.without(variants, 'responsive'), variant => {
+        variantGenerators[variant](atRule, unwrappedConfig)
       })
 
       atRule.remove()