diff --git a/tests/important-boolean.test.js b/tests/important-boolean.test.js index 20fc4d1ee598..48a7c10f89f8 100644 --- a/tests/important-boolean.test.js +++ b/tests/important-boolean.test.js @@ -1,7 +1,8 @@ import fs from 'fs' import path from 'path' +import * as sharedState from '../src/lib/sharedState' -import { run, css } from './util/run' +import { run, css, html } from './util/run' test('important boolean', () => { let config = { @@ -63,3 +64,74 @@ test('important boolean', () => { expect(result.css).toMatchFormattedCss(expected) }) }) + +// This is in a describe block so we can use `afterEach` :) +describe('duplicate elision', () => { + let filePath = path.resolve(__dirname, './important-boolean-duplicates.test.html') + + afterEach(async () => await fs.promises.unlink(filePath)) + + test('important rules are not duplicated when rebuilding', async () => { + let config = { + important: true, + content: [filePath], + } + + await fs.promises.writeFile( + config.content[0], + html` +
+
+ ` + ) + + let input = css` + @tailwind utilities; + ` + + let result = await run(input, config) + let allContexts = Array.from(sharedState.contextMap.values()) + + let context = allContexts[allContexts.length - 1] + + let ruleCacheSize1 = context.ruleCache.size + + expect(result.css).toMatchFormattedCss(css` + .ml-2 { + margin-left: 0.5rem !important; + } + .ml-4 { + margin-left: 1rem !important; + } + `) + + await fs.promises.writeFile( + config.content[0], + html` +
+
+ ` + ) + + result = await run(input, config) + + let ruleCacheSize2 = context.ruleCache.size + + expect(result.css).toMatchFormattedCss(css` + .ml-2 { + margin-left: 0.5rem !important; + } + .ml-4 { + margin-left: 1rem !important; + } + .ml-6 { + margin-left: 1.5rem !important; + } + `) + + // The rule cache was effectively doubling in size previously + // because the rule cache was never de-duped + // This ensures this behavior doesn't return + expect(ruleCacheSize2 - ruleCacheSize1).toBeLessThan(10) + }) +})