Summary

When an array of entry points is provided to Rollup, 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
            })
    ]
}