Apply non-Tailwind CSS transforms in Vite plugin#14871
Merged
philipp-spiess merged 7 commits intonextfrom Nov 7, 2024
Merged
Conversation
Contributor
Author
|
This stack of pull requests is managed by Graphite. Learn more about stacking. Join @philipp-spiess and the rest of your teammates on |
transform plugins in build mode
transform plugins in build modeffbaab4 to
1cc0022
Compare
Contributor
Author
|
Need to test the following popular setups before we land this:
Check if this also fixes: |
Contributor
Author
|
Can confirm that #14796 also works with this change:
|
1043382 to
e547320
Compare
Contributor
|
This is looking good. I really like that the change is fairly simple. I left some comments about stuff. Aside: I really think we should investigate the two-pass approach we talked about in a future PR because I still feel real weird about running other plugins transforms after the transform phase. However, in the short term, I think this is probably (hopefully) okay. |
adamwathan
approved these changes
Nov 7, 2024
68e6f1e to
fa25b21
Compare
adamwathan
reviewed
Nov 7, 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: #14839
Fixes: #14796
This PR fixes an issue in the Vite extension where we previously only ran a small list of allow-listed plugins for the second stage transform in the build step. This caused some CSS features to unexpectedly not work in production builds (one such example is Vue's
:deep(...)selector).To fix this, I changed the allow listed plugins that we do want to run to a block list to filter out some plugins we know we don't want to run (e.g. the Tailwind Vite plugin for example or some built-in Vite plugins that are not necessary).
Test plan
This PR adds a new integration test suite to test interop with a custom Vite transformer that looks like this:
I also validated that this does indeed fix the Vue
:deep(...)selector related issue that we were seeing by copying the repro of #14839 into our playground:You can see in the screenshot above that the
:deep()selector overwrites the scoped styles as expected in both the dev mode and the prod build (screenshotted).Furthermore I reproduced the issue reported in #14796 and was able to confirm that in a production build, the styling works as expected:
Lastly, I created a repository out of the biggest known-to-me Vite projects: Astro, Nuxt, Remix, SolidStart, and SvelteKit and verified that both dev and prod builds show no issue and the candidate list is properly appended in each case.