Skip to content
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

Merged
merged 7 commits into from
Nov 7, 2024

Conversation

philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Nov 5, 2024

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:

{
  name: 'recolor',
  transform(code, id) {
    if (id.includes('.css')) {
      return code.replace(/red/g, 'blue')
    }
  },
}

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:

Screenshot 2024-11-05 at 13.35.26.png

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:

Screenshot 2024-11-06 at 14 26 50

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.

Copy link
Member Author

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @philipp-spiess and the rest of your teammates on Graphite Graphite

@philipp-spiess philipp-spiess changed the title vite-third-party-plugins Vite: Run all third-party transform plugins in build mode Nov 5, 2024
@philipp-spiess philipp-spiess changed the title Vite: Run all third-party transform plugins in build mode Apply non-Tailwind CSS transforms in Vite plugin Nov 5, 2024
@philipp-spiess philipp-spiess force-pushed the 11-05-vite-third-party-plugins branch from ffbaab4 to 1cc0022 Compare November 5, 2024 12:42
@philipp-spiess philipp-spiess marked this pull request as ready for review November 5, 2024 12:48
@philipp-spiess philipp-spiess requested a review from a team as a code owner November 5, 2024 12:48
@philipp-spiess
Copy link
Member Author

philipp-spiess commented Nov 5, 2024

Need to test the following popular setups before we land this:

  • Sveltekit
  • Astro
  • Remix
  • Nuxt
  • SolidStart

Check if this also fixes:

@philipp-spiess philipp-spiess marked this pull request as draft November 5, 2024 13:25
@philipp-spiess
Copy link
Member Author

Can confirm that #14796 also works with this change:

Screenshot 2024-11-06 at 14 26 50

@philipp-spiess philipp-spiess force-pushed the 11-05-vite-third-party-plugins branch from 1043382 to e547320 Compare November 6, 2024 13:32
@philipp-spiess philipp-spiess marked this pull request as ready for review November 6, 2024 13:37
@thecrypticace
Copy link
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 adamwathan force-pushed the 11-05-vite-third-party-plugins branch from 68e6f1e to fa25b21 Compare November 7, 2024 14:46
@philipp-spiess philipp-spiess merged commit 15fc7f4 into next Nov 7, 2024
2 checks passed
@philipp-spiess philipp-spiess deleted the 11-05-vite-third-party-plugins branch November 7, 2024 15:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants