Fix HMR support for server layer imported SASS and SCSS (#49534)

Closes #43396. #43396 (comment) fix NEXT-684
vercel · May 9, 2023 · d9b82a9 · d9b82a9
1 parent 881d202
commit d9b82a9
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 1 deletion.
diff --git 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
@@ -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)
+          }
+        })
       }
     })