hannnes

Finally got something to work. This webpack config compiles the tailwind css to a single style.css in build.

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,
                },
            },
        },
    },
};

I see, thanks.
I will do some more experimentation and see if I can come up with something

Sorry, I think I need to explain myself a bit better.

Let’s say I have two blocks, block1 and block2. If i run wp-scripts build with the file structure above i get the following (I have omitted some files for brevity):

build/
├─ blocks/
│  ├─ block1/
│  │  ├─ block.json
│  │  ├─ index.css
│  │  ├─ style-index.css
│  ├─ block2/
│  │  ├─ block.json
│  │  ├─ index.css
│  │  ├─ style-index.css

What I would like is this:

build/
├─ blocks/
│  ├─ block1/
│  │  ├─ block.json
│  ├─ block2/
│  │  ├─ block.json
├─ css/
│  ├─ style.css
│  ├─ edit.css

Is that possible?