From 0dbc2200d53582bc024b5a52e9c257b98c50291a Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 22 Nov 2017 15:54:25 -0500
Subject: [PATCH] Generate hover variants as separate rules

---
 __tests__/hoverableAtRule.test.js     | 8 +++++---
 src/lib/substituteHoverableAtRules.js | 9 ++++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/__tests__/hoverableAtRule.test.js b/__tests__/hoverableAtRule.test.js
index b52d02ed4..e47c1bda2 100644
--- a/__tests__/hoverableAtRule.test.js
+++ b/__tests__/hoverableAtRule.test.js
@@ -14,12 +14,14 @@ test('it adds a hoverable variant to each nested class definition', () => {
   `
 
   const output = `
-      .banana, .hover\\:banana:hover { color: yellow; }
-      .chocolate, .hover\\:chocolate:hover { color: brown; }
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .hover\\:banana:hover { color: yellow; }
+      .hover\\:chocolate:hover { color: brown; }
   `
 
   return run(input).then(result => {
-    expect(result.css).toEqual(output)
+    expect(result.css).toMatchCss(output)
     expect(result.warnings().length).toBe(0)
   })
 })
diff --git a/src/lib/substituteHoverableAtRules.js b/src/lib/substituteHoverableAtRules.js
index 0fe0d10e6..1dc86a7c3 100644
--- a/src/lib/substituteHoverableAtRules.js
+++ b/src/lib/substituteHoverableAtRules.js
@@ -3,13 +3,16 @@ import cloneNodes from '../util/cloneNodes'
 export default function() {
   return function(css) {
     css.walkAtRules('hoverable', atRule => {
-      atRule.walkRules(rule => {
+      const clonedRule = atRule.clone()
+
+      clonedRule.walkRules(rule => {
         // Might be wise to error if the rule has multiple selectors,
         // or weird compound selectors like .bg-blue>p>h1
-        rule.selectors = [rule.selector, `.hover\\:${rule.selector.slice(1)}:hover`]
+        rule.selector = `.hover\\:${rule.selector.slice(1)}:hover`
       })
 
-      atRule.before(cloneNodes(atRule.nodes))
+      atRule.before(atRule.clone().nodes)
+      atRule.after(clonedRule.nodes)
 
       atRule.remove()
     })