diff --git a/src/lib/utils.js b/src/lib/utils.js index 6eecce9..8fcbf06 100644 --- 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 new file mode 100644 index 0000000..1b3c524 --- /dev/null +++ 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 new file mode 100644 index 0000000..b9e487a --- /dev/null +++ b/tests/11-mutable.test.html @@ -0,0 +1,13 @@ + + + + + + + Title + + + +
+ + diff --git a/tests/11-mutable.test.js b/tests/11-mutable.test.js new file mode 100644 index 0000000..13d4f40 --- /dev/null +++ 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) +})