App-vite SSR does not inject the styles at initial render in development

What happened?

The first HTML send to the client with SSR does not contain style tags, which causes a flash of unstyled content. This is related to https://github.com/vitejs/vite/issues/2282 and https://github.com/vitejs/vite/issues/2013. I think there are workarounds possible but I think those should be handled by Quasar internally.

This only happens when in development but that leads to a very bad developer experience, because you then have to assume it will only happen on development.

What did you expect to happen?

Styles should be present at first load

Reproduction URL

Repro based on project starter

How to reproduce?

1. Create a new starter project with Vite
2. Run dev mode with SSR
3. In the browser disable javascript and reload the page to see the initial page without styling.
4. Inspect the source Ctrl + u to see that there are indeed no style tags present

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), SSR Mode

Platforms/Browsers

No response

Quasar info output

Operating System - Windows_NT(10.0.22000) - win32/x64
NodeJs - 16.14.0

Global packages
  NPM - 8.3.1
  yarn - 1.22.17
  @quasar/cli - 1.3.0
  @quasar/icongenie - 2.3.0
  cordova - Not installed

Important local packages
  quasar - 2.6.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time    
  @quasar/app-vite - 1.0.0-beta.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.13.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14
  pinia - 2.0.11 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.8.6 -- Native-ESM powered web dev build tool
  eslint - 8.11.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - METT-EVERT
  Ethernet 2 - 192.168.2.15

Relevant log output

No response

Additional context

No response

[stefanvanherwijnen]

@rstoenescu I’m not sure if this has already been fixed, but this seems to work: https://github.com/vitejs/vite/issues/2282#issuecomment-1079659649

[Evertvdw]

@rstoenescu I’m currently running into this limitation again, would it be possible to see if we can include the method mentioned above in Quasar as well?

Or if not in Quasar generically is there a way we can implement this for ourselves using SSR middleware or something like that?