[0.3] Add parent-hover variant (tailwindlabs#251)

* Add parent-hover variant

* Don't enable parent-hover on textColors module by default

* Add tests, move parent-hover declarations to separate rules

* Prettier-ignore long selector string

Author: adamwathan

__tests__/variantsAtRule.test.js

@@ -50,6 +50,27 @@ test('it can generate focus variants', () => {
   })
 })
 
+test('it can generate parent-hover variants', () => {
+  const input = `
+    @variants parent-hover {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .parent:hover .parent-hover${separator}banana { color: yellow; }
+      .parent:hover .parent-hover${separator}chocolate { 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 {

src/lib/substituteVariantsAtRules.js

@@ -18,6 +18,16 @@ const variantGenerators = {
       rule.selector = `.focus${config.options.separator}${rule.selector.slice(1)}:focus`
     })
 
+    container.before(cloned.nodes)
+  },
+  'parent-hover': (container, config) => {
+    const cloned = container.clone()
+
+    cloned.walkRules(rule => {
+      // prettier-ignore
+      rule.selector = `.parent:hover .parent-hover${config.options.separator}${rule.selector.slice(1)}`
+    })
+
     container.before(cloned.nodes)
   },
 }
@@ -37,7 +47,7 @@ export default function(config) {
 
       atRule.before(atRule.clone().nodes)
 
-      _.forEach(['focus', 'hover'], variant => {
+      _.forEach(['focus', 'hover', 'parent-hover'], variant => {
         if (variants.includes(variant)) {
           variantGenerators[variant](atRule, unwrappedConfig)
         }