Some problems with cssCodeSplit and Library Mode

[Dunqing]

Clear and concise description of the problem

I enabled preserveModules and cssCodeSplit in library mode.
But css files don't follow the preserveModules rule, use the original module name as the file name.

related code:

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

Lines 461 to 464 in 1ffc010

	const fileHandle = this.emitFile({
	name: chunk.name + '.css',
	type: 'asset',
	source: chunkCSS

Suggested solution

I want to use the original module name as the file name as required by preserveModules when cssCodeSplit is enabled.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[gburning]

Did you find a solution to this? I'd like to find a way to export my original modules alongside the concatenated style sheet.

[receter]

Instead of using preserveModules you can turn every file into an entry point. Like suggested in the Rollup docs:

If you want to convert a set of files to another format while maintaining the file structure and export signatures, the recommended way—instead of using output.preserveModules that may tree-shake exports as well as emit virtual files created by plugins—is to turn every file into an entry point. You can do so dynamically e.g. via the glob package:

I recently wrote a blog post including this topic: https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma

@emosheeep Your plugin works great for me, first I tried using preserveModules but this solution works even better and I also have more granular control. Maybe you could include this (better) alternative to using preserveModules in the docs? I can create a pull request if you want.

[emosheeep]

@receter I just read your blog, and I got you. Did you mean what need to be added to the docs is that you quoted above from Rollup's docs? I think it's ok, may be it can be added to "QA" or "Recipes of creating component library" section, and titled it properly. I’ll be appreciated it if you have time to work for this, because I'm just exhausted with my current job which is working my last nerve.

[Dunqing]

Instead of using preserveModules you can turn every file into an entry point. Like suggested in the Rollup docs:

If you want to convert a set of files to another format while maintaining the file structure and export signatures, the recommended way—instead of using output.preserveModules that may tree-shake exports as well as emit virtual files created by plugins—is to turn every file into an entry point. You can do so dynamically e.g. via the glob package:

I recently wrote a blog post including this topic: https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma

@emosheeep Your plugin works great for me, first I tried using preserveModules but this solution works even better and I also have more granular control. Maybe you could include this (better) alternative to using preserveModules in the docs? I can create a pull request if you want.

That's great. You inspired me, We can create a plugin that focuses on the lib mode, and it can follow preserveModules rules.

[victorpavlenko]

@receter Its work just perfect! Thanks a lot.
I just have a question regarding generate .cjs together with .es
As I know rollupOptions doesn't support arrays
Perhaps you have some ideas?

[receter]

@receter Its work just perfect! Thanks a lot. I just have a question regarding generate .cjs together with .es As I know rollupOptions doesn't support arrays Perhaps you have some ideas?

You could build .cjs in a separate build step.