Inline styles from css-modules in bundle

[Andrey-Bobukh]

I have a requirement to build a single all-in-one js file, including both code and styles of my app.
And I want to use css-modules.

I know that Vite has an option of importing css files like file.css?inline – that will prevent css from being emitted into a separate bundle file, and instead return a string of css code, for me to manually put it wherever I want in html.

Same can be done with css-modules – but since they produce their own export, an object with generated classnames – using ?inline on them will block me access to that object.
I.e. it's a choice:

• import classes from "my.module.css" – I can assign classes to elements, but css will be emitted in a separate css bundle
• import css from "my.module.css?inline" – css will be inlined in my js bundle, but I can't assign generated css classes to elements.

Is there an option or maybe plugin to have both at once?

---

same question on SO, unanswered for a while

[thexeos]

I second that.

When you are working with a large codebase, it is often necessary to make small adjustments to components styled using global/shared modules. That typically involves writing one or two rules, often re-using class names from imported modules. It works, except that there is now a 50 byte CSS file that needs to be managed separately from JS file with the component code.

It would be great if small (below threshold) CSS could be inlined into component code and appended to when imported.

There is, however, a risk of class name collisions as any components that @import the same CSS module would share the same prefix for all their classes. But this risk is already present and collisions already happen with existing Vite code.

[Andrey-Bobukh]

Found it: https://github.com/marco-prontera/vite-plugin-css-injected-by-js
This plugin solved all my needs.

@thexeos your specific need of having an inlining threshold isn't supported by this plugin.
As I understand, it operates on the resulting Vite's output, not on particular source files. So if Vite decided to concat all your css in one file, there is nothing to do about it.
If you know the way to address this behavior, then maybe this option can help you.