-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Apply non-Tailwind CSS transforms in Vite plugin #14871
Conversation
This stack of pull requests is managed by Graphite. Learn more about stacking. Join @philipp-spiess and the rest of your teammates on Graphite |
transform
plugins in build mode
transform
plugins in build modeffbaab4
to
1cc0022
Compare
Need to test the following popular setups before we land this:
Check if this also fixes: |
Can confirm that #14796 also works with this change: |
1043382
to
e547320
Compare
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. |
68e6f1e
to
fa25b21
Compare
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.