Inlining all CSS

[Schniz]

Cross-posting a Discord message.

Hey! and thanks for Vite.
I wonder — what if I want to inline all CSS (including css modules?)

It can be patched by skipping this if (setting format to be something other than es):

vite/packages/vite/src/node/plugins/css.ts

Line 321 in ab8a55e

if (opts.format === 'es') {

but maybe this should be configurable? maybe something like:

{
  "build": {
    "inlineAllCss": true
  }
}

so the attached code could be:

if (!config.build.inlineAllCss && opts.format === 'es') {

I currently patched it on my project to be false && opts.format === 'es' for the sake of making it work, but is it something the maintainers would want to have? maybe a different direction to that?

I mean, why does the output format controls how and whether CSS is being injected? Sounds like it's a derivative of the format, if no other configuration was provided 😃

Thanks again

[Schniz]

Without patching, I get my standard CSS inlined, but CSS modules are not being inlined. Not sure if this is the expected behavior!

[yyx990803]

Why do you want it inlined? Loading the CSS and JS in parallel is more efficient (and has better caching behavior).

[Schniz]

It's for an embeddable widget. Right now distributed as a <script tag to the clients

[yyx990803]

Are you using lib mode?

[Schniz]

nope, IIRC lib mode does not inline the CSS at all.
Worth noting that I have used format: 'iife' and dropped it because I want to have dynamic imports and Rollup does not support dynamic imports with IIFE and UMD ☹️

[xon52]

I'm in the same boat. Would be great for lib mode if there was an option for inlining CSS.
When using my plugin, if you import a supplied component, I'd really like it to be imported with its associated CSS and not require the user to import anything more.
Even worse is if all the CSS is bundled into one file because importing that file might cause bloat if you end up only using one component.