Incorrectly inlines CSS when using Vite special imports ?raw ?url or globs

[rixo]

Describe the bug

Kit inlines style during dev to reduce FOUC.

However, this inlining is a bit to gready, because it will also include the content of files imported with Vite's special URLs such as:

• import raw from 'some.css?raw'
• import url from 'some.css?url'

It also inlines glob imports as raw or URL:

• import.meta.glob('./*.css', { as: 'raw' })
• import.meta.glob('./*.css', { as: 'url' })

Somewhat related: dynamic imports

Furthermore, maybe not the topic of this issue but somewhat related, I'm wondering what should be the behavior of the CSS inlining during dev in regard to dynamic imports in user's code.

Currently Kit makes the assumption that such code will be used on the page and inlines it during dev, as it does (incorrectly) with all the aforementioned cases.

However, this is nor automatically the user's intention, and neither identical to what they will get in the production build. In effect, in Vite those dynamic imports of .css only return the content of the file to the user (similar to ?raw imports actually), it doesn't inject the CSS in the page by itself (like it does with static imports).

Currently, in dev, Kit inlines .css imported like that, but should it? With only that, the style won't appear in the prod build.

import('./example-dynamic.css').then((m) => {
	// it gets the raw file contents
	console.log(m.default);
	// /* example-dynamic.css */
	// body {
	//   font-size: 3rem;
	// }
});

Reproduction

https://github.com/rixo/repro-kit-inline-raw-css

pnpm install
pnpm dev

Open: http://localhost:5173

Go to "view source" to check what the server has rendered.

Observe that some raw URLs and CSS imported as raw text has been inlined in <style data-sveltekit>.

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Memory: 33.50 GB / 62.20 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Brave Browser: 106.1.44.108
    Chrome: 106.0.5249.103
    Chromium: 106.0.5249.91
    Firefox: 105.0.3
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.81 
    @sveltejs/kit: 1.0.0-next.512 => 1.0.0-next.512 
    svelte: ^3.44.0 => 3.50.1 
    vite: ^3.1.0 => 3.1.3

Severity

blocking an upgrade

Additional Information

No response

[mashedkeyboard]

I think this is the same issue I'm having, and is probably also the same issue as was #2556

[eltigerchino]

Closing this as resolved since I can't reproduce Kit inlining the CSS when importing it with special Vite query parameters.