From 1f57fbfbaf1074b1adb453475d91509dee4e82d7 Mon Sep 17 00:00:00 2001
From: fedeTibaldo <tibaldo125@gmail.com>
Date: Fri, 9 Feb 2018 20:20:24 +0100
Subject: [PATCH] Add tests for active state variant

---
 __tests__/variantsAtRule.test.js     | 35 +++++++++++++++++++++++-----
 src/lib/substituteVariantsAtRules.js |  6 ++++-
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index 2a30529a6..b4d1d9d09 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -27,6 +27,27 @@ test('it can generate hover variants', () => {
   })
 })
 
+test('it can generate active variants', () => {
+  const input = `
+    @variants active {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .active\\:banana:active { color: yellow; }
+      .active\\:chocolate:active { color: brown; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('it can generate focus variants', () => {
   const input = `
     @variants focus {
@@ -69,9 +90,9 @@ test('it can generate group-hover variants', () => {
   })
 })
 
-test('it can generate hover and focus variants', () => {
+test('it can generate hover, active and focus variants', () => {
   const input = `
-    @variants hover, focus {
+    @variants hover, active, focus {
       .banana { color: yellow; }
       .chocolate { color: brown; }
     }
@@ -80,10 +101,12 @@ test('it can generate hover and focus variants', () => {
   const output = `
       .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; }
+      .active\\:banana:active { color: yellow; }
+      .active\\:chocolate:active { color: brown; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
   `
 
   return run(input).then(result => {
@@ -104,10 +127,10 @@ test('it wraps the output in a responsive at-rule if responsive is included as a
     @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; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
     }
   `
 
diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
index 79fc634cc..9df30520b 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/src/lib/substituteVariantsAtRules.js
@@ -16,7 +16,11 @@ const variantGenerators = {
     const cloned = container.clone()
 
     cloned.walkRules(rule => {
-      rule.selector = `${buildClassVariant(rule.selector, 'active', config.options.separator)}:active`
+      rule.selector = `${buildClassVariant(
+        rule.selector,
+        'active',
+        config.options.separator
+      )}:active`
     })
 
     container.before(cloned.nodes)