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.

Author: adamwathan

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)
   })
 

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,
+        })
+
+        utilityTree.walk(node => (node.source = atRule.source))
 
-        clonedUtilities.walk(node => (node.source = atRule.source))
-        atRule.before(clonedUtilities)
+        atRule.before(utilityTree)
         atRule.remove()
       }
     })

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),
   ])
 }

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,
+  ]
 }