From 435b7d464cae9b5a810dc2d08bfba870306114fb Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Sun, 11 Jun 2023 06:19:40 +0200 Subject: [PATCH 1/2] next-flight-css-loader - fix !=! support --- .../build/webpack/config/blocks/css/index.ts | 45 ++++++++-- .../webpack/loaders/next-flight-css-loader.ts | 88 ++++++++++++------- 2 files changed, 94 insertions(+), 39 deletions(-) diff --git a/packages/next/src/build/webpack/config/blocks/css/index.ts b/packages/next/src/build/webpack/config/blocks/css/index.ts index 66639d483f332..1647db4515867 100644 --- a/packages/next/src/build/webpack/config/blocks/css/index.ts +++ b/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, diff --git a/packages/next/src/build/webpack/loaders/next-flight-css-loader.ts b/packages/next/src/build/webpack/loaders/next-flight-css-loader.ts index 962da478738dc..2883466c0cdd7 100644 --- a/packages/next/src/build/webpack/loaders/next-flight-css-loader.ts +++ b/packages/next/src/build/webpack/loaders/next-flight-css-loader.ts @@ -5,52 +5,72 @@ */ 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') +export const pitch: webpack.PitchLoaderDefinitionFunction = + function () { + if (process.env.NODE_ENV !== 'production') { + // @ts-expect-error TODO: Should we use readFile instead? + 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 = + 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( + this.data.__checksum + + (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 From 3803ae144e2ea41b073daef640dc2cda7a6215c0 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Tue, 4 Jul 2023 17:38:12 +0200 Subject: [PATCH 2/2] delete pitch loader --- .../webpack/loaders/next-flight-css-loader.ts | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/packages/next/src/build/webpack/loaders/next-flight-css-loader.ts b/packages/next/src/build/webpack/loaders/next-flight-css-loader.ts index 2883466c0cdd7..eb177c4887f89 100644 --- a/packages/next/src/build/webpack/loaders/next-flight-css-loader.ts +++ b/packages/next/src/build/webpack/loaders/next-flight-css-loader.ts @@ -7,19 +7,6 @@ import crypto from 'crypto' import type webpack from 'webpack' -export const pitch: webpack.PitchLoaderDefinitionFunction = - function () { - if (process.env.NODE_ENV !== 'production') { - // @ts-expect-error TODO: Should we use readFile instead? - 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 } @@ -45,10 +32,7 @@ const NextServerCSSLoader: webpack.LoaderDefinitionFunction