Skip to content

Commit

Permalink
add test that verifies an odd bug
Browse files Browse the repository at this point in the history
The story goes like this:

1. add `underline` to html file
  -> css contains `underline` rule
2. add `font-bold` to html file
  -> css contains `underline` and `font-bold`
3. remove `underline` from html file
  -> css still contains `underline` and `font-bold` for performance reasons
4. Save a css file (! RED FLAG)
  -> css contains `font-bold` because we started from scratch
5. add `underline` to html file
  -> css contains `underline` and `font-bold`
6. remove `underline` from html file
  -> css only contains `font-bold`... (UH OH)

This is because the moment we did step 4, every single save in any file created a new context. Every. Single. Time.
  • Loading branch information
RobinMalfait committed Oct 20, 2022
1 parent 1a15f22 commit ddf08c9
Showing 1 changed file with 100 additions and 0 deletions.
100 changes: 100 additions & 0 deletions integrations/tailwindcss-cli/tests/integration.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -605,4 +605,104 @@ describe('watcher', () => {

return runningProcess.stop()
})

test('classes are generated (and kept) when the index.html file changes (and removed when css/config files are changed)', async () => {
let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w')

// Start with a simple single class
await writeInputFile('index.html', html`<div class="font-bold"></div>`)
await runningProcess.onStderr(ready)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold {
font-weight: 700;
}
`
)

// Add another class
await writeInputFile('index.html', html`<div class="underline font-bold"></div>`)
await runningProcess.onStderr(ready)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold {
font-weight: 700;
}
.underline {
text-decoration-line: underline;
}
`
)

// Remove a class, because of performance reasons both classes will still be in the css file
await writeInputFile('index.html', html`<div class="font-bold"></div>`)
await runningProcess.onStderr(ready)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold {
font-weight: 700;
}
.underline {
text-decoration-line: underline;
}
`
)

// Save the index.css file, this should trigger a fresh context
await writeInputFile(
'index.css',
css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`
)
await runningProcess.onStderr(ready)

// Only 1 class should stay, because we started from scratch
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold {
font-weight: 700;
}
`
)

// Add another class
await writeInputFile('index.html', html`<div class="underline font-bold"></div>`)
await runningProcess.onStderr(ready)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold {
font-weight: 700;
}
.underline {
text-decoration-line: underline;
}
`
)

// Remove a class, because of performance reasons both classes will still be in the css file
await writeInputFile('index.html', html`<div class="font-bold"></div>`)

// If everything goes right, then both classes should still be here (because of the performance
// improvement). If we didn't solve the bug where from now on every save is a fresh context
// then this only has 1 class. So let's hope there are 2!
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.font-bold {
font-weight: 700;
}
.underline {
text-decoration-line: underline;
}
`
)

return runningProcess.stop()
})
})

0 comments on commit ddf08c9

Please sign in to comment.