Fix conflics, refactor variant generator

Author: adamwathan

__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 all variants', () => {
+test('it can generate hover, active and focus variants', () => {
   const input = `
-    @variants hover, focus, group-hover {
+    @variants hover, active, group-hover, focus {
       .banana { color: yellow; }
       .chocolate { color: brown; }
     }
@@ -86,6 +107,8 @@ test('it can generate all variants', () => {
       .hover\\:chocolate:hover { color: brown; }
       .focus\\:banana:focus { color: yellow; }
       .focus\\:chocolate:focus { color: brown; }
+      .active\\:banana:active { color: yellow; }
+      .active\\:chocolate:active { color: brown; }
   `
 
   return run(input).then(result => {

defaultConfig.stub.js

@@ -824,7 +824,8 @@ module.exports = {
   | Here is where you control which modules are generated and what variants are
   | generated for each of those modules.
   |
-  | Currently supported variants: 'responsive', 'hover', 'focus', 'group-hover'
+  | Currently supported variants: 'responsive', 'hover', 'active', focus', 
+  | 'group-hover'
   |
   | To disable a module completely, use `false` instead of an array.
   |

src/lib/substituteVariantsAtRules.js

@@ -2,35 +2,35 @@ import _ from 'lodash'
 import postcss from 'postcss'
 import buildClassVariant from '../util/buildClassVariant'
 
-const variantGenerators = {
-  hover: (container, config) => {
-    const cloned = container.clone()
-
-    cloned.walkRules(rule => {
-      rule.selector = `${buildClassVariant(rule.selector, 'hover', config.options.separator)}:hover`
-    })
+function buildPseudoClassVariant(selector, pseudoClass, separator) {
+  return `${buildClassVariant(selector, pseudoClass, separator)}:${pseudoClass}`
+}
 
-    container.before(cloned.nodes)
-  },
-  focus: (container, config) => {
+function generatePseudoClassVariant(pseudoClass) {
+  return (container, config) => {
     const cloned = container.clone()
 
     cloned.walkRules(rule => {
-      rule.selector = `${buildClassVariant(rule.selector, 'focus', config.options.separator)}:focus`
+      rule.selector = buildPseudoClassVariant(rule.selector, pseudoClass, config.options.separator)
     })
 
     container.before(cloned.nodes)
-  },
-  'group-hover': (container, config) => {
+  }
+}
+
+const variantGenerators = {
+  'group-hover': (container, { options: { separator } }) => {
     const cloned = container.clone()
 
     cloned.walkRules(rule => {
-      // prettier-ignore
-      rule.selector = `.group:hover ${buildClassVariant(rule.selector, 'group-hover', config.options.separator)}`
+      rule.selector = `.group:hover ${buildClassVariant(rule.selector, 'group-hover', separator)}`
     })
 
     container.before(cloned.nodes)
   },
+  hover: generatePseudoClassVariant('hover'),
+  focus: generatePseudoClassVariant('focus'),
+  active: generatePseudoClassVariant('active'),
 }
 
 export default function(config) {
@@ -48,7 +48,7 @@ export default function(config) {
 
       atRule.before(atRule.clone().nodes)
 
-      _.forEach(['group-hover', 'hover', 'focus'], variant => {
+      _.forEach(['group-hover', 'hover', 'focus', 'active'], variant => {
         if (variants.includes(variant)) {
           variantGenerators[variant](atRule, unwrappedConfig)
         }