next-flight-css-loader - fix !=! support

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

@@ -258,7 +258,14 @@ export const css = curry(async function css(
               test: regexCssModules,
               issuerLayer: APP_LAYER_RULE,
               use: [
-                require.resolve('../../../loaders/next-flight-css-loader'),
+                {
+                  loader: require.resolve(
+                    '../../../loaders/next-flight-css-loader'
+                  ),
+                  options: {
+                    cssModules: true,
+                  },
+                },
                 ...getCssModuleLoader(
                   { ...ctx, isAppDir: true },
                   lazyPostCSSInitializer
@@ -291,7 +298,14 @@ export const css = curry(async function css(
               test: regexSassModules,
               issuerLayer: APP_LAYER_RULE,
               use: [
-                require.resolve('../../../loaders/next-flight-css-loader'),
+                {
+                  loader: require.resolve(
+                    '../../../loaders/next-flight-css-loader'
+                  ),
+                  options: {
+                    cssModules: true,
+                  },
+                },
                 ...getCssModuleLoader(
                   { ...ctx, isAppDir: true },
                   lazyPostCSSInitializer,
@@ -338,7 +352,14 @@ export const css = curry(async function css(
                 sideEffects: true,
                 test: [regexCssGlobal, regexSassGlobal],
                 issuerLayer: APP_LAYER_RULE,
-                use: require.resolve('../../../loaders/next-flight-css-loader'),
+                use: {
+                  loader: require.resolve(
+                    '../../../loaders/next-flight-css-loader'
+                  ),
+                  options: {
+                    cssModules: false,
+                  },
+                },
               })
             : null,
           markRemovable({
@@ -389,7 +410,14 @@ export const css = curry(async function css(
                   test: regexCssGlobal,
                   issuerLayer: APP_LAYER_RULE,
                   use: [
-                    require.resolve('../../../loaders/next-flight-css-loader'),
+                    {
+                      loader: require.resolve(
+                        '../../../loaders/next-flight-css-loader'
+                      ),
+                      options: {
+                        cssModules: false,
+                      },
+                    },
                     ...getGlobalCssLoader(
                       { ...ctx, isAppDir: true },
                       lazyPostCSSInitializer
@@ -401,7 +429,14 @@ export const css = curry(async function css(
                   test: regexSassGlobal,
                   issuerLayer: APP_LAYER_RULE,
                   use: [
-                    require.resolve('../../../loaders/next-flight-css-loader'),
+                    {
+                      loader: require.resolve(
+                        '../../../loaders/next-flight-css-loader'
+                      ),
+                      options: {
+                        cssModules: false,
+                      },
+                    },
                     ...getGlobalCssLoader(
                       { ...ctx, isAppDir: true },
                       lazyPostCSSInitializer,

packages/next/src/build/webpack/loaders/next-flight-css-loader.ts

@@ -5,52 +5,56 @@
  */
 
 import crypto from 'crypto'
+import type webpack from 'webpack'
 
-export function pitch(this: any) {
-  if (process.env.NODE_ENV !== 'production') {
-    const content = this.fs.readFileSync(this.resourcePath)
-    this.data.__checksum = crypto
-      .createHash('sha256')
-      .update(typeof content === 'string' ? Buffer.from(content) : content)
-      .digest()
-      .toString('hex')
-  }
+type NextServerCSSLoaderOptions = {
+  cssModules: boolean
 }
 
-const NextServerCSSLoader = function (this: any, content: string) {
-  this.cacheable && this.cacheable()
-
-  // Only add the checksum during development.
-  if (process.env.NODE_ENV !== 'production') {
-    const isCSSModule = this.resourcePath.match(/\.module\.(css|sass|scss)$/)
-    const checksum = crypto
-      .createHash('sha256')
-      .update(
-        this.data.__checksum +
-          (typeof content === 'string' ? Buffer.from(content) : content)
-      )
-      .digest()
-      .toString('hex')
-      .substring(0, 12)
-
-    if (isCSSModule) {
-      return `\
+const NextServerCSSLoader: webpack.LoaderDefinitionFunction<NextServerCSSLoaderOptions> =
+  function (content) {
+    this.cacheable && this.cacheable()
+    const options = this.getOptions()
+    let isCSSModule = options.cssModules
+
+    // Only add the checksum during development.
+    if (process.env.NODE_ENV !== 'production') {
+      // This check is only for backwards compatibility.
+      // TODO: Remove this in the next major version (next 14)
+      if (isCSSModule === undefined) {
+        this.emitWarning(
+          new Error(
+            "No 'cssModules' option was found for the next-flight-css-loader plugin."
+          )
+        )
+        isCSSModule =
+          this.resourcePath.match(/\.module\.(css|sass|scss)$/) !== null
+      }
+      const checksum = crypto
+        .createHash('sha256')
+        .update(typeof content === 'string' ? Buffer.from(content) : content)
+        .digest()
+        .toString('hex')
+        .substring(0, 12)
+
+      if (isCSSModule) {
+        return `\
 ${content}
 module.exports.__checksum = ${JSON.stringify(checksum)}
 `
-    }
+      }
 
-    // Server CSS imports are always available for HMR, so we attach
-    // `module.hot.accept()` to the generated module.
-    const hmrCode = 'if (module.hot) { module.hot.accept() }'
+      // Server CSS imports are always available for HMR, so we attach
+      // `module.hot.accept()` to the generated module.
+      const hmrCode = 'if (module.hot) { module.hot.accept() }'
 
-    return `\
+      return `\
 export default ${JSON.stringify(checksum)}
 ${hmrCode}
 `
-  }
+    }
 
-  return content
-}
+    return content
+  }
 
 export default NextServerCSSLoader