use official mini-css-extract-plugin and experimentalUseImportModule (#…

…24573)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [ ] Make sure the linting passes

packages/next/build/webpack/config/blocks/css/index.ts

@@ -1,6 +1,6 @@
 import curry from 'next/dist/compiled/lodash.curry'
 import path from 'path'
-import { webpack } from 'next/dist/compiled/webpack/webpack'
+import { webpack, isWebpack5 } from 'next/dist/compiled/webpack/webpack'
 import MiniCssExtractPlugin from '../../../plugins/mini-css-extract-plugin'
 import { loader, plugin } from '../../helpers'
 import { ConfigurationContext, ConfigurationFn, pipe } from '../../utils'
@@ -14,7 +14,7 @@ import {
 import { getPostCssPlugins } from './plugins'
 
 // RegExps for all Style Sheet variants
-const regexLikeCss = /\.(css|scss|sass)$/
+const regexLikeCss = /\.(css|scss|sass)(\.webpack\[javascript\/auto\])?$/
 
 // RegExps for Style Sheets
 const regexCssGlobal = /(?<!\.module)\.css$/
@@ -292,7 +292,12 @@ export const css = curry(async function css(
             // This should only be applied to CSS files
             issuer: regexLikeCss,
             // Exclude extensions that webpack handles by default
-            exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+            exclude: [
+              /\.(js|mjs|jsx|ts|tsx)$/,
+              /\.html$/,
+              /\.json$/,
+              /\.webpack\[[^\]]+\]$/,
+            ],
             use: {
               // `file-loader` always emits a URL reference, where `url-loader`
               // might inline the asset as a data URI
@@ -314,6 +319,7 @@ export const css = curry(async function css(
       plugin(
         // @ts-ignore webpack 5 compat
         new MiniCssExtractPlugin({
+          experimentalUseImportModule: isWebpack5,
           filename: 'static/css/[contenthash].css',
           chunkFilename: 'static/css/[contenthash].css',
           // Next.js guarantees that CSS order "doesn't matter", due to imposed

packages/next/build/webpack/config/blocks/css/loaders/client.ts

@@ -35,6 +35,6 @@ export function getClientStyleLoader({
     : {
         // @ts-ignore: TODO: remove when webpack 5 is stable
         loader: MiniCssExtractPlugin.loader,
-        options: { publicPath: `${assetPrefix}/_next/` },
+        options: { publicPath: `${assetPrefix}/_next/`, esModule: false },
       }
 }

packages/next/build/webpack/plugins/mini-css-extract-plugin.ts

@@ -1,5 +1,5 @@
 // @ts-ignore: TODO: remove when webpack 5 is stable
-import MiniCssExtractPlugin from './mini-css-extract-plugin/src'
+import MiniCssExtractPlugin from 'next/dist/compiled/mini-css-extract-plugin'
 
 export default class NextMiniCssExtractPlugin extends MiniCssExtractPlugin {
   __next_css_remove = true