From d9b82a9535e5d5d4bcd238da7cfd8d1154b7d2de Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Tue, 9 May 2023 18:28:37 +0200
Subject: [PATCH] Fix HMR support for server layer imported SASS and SCSS
 (#49534)

Closes #43396.

https://github.com/vercel/next.js/issues/43396#issuecomment-1538638785
fix NEXT-684
---
 packages/next/src/server/dev/hot-reloader.ts |  2 +-
 test/e2e/app-dir/app-css/index.test.ts       | 53 ++++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/server/dev/hot-reloader.ts b/packages/next/src/server/dev/hot-reloader.ts
index d0cd8b1f6302..c4168f943033 100644
--- a/packages/next/src/server/dev/hot-reloader.ts
+++ b/packages/next/src/server/dev/hot-reloader.ts
@@ -958,7 +958,7 @@ export default class HotReloader {
                       // components are tracked.
                       if (
                         key.startsWith('app/') &&
-                        mod.resource?.endsWith('.css')
+                        /\.(css|scss|sass)$/.test(mod.resource || '')
                       ) {
                         const resourceKey = mod.layer + ':' + mod.resource
                         const prevHash =
diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts
index bebbd67b7d5e..1b92b2aafbeb 100644
--- a/test/e2e/app-dir/app-css/index.test.ts
+++ b/test/e2e/app-dir/app-css/index.test.ts
@@ -649,6 +649,59 @@ createNextDescribe(
             await next.patchFile(filePath, origContent)
           }
         })
+
+        it('should support HMR with sass/scss', async () => {
+          const filePath1 = 'app/css/sass/global.scss'
+          const origContent1 = await next.readFile(filePath1)
+          const filePath2 = 'app/css/sass/global.sass'
+          const origContent2 = await next.readFile(filePath2)
+
+          const browser = await next.browser('/css/sass/inner')
+          // .scss
+          expect(
+            await browser.eval(
+              `window.getComputedStyle(document.querySelector('#scss-server-layout')).color`
+            )
+          ).toBe('rgb(222, 184, 135)')
+          // .sass
+          expect(
+            await browser.eval(
+              `window.getComputedStyle(document.querySelector('#sass-server-layout')).color`
+            )
+          ).toBe('rgb(165, 42, 42)')
+
+          try {
+            await next.patchFile(
+              filePath1,
+              origContent1.replace('color: burlywood;', 'color: red;')
+            )
+            await check(
+              () =>
+                browser.eval(
+                  `window.getComputedStyle(document.querySelector('#scss-server-layout')).color`
+                ),
+              'rgb(255, 0, 0)'
+            )
+          } finally {
+            await next.patchFile(filePath1, origContent1)
+          }
+
+          try {
+            await next.patchFile(
+              filePath2,
+              origContent2.replace('color: brown', 'color: red')
+            )
+            await check(
+              () =>
+                browser.eval(
+                  `window.getComputedStyle(document.querySelector('#sass-server-layout')).color`
+                ),
+              'rgb(255, 0, 0)'
+            )
+          } finally {
+            await next.patchFile(filePath2, origContent2)
+          }
+        })
       }
     })