egoist / egoist/rollup-plugin-postcss

Extract CSS separately for every file of the array of rollup entry points

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

Description

## Summary

When an [array of entry points is provided to Rollup](https://rollupjs.org/configuration-options/#input), it turns every entry point to separate output chunks. It would be great if there was a possibility to have the same for CSS files with this plugin. As for now the plugin just generates one CSS file which contains all the styles. Extracting CSS into a single file makes tree-shaking no to work, in case I want to ship only critical styles in the bundle.

### Current behaviour

Bundle structure:

```
.
└───components
│ └─── Input
│ │ index.js
│ └─── Button
│ │ index.js
└───folder2
│ index.js
│ chunk.js
│ styles.css
```

### Proposed behaviour

Bundle structure:

```
.
└───components
│ └─── Input
│ │ index.js
│ │ styles.css
│ └─── Button
│ │ index.js
│ │ styles.css
└───folder2
│ index.js
│ chunk.js
│ styles.css
```

### To reproduce

This is the rollup config that I have to reproduce the issue with this plugin:

```
rollupConfig = {
input: ['./src/components/Button/index.js', './src/components/Input/index.js'],
output: [
{
dir: lib,
format: 'cjs',
sourcemap: true,
exports: 'named'
},
],
plugins: [
postcss({
modules: true,
extract: true,
sourceMap: true,
minimize: true
})
]
}
```

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.