Ensure @tailwindcss/cli watches the input file (#20246)
This PR fixes an issue where if the `--input` file (when using `@tailwindcss/cli`) lives in an ignored folder, then changes to the input file won't trigger a rebuild. This happened in #17632 where the input file lives in the `assets/` folder which is ignored by default. However, if you make a change to the input file, then the CLI doesn't restart which means that you can't update the `@source` directives without quitting the program and re-starting it manually. This PR solves that by automatically injecting an `@source` with the path to the input file. This way the CLI will see changes, even if the input file is in an ignored directory. Fixes: #17632 ## Test plan 1. Added an integration test 2. Existing tests pass 3. Reproduced it on the Before: <img width="1122" height="1376" alt="file-295ce4696b6b3199a3915c63f8bb50cd" src="https://github.com/user-attachments/assets/09e5e965-38d1-474d-bfc6-3b5e9bca73b6" /> After: <img width="1122" height="1376" alt="file-301b2f2e06aee045957355014ae5de87" src="https://github.com/user-attachments/assets/2b6d4cba-f456-4138-98bd-2259876fe70a" />
This commit is contained in:
parent
51f0760d29
commit
cc3b634fe0
3 changed files with 60 additions and 0 deletions
|
|
@ -404,6 +404,57 @@ describe.each([
|
|||
},
|
||||
)
|
||||
|
||||
// https://github.com/tailwindlabs/tailwindcss/issues/17632
|
||||
test(
|
||||
'watch mode rebuilds when the input file is in an ignored folder',
|
||||
{
|
||||
fs: {
|
||||
'package.json': json`
|
||||
{
|
||||
"dependencies": {
|
||||
"tailwindcss": "workspace:^",
|
||||
"@tailwindcss/cli": "workspace:^"
|
||||
}
|
||||
}
|
||||
`,
|
||||
'assets/tailwind.config.js': js`
|
||||
module.exports = {
|
||||
content: {
|
||||
relative: true,
|
||||
files: ['html/*.html'],
|
||||
},
|
||||
}
|
||||
`,
|
||||
'assets/html/index.html': html`
|
||||
<div class="underline"></div>
|
||||
`,
|
||||
'assets/css/index.css': css`
|
||||
@import 'tailwindcss' source(none);
|
||||
@config '../tailwind.config.js';
|
||||
`,
|
||||
},
|
||||
},
|
||||
async ({ fs, spawn }) => {
|
||||
let process = await spawn(
|
||||
`${command} --input assets/css/index.css --output dist/out.css --watch`,
|
||||
)
|
||||
await process.onStderr((m) => m.includes('Done in'))
|
||||
|
||||
await fs.expectFileToContain('dist/out.css', [candidate`underline`])
|
||||
|
||||
await fs.write(
|
||||
'assets/css/index.css',
|
||||
css`
|
||||
@import 'tailwindcss' source(none);
|
||||
@config '../tailwind.config.js';
|
||||
@source inline("flex");
|
||||
`,
|
||||
)
|
||||
|
||||
await fs.expectFileToContain('dist/out.css', [candidate`flex`])
|
||||
},
|
||||
)
|
||||
|
||||
test(
|
||||
'production build (stdin)',
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue