rollup-plugin-postcss icon indicating copy to clipboard operation
rollup-plugin-postcss copied to clipboard

Respect "preserveModules" when "extract" is true

Open dsluijk opened this issue 5 years ago • 2 comments

Current Behavior

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.

Expected Behavior

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.

Why the changes

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.

dsluijk avatar Nov 20 '20 14:11 dsluijk

any priority on this?

morriq avatar Jan 20 '23 22:01 morriq