vanilla-extract missing CSS with HTML-only rendering (in dev only)

[astahmer]

Description

Hey, first I wanted to thank you for all your work, i'm very glad to see how far VPS has got and also excited to see where it's going (especially the single file RFC 👀 ) !

Context:

• vanilla-extract is a CSS-in-JS lib with mostly no runtime, except when using the sprinkles package
• i'm trying to use VPS with HTML-only pages (.page.server) since it would be a nice match (0 runtime CSS from VE + 0 runtime JS from VPS), but then found that styles are missing after visiting a page that has client-side JS sent (.page.client) in dev only, it works fine when using vite build + vite preview
• maybe related to UnoCSS HMR with HTML-only mode #411

it (VE in SSR in dev) works fine with other frameworks (rakkas/qwik/next, havent tried others) or others rendering modes of VPS, which makes me think this might be a VPS problem
i've been digging a lot today and couldn't find a way to fix this in the VE-plugin, i'm no expert in making vite plugin so it might also just be me not being good enough in that field

Steps to reproduce

minimal repro

• pnpm i
• pnpm dev
• visit localhost:3000
• go to zero-js page, see there the CSS is there, everything is ok (even tho this line was forced to true, was needed in the VE plugin, without it there was no CSS at all for the HTML-only page..)
• you can visit any page that has no client-side js (=you can't visit "with-js" page) and the CSS will still be fine
• then visit the with-js page, everything is still fine
• go back to zero-js page, the CSS for that page is gone and won't ever come back unless completely stop+restarting the vite dev server

this is what happens :

Workaround

I have found a workaround, with this the CSS will not be missing when using HTML-only pages (.page.server + ssr({ includeAssetsImportedByServer: true}))

this is what happens when I use a .page.client & dynamic import the sprinkles manually in dev mode only, what expected would happen :

please tell me if there's anything I can do to help !

Error Message + Error Stack

No response

[brillout]

I could reproduce indeed. Although I sometimes couldn't reproduce and I needed to restart the server to be able to reproduce again. I'd guess it's some kind of race condition between Vite picking up the CSS dependency and VE's generation of CSS.

Vite automatically injects the CSS, so it's not really a VPS thing.

(Note that includeAssetsImportedByServer has no effect in dev, it's only a build thing.)

The only thing VPS does here is to collect the CSS dependencies to avoid FOUC: https://github.com/brillout/vite-plugin-ssr/blob/main/vite-plugin-ssr/node/renderPage/getPageAssets/retrieveAssetsDev.ts. You can dig into this file (node_modules/vite-plugin-ssr/dist/cjs/node/renderPage/getPageAssets/retrieveAssetsDev.js) which will give you insightful information about how Vite analyzes your app.

While I think it's probably unrelated to VPS, maybe there is a possible workaround on VPS's side.

[astahmer]

ok didnt know that about includeAssetsImportedByServer !

yes retrievePageAssets is one of the 3 places that I stumbled upon yesterday and thought that could help, I also found:

• https://github.com/brillout/vite-plugin-ssr/blob/main/vite-plugin-ssr/node/plugin/plugins/extractAssetsPlugin.ts#L119
• https://github.com/brillout/vite-plugin-ssr/blob/main/vite-plugin-ssr/utils/styleFileRE.ts

I have no idea what to do with that tho
I tried once more fixing it in VE-plugin and it seems ok with these 2 commits:

• fixed the html-only CSS, but lost HMR on those pages:
  astahmer/ve-dev-ssr-bug-repro@acaf592

• fixed HMR:
  astahmer/ve-dev-ssr-bug-repro@3490aca

so I guess we can close this unless you want to make a workaround on VPS's side too ?

[brillout]

This really seems more like a VE thing than a VPS thing. So let's close this.

Let me know if you believe there is anything VPS can do here.

Btw. in case your company would be up for it: https://github.com/sponsors/brillout.

[lukasholzer]

@astahmer hey have you opened a PR or bug on the VE repository? Running in the same issue here and would prefer having VE supporting that instead of writing the plugin on my own 😬

[astahmer]

I did open a PR (here) but not specific for that bug, although it does fix it among other things

I made an usage example with vite-plugin-ssr here

[brillout]

Did you move the example? Your links gives a 404. Thanks for the example! We should add it to the community example list.

[astahmer]

yeah sorry, I updated the comment above with a permalink instead
this is early/experimental, since I kinda have to maintain a nightmare with local npm links & .tgz in published module (while waiting for my PR to VE to be merged) and getting different behaviour between both..

btw i'll soon open another issue, this time I fixed it directly in VPS here

not much details but as a summary: this is due to .css being loaded from an external package (published on npm) shipped as .css.ts (VE's way of styling) imported directly into the consuming package (user-code)

[brillout]

i'll soon open another issue

I see, looking forward to it. (FYI we may not even need that with vitejs/vite#11430. But it may take a while until the PR is merged, so let's go for your proposed fix in the meantime.)

[airtonix]

@brillout Even after vitejs/vite#11430 got merged, it looks like this is still happening.

[airtonix]

https://github.com/airtonix/vike-vanilla-extract-onRenderHtml-bug-538/tree/master#readme

[brillout]

@airtonix Can you make it minimal starting from one of the boilerplates (npm init vike@latest)?

[airtonix]

@brillout this is already based on one of those templates.

[brillout]

@airtonix I guess that global.css.ts isn't real CSS: it's a JavaScript file that dynamically generates and inserts CSS on the fly on the client-side, right?

This won't work if you import global.css.ts from a file like +onRenderHtml.tsx which is never loaded on the client-side.

Importing real CSS from +onRenderHtml.tsx works because Vike can tell it's CSS and thus adds it to the client-side. But I don't see how this can work for global.css.ts because, technically speaking, it isn't CSS.

(I didn't run your reproduction, but I can do so if you remove all frivolous/unknown dependencies from package.json)