fix(css): rewrite MiniCssExtractPlugin insert function to ES5 to support legacy browsers (#90556)
## What?
Rewrite the `insert` function passed to `MiniCssExtractPlugin` in
`packages/next/src/build/webpack/config/blocks/css/index.ts` to use only
ES5-compatible syntax.
## Why?
The `insert` option of `mini-css-extract-plugin` serialises the function
via `Function#toString()` and injects the resulting string directly into
the webpack runtime chunk. This string **bypasses all subsequent
transpilation** — it is not processed by Babel/SWC, and is not subject
to the project's `browserslist` or `output.environment` webpack config.
The current function contains:
```js
const { href, onload, onerror } = linkTag // ES2015 destructuring
onload?.call(linkTag, ...) // ES2020 optional chaining
```
When the project targets legacy browsers (e.g. `chrome >= 45`) pages
crash on load with:
> **Unexpected token {**
before any CSS has been applied.
## How?
Replace the destructuring with individual `var` declarations and replace
optional chaining with explicit `if` null-checks:
**Before:**
```js
const { href, onload, onerror } = linkTag
// ...
() => onload?.call(linkTag, { type: 'load' } as Event),
() => onerror?.call(linkTag, {} as Event)
```
**After:**
```js
var href = linkTag.href
var onload = linkTag.onload
var onerror = linkTag.onerror
// ...
function () { if (onload) onload.call(linkTag, { type: 'load' } as Event) },
function () { if (onerror) onerror.call(linkTag, {} as Event) }
```
Runtime behavior is identical in all environments. The `var` style was
intentionally chosen (over splitting `const` declarations) since
`no-var` is disabled in the project ESLint config.
Fixes #90518
Co-authored-by: sleitor <sleitor@users.noreply.github.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
next.js
ae9c9d6c - fix(css): rewrite MiniCssExtractPlugin insert function to ES5 to support legacy browsers (#90556)
