Improve performance of @tailwindcss/postcss and @tailwindcss/vite
#15226
Conversation
This file contains 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
Whenever we return `WalkAction.Stop` we would stop the _current_ loop only, but if your parent had more siblings, we would still loop over all of its siblings. Our contract with the `walk(…)` function looks like this: - `WalkAction.Continue` (default) — continue walking - `WalkAction.Skip` — skip the current node (aka, don't visit your child nodes) but continue your sibling nodes. - `WalkAction.Stop` — skip walking entirely. This commit fixes that by forwarding the `WalkAction.Stop` up the call stack to ensure parent `walk(…)` invocations _also_ stop. This ensures that we don't go into any sibling nodes of your parent (or grand parent) node(s).
It could be that the Tailwind compiler was invoked with a CSS function that doesn't use Tailwind at all. This can happen in places like the PostCSS or Vite plugin where _every_ CSS file is processed. The type of the CSS file can be any of 3 types. The exact naming is to be determined. But the idea is: 1. `none` — nothing related to Tailwind CSS is being used. This means that we can skip handling this file. 2. `static` — Some Tailwind CSS features are used such as `@apply` or the `theme(…)` function. Tailwind still has to handle these situations. The important part here is that `@tailwind utilities` was not used. This means that we don't even have to scan for candidates at all. 4. `full` — `@tailwind utilities` was used, this means that we have to scan for candidates and do a lot more I/O.
used If you have a lot of files (e.g.: Vue `<style>` blocks), then we would also inject the license header but that's not necessary for _every_ file. Only for the files that actually print out the utilities.
…t for now)" This reverts commit 027404e.
All the enums are internal and not considered "public" API. Inlining the vlues is safe.
CHANGELOG.md
Outdated
| - Nothing yet! | ||
| ### Fixed | ||
|
|
||
| - Improve performance of `@tailwindcss/postcss` and `@tailwindcss/vite` ([#15226](https://github.com/tailwindlabs/tailwindcss/pull/15226)) |
There was a problem hiding this comment.
Let's provide some info here on how it was improved and explain that we only process files that use tailwind features or so
adamwathan
reviewed
Nov 29, 2024
adamwathan
approved these changes
Nov 29, 2024
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 improves the performance of the
@tailwindcss/postcssand@tailwindcss/viteimplementations.The issue is that in some scenarios, if you have multiple
.cssfiles, then all of the CSS files are ran through the Tailwind CSS compiler. The issue with this is that in a lot of cases, the CSS files aren't even related to Tailwind CSS at all.E.g.: in a Next.js project, if you use the
next/font/localtool, then every font you used will be in a separate CSS file. This means that we run Tailwind CSS in all these files as well.That said, running Tailwind CSS on these files isn't the end of the world because we still need to handle
@importin case@tailwind utilitiesis being used. However, we also run the auto source detection logic for every CSS file in the system. This part is bad.To solve this, this PR introduces an internal
featuresto collect what CSS features are used throughout the system (@import,@plugin,@apply,@tailwind utilities, etc…)The
@tailwindcss/postcssand@tailwindcss/viteplugin can use that information to decide if they can take some shortcuts or not.Overall, this means that we don't run the slow parts of Tailwind CSS if we don't need to.