Rework Vite plugin to support lightningcss pre processor and fast rebuilds#14269
Merged
philipp-spiess merged 6 commits intonextfrom Sep 4, 2024
Merged
Rework Vite plugin to support lightningcss pre processor and fast rebuilds#14269philipp-spiess merged 6 commits intonextfrom
philipp-spiess merged 6 commits intonextfrom
Conversation
fba8ae3 to
4551225
Compare
4551225 to
43e5170
Compare
philipp-spiess
commented
Aug 27, 2024
philipp-spiess
commented
Aug 27, 2024
| "@tailwindcss/oxide": "workspace:^", | ||
| "lightningcss": "catalog:", | ||
| "postcss-load-config": "^6.0.1", | ||
| "postcss": "^8.4.41", |
Contributor
Author
There was a problem hiding this comment.
This is temporary until we start to resolve @import ourselves (at this point every client need this so we might as well)
philipp-spiess
commented
Aug 27, 2024
philipp-spiess
commented
Aug 27, 2024
| }, | ||
|
|
||
| // Append the postcss-fix-relative-paths plugin | ||
| async config(config) { |
Contributor
Author
There was a problem hiding this comment.
We no longer need this since we can just run our own at-import plugins
philipp-spiess
commented
Aug 27, 2024
philipp-spiess
commented
Aug 27, 2024
philipp-spiess
commented
Aug 27, 2024
philipp-spiess
commented
Aug 27, 2024
bf4c01b to
8156548
Compare
philipp-spiess
commented
Aug 30, 2024
47d9853 to
e7bb6b9
Compare
cbce290 to
c4d90d3
Compare
5e5128f to
c3ee5c6
Compare
645fb41 to
7f4b079
Compare
ae63a57 to
3a8dd7a
Compare
7f4b079 to
58d5221
Compare
d8c6308 to
53e53ca
Compare
22ef431 to
51e73eb
Compare
51e73eb to
3cc2f08
Compare
thecrypticace
approved these changes
Sep 3, 2024
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
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.
Fixes #14205
Fixes #14106
This PR reworks the Vite extension in order to supprt
lightningcssas the pre-processor, enable faster rebuilds, and adds support forvite build --watchmode. To make this change possible, we've done two major changes to the extension that have caused the other changes.1. Tailwind CSS is a preprocessor
We now run all of our modifications in
enforce: 'pre'. This means that Tailwind CSS now gets the untransformed CSS files rather than the one already going through postcss or lightningcss. We do this because Tailwind CSS is a preprocessor at the same level as those tools and we do sometimes use the language in ways that creates problems when it's the input for other bundlers.The correct solution here is to make Tailwind not depend on any other transformations. The main reason we were not using the
enforce: 'pre'phase in Vite before was becuase we relied on the@importflattening of postcss so we now have to do this manually.@importflattening is now a concern that every Tailwind V4 client has to deal with so this might actually be something we want to inline into tailwindcss in the future.2. A Vite config can have multiple Tailwind roots
This is something that we have not made very explicit in the previous iteration of the Vite plugin but we have to support multiple Tailwind roots in a single Vite workspace. A Tailwind root is a CSS file that is used to configure Tailwind. Technically, any CSS file can be the input for
tailwindcssbut you have to add certain rules (e.g.@import "tailwindcss";) to make the compiler do something.A workspace can have multiple of these rules (e.g. by having different Tailwind configures for different sub-pages). With the addition of support for
@sourcerules and JS config files, Tailwind roots become more complex and can have a custom list of dependencies (that is other JavaScript modules the compiler includes as part of these new rules). In order to only rebuild the roots we need to, we have to make this separation very clear.