Dedupe CSS Regexes (#10206)

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

@@ -13,6 +13,11 @@ import {
 } from './messages'
 import { getPostCssPlugins } from './plugins'
 
+// RegExps for Stylesheets
+const regexCssAll = /\.css$/
+const regexCssGlobal = /(?<!\.module)\.css$/
+const regexCssModules = /\.module\.css$/
+
 function getClientStyleLoader({
   isDevelopment,
   assetPrefix,
@@ -106,7 +111,7 @@ export const css = curry(async function css(
     loader({
       oneOf: [
         {
-          test: /\.css$/,
+          test: regexCssAll,
           // Use a loose regex so we don't have to crawl the file system to
           // find the real file name (if present).
           issuer: { test: /pages[\\/]_document\./ },
@@ -133,7 +138,7 @@ export const css = curry(async function css(
           // via the `pure` mode in `css-loader`.
           sideEffects: false,
           // CSS Modules are activated via this specific extension.
-          test: /\.module\.css$/,
+          test: regexCssModules,
           // CSS Modules are only supported in the user's application. We're
           // not yet allowing CSS imports _within_ `node_modules`.
           issuer: {
@@ -191,7 +196,7 @@ export const css = curry(async function css(
     loader({
       oneOf: [
         {
-          test: /\.module\.css$/,
+          test: regexCssModules,
           use: {
             loader: 'error-loader',
             options: {
@@ -206,7 +211,9 @@ export const css = curry(async function css(
   if (ctx.isServer) {
     fns.push(
       loader({
-        oneOf: [{ test: /\.css$/, use: require.resolve('ignore-loader') }],
+        oneOf: [
+          { test: regexCssGlobal, use: require.resolve('ignore-loader') },
+        ],
       })
     )
   } else if (ctx.customAppFile) {
@@ -219,7 +226,7 @@ export const css = curry(async function css(
             // no side-effects.
             // See https://github.com/webpack/webpack/issues/6571
             sideEffects: true,
-            test: /\.css$/,
+            test: regexCssGlobal,
             issuer: { include: ctx.customAppFile },
 
             use: [
@@ -257,7 +264,7 @@ export const css = curry(async function css(
     loader({
       oneOf: [
         {
-          test: /\.css$/,
+          test: regexCssGlobal,
           issuer: { include: [/node_modules/] },
           use: {
             loader: 'error-loader',
@@ -275,7 +282,7 @@ export const css = curry(async function css(
     loader({
       oneOf: [
         {
-          test: /\.css$/,
+          test: regexCssGlobal,
           use: {
             loader: 'error-loader',
             options: {
@@ -298,7 +305,7 @@ export const css = curry(async function css(
         oneOf: [
           {
             // This should only be applied to CSS files
-            issuer: { test: /\.css$/ },
+            issuer: { test: regexCssAll },
             // Exclude extensions that webpack handles by default
             exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
             use: {
@@ -323,12 +330,15 @@ export const css = curry(async function css(
         new MiniCssExtractPlugin({
           filename: 'static/css/[contenthash].css',
           chunkFilename: 'static/css/[contenthash].css',
-          // Next.js guarantees that CSS order doesn't matter, due to imposed
+          // Next.js guarantees that CSS order "doesn't matter", due to imposed
           // restrictions:
           // 1. Global CSS can only be defined in a single entrypoint (_app)
           // 2. CSS Modules generate scoped class names by default and cannot
           //    include Global CSS (:global() selector).
           //
+          // While not a perfect guarantee (e.g. liberal use of `:global()`
+          // selector), this assumption is required to code-split CSS.
+          //
           // If this warning were to trigger, it'd be unactionable by the user,
           // but also not valid -- so we disable it.
           ignoreOrder: true,