vite: Add inlineCssInDev option to fix FOUC in SSR dev

[askoufis]

Best reviewed with hidden whitespace.

During development, Vite SSR/SSG applications typically call ssrLoadModule to load some sort of render entrypoint that's used to generate some initial HTML. The Vite plugin handles compilation of VE styles during ssrLoadModule, so all classnames are present in the DOM, but the CSS generated by VE is not.

Until Vite gains first-class support for injecting CSS during SSR, it looks like the common solution is to inject it yourself vitejs/vite#2282. By iterating of the cssCache in the compiler, we can get all CSS generated during ssrLoadModule, and inject it into the head.

Consumers could further optimize their dev critical CSS if they want to with something like beasties.

In my eyes this replaces unstable_mode: 'transform', at least during development. transform also suffered from falling back to the old compilation method, where as inlineCssInDev at least uses the vite-node compiler.

Tests

While I wanted to add an SSR fixture to the repo, in its current state I think this would involve a decent refactor/some hacks to get working. I've tested this in sku and am happy with the behaviour, so I'm ok with not having test coverage for the time being.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8190398

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@vanilla-extract/compiler	Minor
@vanilla-extract/vite-plugin	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[DanDroryAu]

Nice!

Much needed to improve the SSR load dev experience.