single css file in output aka stop overriding vite's cssCodeSplit

[susickypavel]

Hi 👋

I'm about to start a discussion about how SvelteKit handles CSS files as I'm seeing kinda weird behavior in my eyes. I've got a little project that uses a small amount of CSS per page. These small CSS snippets are split into chunks using Vite depending on how they were imported in the SvelteKit routes/components.

I ended up with 10+ tiny CSS files per route load, which in my eyes and use case, is quite inconvenient as it delays FCP by a significant amount (especially on slow connections such as 3G) where HTTP multiplexing isn't much of a help.

Well, since I knew Kit is powered by Vite, I tried to disable cssCodeSplit in the config to output only a single file to fix my issues, but to my surprise, SvelteKit internally overrides this property to true, so I can't disable this behavior.

Is there a reason behind this? Is it needed by Kit to override this property, and if so, why is that? Is there a workaround I could use?

Thank you for your replies and discussion!

EDIT: Why would I prefer the single CSS file in this use case? Since individual CSS chunks are tiny, the combined CSS file wouldn't contain much of an unused CSS per route and I'd save networking overhead which might result in better FCP on slow internet connections.

[adealmeida-aa]

Is there any feedback on this yet? I believe this is causing my FOIC issue as Vite is unable to properly ascertain the order in which to load my styles from my global scss file when using Sass.

[Sofahamster]

Any update on this issue? It's been almost 2 years now and I ran into the same issue, with no solution in sight.