The transitive only side effects may cause the effect of option optimization.chunkIds: "deterministic" not to be as expected

[l5oo00]

• Operating System: Mac & LInux
• Node Version: v13.14.0 & v12.16.1
• NPM Version: v6.14.4 & v6.13.4
• webpack Version: v5.11.1
• mini-css-extract-plugin Version: v0.12.0 and above

Expected Behavior

See the final example, npm run build:disable-feature is the expected behavior:

$ npm run build:disable-feature

Right:
    Expect chunkIds: 179 362
    Received chunkIds: 179 362

Actual Behavior

See the final example, npm run build is the actual behavior:

$ npm run build

Wrong:
    Expect chunkIds: 179 362
    Received chunkIds: 179 924

Code

This bug may caused by this feature: #599 .

How Do We Reproduce?

Here is an example repository: https://github.com/l5oo00/demo-for-mini-css-extract-plugin

[l5oo00]

I'm not sure if this bug belongs mini-css-extract-plugin or webpack.

The suspicious code I found in webpack：

• https://github.com/webpack/webpack/blob/v5.12.3/lib/ids/DeterministicChunkIdsPlugin.js#L49
• https://github.com/webpack/webpack/blob/v5.12.3/lib/ids/IdHelpers.js#L194
  • m.identifier() returnd a ientifier starts with "css /", example: "css /context/path/to/root"
• https://github.com/webpack/webpack/blob/v5.12.3/lib/util/identifier.js#L211
• https://github.com/webpack/webpack/blob/v5.12.3/lib/util/identifier.js#L23
  • absoluteToRequest only deals with the case that maybeabsolutepath is an absolute path, when maybeabsolutepath starts with "css ", absoluteToRequest do nothing.

[sokra]

Ok there are two problems here:

1. identifier() should be:

  identifier() {
-   return `css ${this._identifier} ${this._identifierIndex}`;
+   return `css|${this._identifier}|${this._identifierIndex}`;
  }

So that absolute paths can be replaced.

That can be fixed in mini-css-plugin.

2. chunk names and ids are determined from the chunk root modules. The root modules are a set of modules from which all modules of the chunk are reachable. But when some modules in the middle are dropped due to no side effects (like the js part of the css module) the reachability is not correctly determined and the css part is considered as root module, which should not be that way.

This can be fixed in webpack.

When 2. is fixed 1. will no occur that often, but it could still happen in certain splitChunks configurations, which puts the css parts into separate chunks.