Add test for mutable state interactions (#142)

thecrypticace · web-flow · commit 3c8284dc7184 · 2021-03-22T19:52:29.000-04:00
diff --git a/src/lib/utils.js b/src/lib/utils.js
@@ -88,8 +88,6 @@ function 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) {
diff --git a/tests/11-mutable.test.css b/tests/11-mutable.test.css
@@ -0,0 +1,3 @@
+.bg-foo {
+  background-image: url("./foo.png");
+}
diff --git a/tests/11-mutable.test.html b/tests/11-mutable.test.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+    <link rel="stylesheet" href="./tailwind.css" />
+  </head>
+  <body>
+    <div class="bg-foo"></div>
+  </body>
+</html>
diff --git a/tests/11-mutable.test.js b/tests/11-mutable.test.js
@@ -0,0 +1,53 @@
+const postcss = require('postcss')
+const tailwind = require('../src/index.js')
+const fs = require('fs')
+const path = require('path')
+
+function pluginThatMutatesRules() {
+  return (root) => {
+    root.walkRules((rule) => {
+      rule.nodes.filter(node => node.prop === 'background-image').forEach(node => {
+        node.value = 'url("./bar.png")'
+      })
+
+      return rule
+    })
+  }
+}
+
+function run(input, config = {}) {
+  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+}
+
+test.only('plugins mutating rules after tailwind doesnt break it', async () => {
+  let config = {
+    purge: [path.resolve(__dirname, './11-mutable.test.html')],
+    theme: {
+      backgroundImage: {
+        'foo': 'url("./foo.png")',
+      }
+    },
+    plugins: [],
+  }
+
+  let css = `@tailwind utilities;`
+
+  function checkResult(result) {
+    let expectedPath = path.resolve(__dirname, './11-mutable.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchCss(expected)
+  }
+
+  // Verify the first run produces the expected result
+  let firstRun = await run(css, config)
+  checkResult(firstRun)
+
+  // Outside of the context of tailwind jit more postcss plugins may operate on the AST:
+  // In this case we have a plugin that mutates rules directly
+  await postcss([ pluginThatMutatesRules() ]).process(firstRun, { from: path.resolve(__filename) })
+
+  // Verify subsequent runs don't produce mutated rules
+  let secondRun = await run(css, config)
+  checkResult(secondRun)
+})

Original file line number	Diff line number	Diff line change
`@@ -88,8 +88,6 @@ function nameClass(...args) {`
`88`	`88`	`* Clone generated and/or cached nodes to ensure no future`
`89`	`89`	`* postcss plugins can mutate the rules and mess up our cache`
`90`	`90`	`*`
`91`		`- * NOTE: Only clone the nodes you pass to root.append()`
`92`		`- *`
`93`	`91`	`* @param {import('postcss').Node[]} nodes`
`94`	`92`	`* */`
`95`	`93`	`function cloneNodes(nodes) {`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.bg-foo {`
	`2`	`+ background-image: url("./foo.png");`
	`3`	`+}`