"Extracting all CSS in a single file" does not work when using a vendor cache group

[jeffijoe]

This is my cache group config. I'm after

        cacheGroups: {
          default: false,
          vendors: false,
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all',
            enforce: true
          },
          styles: {
            name: 'bundle',
            test: /\.css$/,
            chunks: 'all',
            priority: 1000,
            enforce: true
          }
        }

Plugin:

new MiniCssExtractPlugin({ filename: 'bundle.css' }),

The result is 2 files, bundle.css and 1.bundle.css. If I remove the vendor group, I only get bundle.css which is what I want, but in doing so I end up with a single JS file which is not optimal.

I'd like a single bundle.css while keeping separate vendor.js and app.js. 😄

[alexander-akait]

@jeffijoe PR welcome to fix docs

[jeffijoe]

@evilebottnawi Does this mean that this works as intended? I'd be more than happy to submit a PR to the docs, but with a work-around for the desired behavior. 😄

[xrei]

It doesn't work even without vendor for me. Still have one css file for one chunk.

[jpzwarte]

I had something similar which i solved differently:

            splitChunks: {
                cacheGroups: {
                    vendor: {
                        test: /(node_modules|vendors).+(?<!css)$/,
                        name: 'vendor',
                        chunks: 'all'
                    }
                }
            }

The vendor bundle excludes all files with .css explicitly.

[alexander-akait]

Use something like this:

test: (m) => {
    const name = module.nameForCondition();
    return /(node_modules|vendors)/.test(name) && !(/\.css$/.test(name)),
}

For vendor group, because you extract to vendor all what inside node_modules

[wind4gis]

Is it necessary to package all the CSS files together?
I think the (cacheGroups>minSize,maxSize) should still need to be configured...
we don't need a large css file...

[Yoomin233]

the reasons i'm doing this is because of the same-domain-concurrent-connection-limit, too many css files(which is loaded before all js files) will delay the loading of subsequent js files...

[Yoomin233]

!(/.css$/.test(name)),

the trailing comma will cause syntax error

[natew]

We extract to atomic css, but also running into this issue. We end up with a bunch of chunks of css with many duplicate styles, which actually degrades runtime perf as well as bundle size, so a bit more than inconvenient... would take a stab at this but webpack plugins are really hard to do right.

[alexander-akait]

@natew because bundling is not easy, can you provide example, I will look at this

[alexander-akait]

For anyone who faced with this porlbem you can use type: "css/mini-extract" instead the test option, it will split chunks only for css/mini-extract

Simple example:

 default: false,
        vendors: false,
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all",
          enforce: true,
        },
        styles: {
          name: "bundle",
          type: "css/mini-extract",
          chunks: "all",
          priority: 100,
          enforce: true,
        },

Docs already uses type: "css/mini-extract", feel free to feedback