Clone nodes to prevent css-loader from mutating the rule cache

We have a rule cache that we reuse — in contrast to normal tailwind which generates fresh rules every run. This is fine when rules are treated as immutable objects. However, aditional postcss plugins may not honor this contract.

For example, if you use css-loader and have url rewriting turned on (and it is by default) then css-loader will mutate the rules it gets from postcss-loader as it has the ability to use the postcss AST directly. This saves on memory but in our case causes an issue because these rule objects point directly to our cache.

Here we combat this by cloning the rules that go directly into the root node.

Author: thecrypticace

src/lib/expandTailwindAtRules.js

@@ -2,7 +2,7 @@ const fs = require('fs')
 const fastGlob = require('fast-glob')
 const sharedState = require('./sharedState')
 const { generateRules } = require('./generateRules')
-const { bigSign } = require('./utils')
+const { bigSign, cloneNodes } = require('./utils')
 
 let env = sharedState.env
 let contentMatchCache = sharedState.contentMatchCache
@@ -179,25 +179,25 @@ function expandTailwindAtRules(context, registerDependency) {
     // Replace any Tailwind directives with generated CSS
 
     if (layerNodes.base) {
-      layerNodes.base.before([...baseNodes])
+      layerNodes.base.before(cloneNodes([...baseNodes]))
       layerNodes.base.remove()
     }
 
     if (layerNodes.components) {
-      layerNodes.components.before([...componentNodes])
+      layerNodes.components.before(cloneNodes([...componentNodes]))
       layerNodes.components.remove()
     }
 
     if (layerNodes.utilities) {
-      layerNodes.utilities.before([...utilityNodes])
+      layerNodes.utilities.before(cloneNodes([...utilityNodes]))
       layerNodes.utilities.remove()
     }
 
     if (layerNodes.screens) {
-      layerNodes.screens.before([...screenNodes])
+      layerNodes.screens.before(cloneNodes([...screenNodes]))
       layerNodes.screens.remove()
     } else {
-      root.append([...screenNodes])
+      root.append(cloneNodes([...screenNodes]))
     }
 
     // ---

src/lib/utils.js

@@ -84,11 +84,24 @@ function nameClass(...args) {
   return escapeCommas(tailwindUtils.nameClass(...args))
 }
 
+/**
+ * Clone generated and/or cached nodes to ensure no future
+ * postcss plugins can mutate the rules and mess up our cache
+ *
+ * NOTE: Only clone the nodes you pass to root.append()
+ *
+ * @param {import('postcss').Node[]} nodes
+ * */
+function cloneNodes(nodes) {
+  return nodes.map(node => node.clone())
+}
+
 module.exports = {
   toPostCssNode,
   bigSign,
   isPlainObject,
   escapeClassName,
   escapeCommas,
   nameClass,
+  cloneNodes,
 }