Allow using build.cssCodeSplit option in vite.config

[ebeloded]

Describe the problem

I use Tailwind to style my SvelteKit application. 95% of the styles end up in one CSS file. However, for some components, Tailwind utilities are not sufficient, and I write custom CSS.

These custom CSS styles are minimal, yet they end up in a separate CSS file, requiring an additional request. This happens for each component that requires custom styling.

Vite provides an option to turn off css code splitting with cssCodeSplit. However, this option is overridden by SvelteKit and cannot be turned off.

Describe the proposed solution

I would like to be able to turn off cssCodeSplit in vite config.

Alternatives considered

I could define my custom styles in my tailwind styles, then they'll end up in one file. However, I'd like to keep the styles and the components together.

Importance

would make my life easier

Additional Information

This issue has been brought up in a discussion before, where the problem is explain well.

[YousimDev]

Hello everyone,

Any news about this issue ?

The number of generated CSS chunks is too high which leads to a big number of requests to get all these chunks which is not a best practice from GreenIT perspective.

Is it possible to reduce the number of CSS chunks or turn off this option to get only one CCS file ?

[Mitcheljager]

Still hoping for a solution here. We've had to inline most of our CSS but this leads to a higher initial HTML document size, with that increasing TTFB. But that's still better than the alternative of 150 different CSS files.

[eltigerchino]

Unfortunately, this isn't so straightforward. I've tried disabling the CSS splitting but it causes the final build to not load any CSS at all. Maybe related to https://github.com/vitejs/vite/issues/1579 where disabling CSS splitting causes it to not be injected into the JS chunks