From 64d3ba505a794f1a9c7e3837936e037e5baf2e59 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Thu, 15 Dec 2022 20:37:38 +0100
Subject: [PATCH] Hash both pitch and main loader for server CSS imports
 (#44063)

Co-authored-by: Jiachi Liu <inbox@huozhi.im>

This should solve the problem that CSS hash happens before PostCSS
loaders.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## 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`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

Co-authored-by: Jiachi Liu <inbox@huozhi.im>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../loaders/next-flight-css-dev-loader.ts     | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/next/build/webpack/loaders/next-flight-css-dev-loader.ts b/packages/next/build/webpack/loaders/next-flight-css-dev-loader.ts
index 43f994e35b42..fab8a0a8aad8 100644
--- a/packages/next/build/webpack/loaders/next-flight-css-dev-loader.ts
+++ b/packages/next/build/webpack/loaders/next-flight-css-dev-loader.ts
@@ -4,12 +4,16 @@
  * inside a comment.
  */
 
+import crypto from 'crypto'
+
 export function pitch(this: any) {
   if (process.env.NODE_ENV !== 'production') {
     const content = this.fs.readFileSync(this.resourcePath)
-    this.data.__checksum = (
-      typeof content === 'string' ? Buffer.from(content) : content
-    ).toString('hex')
+    this.data.__checksum = crypto
+      .createHash('sha256')
+      .update(typeof content === 'string' ? Buffer.from(content) : content)
+      .digest()
+      .toString('hex')
   }
 }
 
@@ -19,15 +23,23 @@ const NextServerCSSLoader = function (this: any, content: string) {
   // 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 (
-        content +
-        '\nmodule.exports.__checksum = ' +
-        JSON.stringify(this.data.__checksum)
+        content + '\nmodule.exports.__checksum = ' + JSON.stringify(checksum)
       )
     }
 
-    return `export default ${JSON.stringify(this.data.__checksum)}`
+    return `export default ${JSON.stringify(checksum)}`
   }
 
   return content