How can I combine multiple CSS files into one when using wp-scripts?

[Hannnes1]

Hi,
We are developing a block theme with the use of wp-scripts together with Tailwind.
I'm still trying to figure out how to set everything up correctly, and need some assistance regarding the generated css files.

Since most blocks, and the theme as a whole shares a lot of tailwind classes, I would like all css to end up in one css file in the build folder.

Our src folder currently has the flowing structure:

src/
├─ blocks/
│  ├─ [block name]/
│  │  ├─ edit.js
│  │  ├─ index.js
├─ css/
│  ├─ style.css
│  ├─ edit.css

edit.js and index.js imports edit.css and style.css respectively.
I would like for the generated css to be in two css files like this as well, but when I run wp-scripts build I end up with several css files in each blocks folder.

I think this might be an issue that I can solve by changing the webpack config (I'm using the default right now), but I don't have enough experience with webpack to know what to change. So any help is appreciated!

[Hannnes1]

Okay, I figured out something that works:

const defaultConfig = require('@wordpress/scripts/config/webpack.config');

const cleanedDefaultPlugins = defaultConfig.plugins.filter(
    (plugin) => {
        if (['RtlCssPlugin'].includes(plugin.constructor.name)) {
            return false;
        }
        return true;
    }
);

module.exports = {
    ...defaultConfig,
    plugins: [
        ...cleanedDefaultPlugins,
    ],
    optimization: {
        ...defaultConfig.optimization,
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: "style",
                    type: "css/mini-extract",
                    chunks: "all",
                    enforce: true,
                },
            },
        },
    },
};