Working on @variants at-rule

Currently supports focus and hover, need to add responsive which will be a whole horrible can of worms.

Author: adamwathan

__tests__/variantsAtRule.test.js

@@ -0,0 +1,71 @@
+import postcss from 'postcss'
+import plugin from '../src/lib/substituteVariantsAtRules'
+
+function run(input, opts = () => {}) {
+  return postcss([plugin(opts)]).process(input)
+}
+
+test('it can generate hover variants', () => {
+  const input = `
+    @variants hover {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { 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)
+  })
+})
+
+test('it can generate focus variants', () => {
+  const input = `
+    @variants focus {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
+test('it can generate hover and focus variants', () => {
+  const input = `
+    @variants hover, focus {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  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; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})

src/lib/substituteVariantsAtRules.js

@@ -0,0 +1,41 @@
+import _ from 'lodash'
+import postcss from 'postcss'
+
+const variantGenerators = {
+  hover: (rule) => {
+    const clonedRule = rule.clone()
+
+    clonedRule.walkRules(rule => {
+      rule.selector = `.hover\\:${rule.selector.slice(1)}:hover`
+    })
+
+    return clonedRule.nodes
+  },
+  focus: (rule) => {
+    const clonedRule = rule.clone()
+
+    clonedRule.walkRules(rule => {
+      rule.selector = `.focus\\:${rule.selector.slice(1)}:focus`
+    })
+
+    return clonedRule.nodes
+  },
+}
+
+export default function() {
+  return function(css) {
+    css.walkAtRules('variants', atRule => {
+      const variants = postcss.list.comma(atRule.params)
+
+      atRule.before(atRule.clone().nodes)
+
+      _.forEach(['focus', 'hover'], (variant) => {
+        if (variants.includes(variant)) {
+          atRule.before(variantGenerators[variant](atRule))
+        }
+      })
+
+      atRule.remove()
+    })
+  }
+}