fix(deps): update dependency mini-css-extract-plugin to v2

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
mini-css-extract-plugin	^1.6.2 -> ^2.6.0

---

Release Notes

webpack-contrib/mini-css-extract-plugin

v2.6.0

Compare Source

Features

• added baseUri option support (from entry options) (#​915) (6004d95)

2.5.3 (2022-01-25)

Bug Fixes

• types (#​903) (6650691)

2.5.2 (2022-01-17)

Bug Fixes

• types (dfb9afd)

2.5.1 (2022-01-17)

Bug Fixes

• cjs export and types (e836a00)

v2.5.3

Compare Source

v2.5.2

Compare Source

v2.5.1

Compare Source

v2.5.0

Compare Source

Features

• added types (5b5654c)

2.4.7 (2022-01-13)

Bug Fixes

• multiple serializer registrations (#​894) (c784204)

2.4.6 (2022-01-06)

Bug Fixes

• crash when publicPath is function (#​881) (41bd828)
• do not allow absolute path in the chunkFilename option (#​879) (36e04ab)
• do not allow absolute path in the filename option (#​878) (76361df)

2.4.5 (2021-11-17)

Chore

• update schema-utils package to 4.0.0 version

2.4.4 (2021-11-04)

Bug Fixes

• crash with [contenthash] (#​869) (57ad127)
• runtime path in modules without context (#​866) (e2e30b2)

2.4.3 (2021-10-21)

Bug Fixes

• small perf improvement (#​860) (8c4846b)

2.4.2 (2021-10-07)

Bug Fixes

• endless apply of loaders, leading to memory allocation failure (#​849) (94ad699)

2.4.1 (2021-10-05)

Bug Fixes

• crash with multiple webpack versions (#​845) (b4431cb)

v2.4.7

Compare Source

v2.4.6

Compare Source

v2.4.5

Compare Source

v2.4.4

Compare Source

v2.4.3

Compare Source

v2.4.2

Compare Source

v2.4.1

Compare Source

v2.4.0

Compare Source

Performance

• migrate on new API, this improves performance and memory usage a lot, you need to have at least webpack 5.52.0 (recommended latest stable), for older versions the old API will be used (except explicit enabling of the experimentalUseImportModule option)

Features

• added support for supports() and layer() in @import at-rule (#​843) (e751080)

Bug Fixes

• crash with the exportLocalsConvention option (#​844) (0f8d501)

v2.3.0

Compare Source

Features

• added the runtime option (#​831) (5cc73e6)

Bug Fixes

• better description for async chunk options (34b65ac)

2.2.2 (2021-09-01)

Bug Fixes

• experimentalUseImportModule works with new URL(...) syntax (cf81c4b)

2.2.1 (2021-08-31)

Bug Fixes

• order of @import with the output.pathinfo option (#​815) (831f771)
• source map generation with the output.pathinfo option (#​817) (f813b4c)

v2.2.2

Compare Source

v2.2.1

Compare Source

v2.2.0

Compare Source

Features

• add link and description for options (#​786) (3c5a5b7)

Bug Fixes

• hmr in browser extension (3d09da1)

v2.1.0

Compare Source

Features

• support the pathinfo option (#​783) (a37713f)

v2.0.0

Compare Source

NOTES

In the current release we have fixed many problems with publicPath, previously to generate relative URLs inside CSS files developers use different hacks: publicPath: '', publicPath: '../', using relative ../../ in the outputPath option for file-loader and etc. Now you don't need it anymore. Webpack v5 uses publicPath: "auto" by default, which means to always generate relative URLs, and now mini-css-extract-plugin does the same.

We strongly recommend use auto value by default (except when using CDN).

We also want to show you that the file-loader and url-loader are outdated, please migrate on Asset Modules.

⚠ BREAKING CHANGES

• minimum supported Node.js version is 12.13.0
• minimum supported webpack version is 5.0.0
• the modules.namedExport option was removed, you don't need it anymore, because we respect the modules.namedExport option from css-loader, just remove it
• the publicPath option no longer automatically adds / (trailing slash), you need to specify, you need to specify it yourself if it is absent, i.e. if you have publicPath: "/my/public/path" replace it with publicPath: "/my/public/path/"

Bug Fixes

• generating correct relative url() for assets inside CSS files when you use publicPath: "auto" (default value)

1.6.2 (2021-06-28)

Bug Fixes

• performance improvement

1.6.1 (2021-06-25)

Bug Fixes

• memory leaks (c68aca7)

---

Configuration

📅 Schedule: "on the first day of the month" in timezone America/Los_Angeles.

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, click this checkbox.

---

This PR has been generated by WhiteSource Renovate. View repository job log here.

[matticbot]

This PR modifies the release build for wpcom-block-editor

To test your changes on WordPress.com, run install-plugin.sh wpcom-block-editor renovate/mini-css-extract-plugin-2.x on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-l4k-p2

[matticbot]

Link to live branch is being generated...
Please wait a few minutes and refresh this page.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~194 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-main                  -482 B  (-0.0%)     -194 B  (-0.1%)
entry-login                 -482 B  (-0.1%)     -194 B  (-0.1%)
entry-gutenboarding         -482 B  (-0.0%)     -194 B  (-0.0%)
entry-domains-landing       -482 B  (-0.1%)     -194 B  (-0.1%)
entry-browsehappy           -482 B  (-0.5%)     -194 B  (-0.7%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[scinos]

This was failing because RequireChunkCallback plugin.

The plugin in build-tools/webpack/require-chunk-callback-plugin.js injects extra runtime code, and this code includes window.__requireChunkCallback__. I don't know why, but after updating mini-css-extract-plugin, this injected code is evaluated at build time. It fails because Node sees window.__requireChunkCallback__ and throws because window doesn't exists.

I've protected it under an if to make sure window exists, but I'm not 100% convinced it's the right solution. I don't understand why this is failing now to be honest.

[jsnajdr]

The updated mini-css-extract-plugin has a new experimental option, experimentalUseImportModule, that indeed executes the built modules for some reason. I found this PR: webpack-contrib/mini-css-extract-plugin#737

But the option should be false by default, I don't understand why module execution is suddenly happening for us.

[jsnajdr]

So, how the experimentalUseImportModule option works is that if it's undefined, the mini-css loader will use the new module execution if the new API (this.importModule) is passed from above by a sufficiently new version of webpack:

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/loader.js#L194-L196

To disable it, we'd need to configure the mini-css loader with an explicit experimentalUseImportModule: false.

Another option is to solve the non-existent window object. Either by wrapping it in an if, like @scinos did, or using globalThis instead of window in the code generated by require-chunk-callback-plugin.

[scinos]

I did some local tests and looks like the build process got 10 to 15s faster with this new version (I assume the savings come from the new experimentalUseImportModule feature).

trunk

<i> [webpack.Progress]  | 171 ms building > entries dependencies modules
<i> [webpack.Progress]  | 15 ms building > import loader ../node_modules/thread-loader/dist/cjs.js
<i> [webpack.Progress]  | 138 ms building > import loader ../node_modules/babel-loader/lib/index.js
<w> [webpack.Progress]  | 2239 ms building > entries dependencies modules
<i> [webpack.Progress]  | 11 ms building > import loader ../node_modules/mini-css-extract-plugin/dist/loader.js
<i> [webpack.Progress]  | 93 ms building > import loader ../node_modules/css-loader/dist/cjs.js
<i> [webpack.Progress]  | 11 ms building > import loader ../node_modules/postcss-loader/dist/cjs.js
<e> [webpack.Progress]  | 10302 ms building > entries dependencies modules
<e> [webpack.Progress]  | 122944 ms building > entries dependencies modules
<e> [webpack.Progress] 135938 ms building

this branch

<i> [webpack.Progress]  | 108 ms building > entries dependencies modules
<i> [webpack.Progress]  | 24 ms building > import loader ../node_modules/thread-loader/dist/cjs.js
<i> [webpack.Progress]  | 329 ms building > import loader ../node_modules/babel-loader/lib/index.js
<w> [webpack.Progress]  | 2687 ms building > entries dependencies modules
<i> [webpack.Progress]  | 49 ms building > import loader ../node_modules/css-loader/dist/cjs.js
<i> [webpack.Progress]  | 15 ms building > import loader ../node_modules/postcss-loader/dist/cjs.js
<w> [webpack.Progress]  | 6138 ms building > entries dependencies modules
<i> [webpack.Progress]  | 20 ms building > import loader ../build-tools/webpack/sections-loader.js
<e> [webpack.Progress]  | 112903 ms building > entries dependencies modules
<e> [webpack.Progress] 122285 ms building

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit renovate/mini-css-extract-plugin-2.x on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2