Different behaviours between remix dev/build and vite dev/build

[mrm007]

What version of Remix are you using?

2.2.0 (also tested with the latest commit on the dev branch)

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

There are steps to reproduce in this repo: https://github.com/mrm007/remix-vite-vanilla-repro

There's also a branch where I tested with a snapshot of @remix-run/dev: https://github.com/mrm007/remix-vite-vanilla-repro/tree/with-remix-snapshot

Expected Behavior

CSS defined via Vanilla Extract to be extracted the same way as it works with remix build.

Actual Behavior

See reproduction repo for all the details.

[hi-ogawa]

Thanks for comprehensive reproduction!
I experimented with your repro and it seems there are two issues with current vite build.

The 1st issue is on remix plugin side, which is similar to what I mentioned before in #7901 (comment) (and partially workarounded by #7911).
Currently, remix vite plugin potentially "mutates" other plugins in an unusual way, and in this case, @vanilla-extract/vite-plugin seems to be affected by this.
(I'm currently experimenting with a PR to fix this issue in #7990. I'll put a further note there since I think it's mostly about remix internal and @vanilla-extract/vite-plugin is not doing anything wrong.)

The 2nd issue is that your package.json has "sideEffects": false. Probably vite/rollup is more strict about this (compared to non-vite remix), so to make import "./global.vanilla.css" (which actually resolves to global.vanilla.css.ts) contribute to build output, removing "sideEffects": false seems necessary.

Still my investigation is in progress and also I didn't have any experience with vanilla extract, so I could be missing.
I'll make a PR on your repository with fixes, so that you can also confirm if it works as expected.

---

Also, one more side note, it seems there's some movement in vanilla-extract repo as well, which mentions remix/vite vanilla-extract-css/vanilla-extract#1210. It looks like it's just bumping internal vite version, so probably it's not so related, but I thought it's worth mentioning.

---

I forgot to mention that there's something interesting about emitCssInSsr: true. I think it's meant to be turned on for vite dev and it should be okay.

[mrm007]

@hi-ogawa thanks for picking this up.

Re: sideEffects: false — I actually tested with both and got the same result. I forgot to update the flag when I created the repro repo.

I tested with a build from latest dev (which includes your fix from #7990) and it all works flawlessly 👏 🙇

Thanks a lot for fixing it so quickly!

[mrm007]

Fixed in #7990