Watch CSS module files for changes #17467
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
We have to still track the `.css` files so we can listen for changes.
RobinMalfait changed the title RobinMalfait force-pushed the fix/watch-other-css-files branch from c20c92d to 03ffa45 Compare 
thecrypticace approved these changes Mar 31, 2025
Contributor
thecrypticace left a comment
thecrypticace left a comment There was a problem hiding this comment.
🤞 we get no build loops lol
| }, | ||
| } | ||
| `, | ||
| 'webpack.config.js': js` |
Member
There was a problem hiding this comment.
might want to try what happens if you enable https://webpack.js.org/configuration/output/#outputclean
Member Author
There was a problem hiding this comment.
Luckily that didn't make a difference, but also annoying that I can't reproduce it haha. 923c98f
philipp-spiess requested changes Mar 31, 2025
Member
philipp-spiess left a comment
philipp-spiess left a comment There was a problem hiding this comment.
Going to mark this as "request changes" for now because in #17412 the repro also needed the emptyOutDir vite option so it would be good to test with the clean webpack option.
philipp-spiess approved these changes Mar 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
This PR is a follow-up PR for: #17433
In the other PR we allow scanning CSS files for extracting usages of CSS variables. This is important for
.module.cssfiles that reference these variables but aren't in the same big AST of the main CSS file.This PR also makes sure to watch for changes in those registered CSS files and re-extract the variables when they change.
This PR took a bit longer than expected because I was trying to make sure that writing to
./dist/out.cssworks without infinite-looping (e.g.: we had issues with this in Tailwind CSS v3 with webpack).But I couldn't reproduce the issue at all. I did had some code that tried to detect if the CSS file contained license headers and skip in (because then it's very likely an output CSS file) but even without it the tests were fine.
I setup integration tests with
@tailwindcss/cliitself, and with tools that use webpack. Added a test for Next.js, and a dedicated webpack test as well.Even without tests, locally, I couldn't reproduce an infinite loop due to changes in an output CSS file...
Eventually dropped the code that tries to detect output CSS files.
One thing to keep in mind is that if you change any of your "main" CSS files, then we will trigger a full rebuild anyway, so this change is only required for unrelated CSS files (like CSS module files) that use CSS variables.
Test plan