Flash of unstyled content in development mode

[vhscom]

Describe the bug

Starting with Kit version 334 a momentary flash of unstyled content was introduced into the render pipeline in dev.

Reproduction

Minimal reproduction:
https://github.com/vhscom/sveltekit-bug-fouc_v1.0.0-next.334

• To observe issue run pnpm i && pnpm dev, browse to localhost:3000 and refresh page in Firefox, Chrome or Safari.
• To verify fouc started with version 334 run pnpm i -D @sveltejs/kit@1.0.0-next.333 && pnpm dev and refresh page.

Note: The reproduction test case is a little contrived but gets the job done. I encountered this bug while doing page transclusion which requires a parent with scoped styles to be called from a child that recurses on itself using svelte:self.

Edit: I'm seeing this in other projects as well which don't use recursive components. With dark themes it can cause the page to flash white with unstyled content before rendering the page properly.

Logs

Nothing out of the ordinary.

System Info

System:
  OS: macOS 12.4
  CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 649.70 MB / 16.00 GB
  Shell: 5.8.1 - /bin/zsh
Binaries:
  Node: 17.7.1 - /usr/local/bin/node
  Yarn: 1.22.17 - /usr/local/bin/yarn
  npm: 8.5.2 - /usr/local/bin/npm
  Watchman: 2022.03.07.00 - /usr/local/bin/watchman
Browsers:
  Brave Browser: 101.1.38.115
  Chrome: 101.0.4951.64
  Safari: 15.5
npmPackages:
  @sveltejs/adapter-auto: next => 1.0.0-next.43
  @sveltejs/kit: 1.0.0-next.334 => 1.0.0-next.334
  svelte: ^3.44.0 => 3.48.0

Severity

serious, but I can work around it

Additional Information

The FOUC seems to have been introduced with #4920