From eeb788661c4ace89a3ec18d5cd690321f7aaea51 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sat, 15 Sep 2018 09:01:30 -0400
Subject: [PATCH] Add test for generating variants for multi-selector rules

---
 __tests__/variantsAtRule.test.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index bc8391c14..726d778ab 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -139,6 +139,31 @@ test('it can generate hover, active and focus variants', () => {
   })
 })
 
+test('it can generate hover, active and focus variants for multiple classes in one rule', () => {
+  const input = `
+    @variants hover, focus, active {
+      .banana, .lemon { color: yellow; }
+      .chocolate, .coconut { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana, .lemon { color: yellow; }
+      .chocolate, .coconut { color: brown; }
+      .hover\\:banana:hover, .hover\\:lemon:hover { color: yellow; }
+      .hover\\:chocolate:hover, .hover\\:coconut:hover { color: brown; }
+      .focus\\:banana:focus, .focus\\:lemon:focus { color: yellow; }
+      .focus\\:chocolate:focus, .focus\\:coconut:focus { color: brown; }
+      .active\\:banana:active, .active\\:lemon:active { color: yellow; }
+      .active\\:chocolate:active, .active\\:coconut:active { color: brown; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    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 {