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

Extracting CSS into a single file breaks treeshaking. I only want to ship critical styles. So as rollup turns every entry point to separate output chunks it would be great if there were a possibility to have the same for CSS instead of just generating one file which contains all the styles.

// config

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
            })
    ]
}

// result

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

//expected result

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

[frattaro]

Here’s a use case:

You have a large react-rollup component library that is consumed by a create-react-app application. They only need one component, and also need to run postcss on that component’s css to ensure it’s properly scoped. The component library already ships each component as a separate entry point, but can’t get the per-component css extracted, and are unable to support postcss in the consuming application.

[3lang3]

has any progress for this feature ?