tailwindcss/tests/mutable.test.js
Robin Malfait 1454190ea0
inline tests (#10362)
This will reduce the amount of different test "implementations" and
should further unify/normalise the tests. Some tests are very large and
can be split up more but this is a start in the right direction.

One of the biggest benefits is that changes in the tests file re-trigger
a jest run in watch mode. A change in the HTML/CSS file won't.
2023-01-19 11:42:52 +01:00

53 lines
1.3 KiB
JavaScript

import path from 'path'
import postcss from 'postcss'
import { run, html, css } from './util/run'
function pluginThatMutatesRules() {
return (root) => {
root.walkRules((rule) => {
rule.nodes
.filter((node) => node.prop === 'background-image')
.forEach((node) => {
node.value = 'url("./bar.png")'
})
return rule
})
}
}
test('plugins mutating rules after tailwind doesnt break it', async () => {
let config = {
content: [{ raw: html`<div class="bg-foo"></div>` }],
theme: {
backgroundImage: {
foo: 'url("./foo.png")',
},
},
plugins: [],
}
function checkResult(result) {
expect(result.css).toMatchFormattedCss(css`
.bg-foo {
background-image: url('./foo.png');
}
`)
}
// Verify the first run produces the expected result
let firstRun = await run('@tailwind utilities', 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('@tailwind utilities', config)
checkResult(secondRun)
})