From 80baf4aa17f66936ff1f26b018c888790dd6f1b6 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 11 Jul 2018 19:14:33 -0400
Subject: [PATCH] Pass generated utilities around as array instead of root

When you do something like container.before(someRoot), PostCSS actually *mutates* someRoot, leaving it empty and moving its contents before the container. container.before(arrayOfNodes) on the other hand does no weird mutation.

This PR makes sure generatedUtilities is an array of nodes instead of a PostCSS container to avoid this unexpected mutation. It makes it a bit more work to walk those nodes if they need to be transformed, but I think it's worth the trade-off. Can always write a helper function around that if the boilerplate starts to feel repetitive.
---
 src/lib/substituteClassApplyAtRules.js |  2 +-
 src/lib/substituteTailwindAtRules.js   | 12 ++++++------
 src/processTailwindFeatures.js         |  4 ++--
 src/util/generateUtilities.js          |  8 ++++----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/lib/substituteClassApplyAtRules.js b/src/lib/substituteClassApplyAtRules.js
index 01dfb3c28..6bdfa47ec 100644
--- a/src/lib/substituteClassApplyAtRules.js
+++ b/src/lib/substituteClassApplyAtRules.js
@@ -18,7 +18,7 @@ function buildClassTable(css) {
 function buildShadowTable(generatedUtilities) {
   const utilities = postcss.root()
 
-  generatedUtilities.walkAtRules('variants', atRule => {
+  postcss.root({ nodes: generatedUtilities }).walkAtRules('variants', atRule => {
     utilities.append(atRule.clone().nodes)
   })
 
diff --git a/src/lib/substituteTailwindAtRules.js b/src/lib/substituteTailwindAtRules.js
index 950824a36..fc41fd519 100644
--- a/src/lib/substituteTailwindAtRules.js
+++ b/src/lib/substituteTailwindAtRules.js
@@ -27,13 +27,13 @@ export default function(config, { components: pluginComponents }, generatedUtili
       }
 
       if (atRule.params === 'utilities') {
-        // This needs to be cloned here or utilities end up being empty
-        // in real projects. No idea why, struggling to reproduce in a
-        // test. Hot fixing to publish a patch.
-        const clonedUtilities = generatedUtilities.clone()
+        const utilityTree = postcss.root({
+          nodes: generatedUtilities,
+        })
 
-        clonedUtilities.walk(node => (node.source = atRule.source))
-        atRule.before(clonedUtilities)
+        utilityTree.walk(node => (node.source = atRule.source))
+
+        atRule.before(utilityTree)
         atRule.remove()
       }
     })
diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js
index f67e60603..a231b6714 100644
--- a/src/processTailwindFeatures.js
+++ b/src/processTailwindFeatures.js
@@ -16,11 +16,11 @@ export default function(lazyConfig) {
   const utilities = generateUtilities(config, processedPlugins.utilities)
 
   return postcss([
-    substituteTailwindAtRules(config, processedPlugins, utilities.clone()),
+    substituteTailwindAtRules(config, processedPlugins, utilities),
     evaluateTailwindFunctions(config),
     substituteVariantsAtRules(config, processedPlugins),
     substituteResponsiveAtRules(config),
     substituteScreenAtRules(config),
-    substituteClassApplyAtRules(config, utilities.clone()),
+    substituteClassApplyAtRules(config, utilities),
   ])
 }
diff --git a/src/util/generateUtilities.js b/src/util/generateUtilities.js
index b2843ddc6..d9cdb025a 100644
--- a/src/util/generateUtilities.js
+++ b/src/util/generateUtilities.js
@@ -17,8 +17,8 @@ export default function(config, pluginUtilities) {
 
   prefixTree(tailwindUtilityTree, config.options.prefix)
 
-  return _.tap(postcss.root(), root => {
-    root.append(tailwindUtilityTree.nodes)
-    root.append(pluginUtilities)
-  })
+  return [
+    ...tailwindUtilityTree.nodes,
+    ...pluginUtilities,
+  ]
 }