diff --git a/tests/context-reuse.test.html b/tests/context-reuse.test.html index 0eb19225d0c8..4f6527ec5fd4 100644 --- a/tests/context-reuse.test.html +++ b/tests/context-reuse.test.html @@ -7,5 +7,7 @@ Title - + +
+ diff --git a/tests/context-reuse.test.js b/tests/context-reuse.test.js index 6007a9c19db2..493bf609ed10 100644 --- a/tests/context-reuse.test.js +++ b/tests/context-reuse.test.js @@ -87,6 +87,46 @@ it('re-uses the context across multiple files with the same config', async () => 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; + } + `) +}) + it('invalidates the context when any CSS containing @tailwind directives changes', async () => { sharedState.contextInvalidationCount = 0 sharedState.sourceHashMap.clear()