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

Fix missing PostCSS dependencies in the CLI (#9617)

Browse source 
* Record and watch PostCSS dependencies in the CLI

* ensure `changedContent` gets cleared

Otherwise this list gets bigger and bigger, not only that there is a
subtle bug. The moment you save a `.css` file we want to create a new
context and start from scratch. However, since the list was never
cleared, it meant that every subsequent save to *any* file (not only
config / css files) creates a new context...

By clearing the least we should work around this problem.

* add test that verifies an odd bug

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.

* use a property that doesn't require `autoprefixer`

* update changelog

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
This commit is contained in:
Robin Malfait 2022-10-20 18:01:39 +02:00 • committed by GitHub
parent 4dfb1e3f87
commit 40f6b4ff64
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 148 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

25
integrations/tailwindcss-cli/tests/cli.test.js
View file

@ -411,6 +411,31 @@ describe('Build command', () => {
`
)
await writeInputFile(
'imported.css',
css`
@layer utilities {
.something-cool {
color: blue;
}
}
`
)
await runningProcess.onStderr(function ready(message) {
return message.includes('Done in')
})
expect(await readOutputFile('main.css')).toIncludeCss(
css`
@media (min-width: 768px) {
.md\:something-cool {
color: blue;
}
}
`
)
return runningProcess.stop()
})

101
integrations/tailwindcss-cli/tests/integration.test.js
View file

@ -605,4 +605,105 @@ 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="flex font-bold"></div>`)
await runningProcess.onStderr(ready)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.flex {
display: flex;
}
.font-bold {
font-weight: 700;
}
`
)
// 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`
.flex {
display: flex;
}
.font-bold {
font-weight: 700;
}
`
)
// 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="flex font-bold"></div>`)
await runningProcess.onStderr(ready)
expect(await readOutputFile('main.css')).toIncludeCss(
css`
.flex {
display: flex;
}
.font-bold {
font-weight: 700;
}
`
)
// 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)
// 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`
.flex {
display: flex;
}
.font-bold {
font-weight: 700;
}
`
)
return runningProcess.stop()
})
})