Right now there are two types of behavior, both explained here. I'm looking for a combination of the two.
preserveModules: true
, extract: false
Specific files are created but they are JavaScript files, not CSS.
This is an issue because the CSS in the files will not be recognized by the downstream bundler, and are such not extracted to a CSS bundle. This will slow down the browser, as it's parsing the CSS in the JS VM. Next to that a module called style-inject
is added to the bundle, which is not needed with the proposed changes.
preserveModules: true
, extract: true
The CSS is extracted to a separate CSS file, and will be recognized by the downstream bundler as CSS. The issue with this option is that the CSS is no longer minimal. You need to include everything or nothing from the styling. Especially with larger CSS parts this can inflate the bundle unnecessarily.
When setting preserveModules
and extract
to true
Rollup should output individual CSS files in the place where they are now JS files when extract
is false
. This is friendly for the downstream bundler, while keeping the CSS size minimal. An example project where this could be useful can be found here.
This change will make it possible to bundle the used css into a single file without any unneeded tags by an downstream bundler. It will lead to smaller bundlers, without the need of parsing CSS in the JavaScript VM.
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
You're funding impactful open source efforts
You want to contribute to this effort
You want to get funding like this too