wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Invalidate context when main css changes (#7626)

Browse source 
* Invalidate context when CSS changes

* Remove invalidation count check

* Add sass integration test

* Update changelog
This commit is contained in:
Jordan Pittman 2022-02-25 13:12:45 -05:00 • committed by GitHub
parent d9bc25da6a
commit bd167635d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 3173 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

4
tests/context-reuse.test.html
View file

@ -7,5 +7,7 @@
<title>Title</title>
<link rel="stylesheet" href="./tailwind.css" />
</head>
<body></body>
<body>
<div class="only:custom-utility"></div>
</body>
</html>

54
tests/context-reuse.test.js
View file

@ -7,7 +7,9 @@ const configPath = path.resolve(__dirname, './context-reuse.tailwind.config.js')
const { css } = require('./util/run.js')
function run(input, config = {}, from = null) {
from = from || path.resolve(__filename)
let { currentTestName } = expect.getState()
from = `${path.resolve(__filename)}?test=${currentTestName}&${from}`
return postcss(tailwind(config)).process(input, { from })
}
@ -26,16 +28,14 @@ afterEach(async () => {
})
it('re-uses the context across multiple files with the same config', async () => {
let from = path.resolve(__filename)
let results = [
await run(`@tailwind utilities;`, configPath, `${from}?id=1`),
await run(`@tailwind utilities;`, configPath, `id=1`),
// Using @apply directives should still re-use the context
// They depend on the config but do not the other way around
await run(`body { @apply bg-blue-400; }`, configPath, `${from}?id=2`),
await run(`body { @apply text-red-400; }`, configPath, `${from}?id=3`),
await run(`body { @apply mb-4; }`, configPath, `${from}?id=4`),
await run(`body { @apply bg-blue-400; }`, configPath, `id=2`),
await run(`body { @apply text-red-400; }`, configPath, `id=3`),
await run(`body { @apply mb-4; }`, configPath, `id=4`),
]
let dependencies = results.map((result) => {
@ -85,3 +85,43 @@ it('re-uses the context across multiple files with the same config', async () =>
// And none of this should have resulted in multiple contexts being created
expect(sharedState.contextSourcesMap.size).toBe(1)
})
it('updates layers when any CSS containing @tailwind directives changes', async () => {
let result
// Compile the initial version once
let input = css`
@tailwind utilities;
@layer utilities {
.custom-utility {
color: orange;
}
}
`
result = await run(input, configPath, `id=1`)
expect(result.css).toMatchFormattedCss(css`
.only\:custom-utility:only-child {
color: orange;
}
`)
// Save the file with a change
input = css`
@tailwind utilities;
@layer utilities {
.custom-utility {
color: blue;
}
}
`
result = await run(input, configPath, `id=1`)
expect(result.css).toMatchFormattedCss(css`
.only\:custom-utility:only-child {
color: blue;
}
`)
})