egoist / egoist/rollup-plugin-postcss

Respect "preserveModules" when "extract" is true

Open
#336 2 comments 19 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
689
Forks
210
PR merge metrics
No merged PRs in 30d

Description

# 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](https://git.dany.dev/dsluijk/teenyui).

# 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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.