Repository: vercel/next.js
Pull request: fix(css): rewrite MiniCssExtractPlugin insert function to ES5 to support legacy browsers

## 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

Changed files:
filename: packages/next/src/build/webpack/config/blocks/css/index.ts
patch: @@ -612,14 +612,25 @@ export const css = curry(async function css(
           ignoreOrder: true,
           insert: function (linkTag: HTMLLinkElement) {
             if (typeof _N_E_STYLE_LOAD === 'function') {
-              const { href, onload, onerror } = linkTag
+              // Avoid destructuring and optional-chaining here: this function
+              // is serialized as a string by mini-css-extract-plugin and
+              // injected directly into the browser bundle without further
+              // transpilation. Destructuring (`const { x } = obj`) breaks on
+              // browsers that pre-date ES2015 support (e.g. Chrome <49).
+              var href = linkTag.href
+              var onload = linkTag.onload
+              var onerror = linkTag.onerror
               _N_E_STYLE_LOAD(
                 href.indexOf(window.location.origin) === 0
                   ? new URL(href).pathname
                   : href
               ).then(
-                () => onload?.call(linkTag, { type: 'load' } as Event),
-                () => onerror?.call(linkTag, {} as Event)
+                function () {
+                  if (onload) onload.call(linkTag, { type: 'load' } as Event)
+                },
+                function () {
+                  if (onerror) onerror.call(linkTag, {} as Event)
+                }
               )
             } else {
               document.head.appendChild(linkTag)