Disable New CSS For Sass, Less, and Stylus (vercel#10043)

Timer · ijjk · commit a7a924f2a48a · 2020-01-10T15:07:06.000-06:00
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -865,18 +865,31 @@ export default async function getBaseWebpackConfig(
       return false
     }
 
-    const fileName = '/tmp/test.css'
-
-    if (rule instanceof RegExp && rule.test(fileName)) {
+    const fileNames = [
+      '/tmp/test.css',
+      '/tmp/test.scss',
+      '/tmp/test.sass',
+      '/tmp/test.less',
+      '/tmp/test.styl',
+    ]
+
+    if (rule instanceof RegExp && fileNames.some(input => rule.test(input))) {
       return true
     }
 
     if (typeof rule === 'function') {
-      try {
-        if (rule(fileName)) {
-          return true
-        }
-      } catch (_) {}
+      if (
+        fileNames.some(input => {
+          try {
+            if (rule(input)) {
+              return true
+            }
+          } catch (_) {}
+          return false
+        })
+      ) {
+        return true
+      }
     }
 
     if (Array.isArray(rule) && rule.some(canMatchCss)) {
@@ -888,10 +901,9 @@ export default async function getBaseWebpackConfig(
 
   if (config.experimental.css) {
     const hasUserCssConfig =
-      webpackConfig.module &&
-      webpackConfig.module.rules.some(
+      webpackConfig.module?.rules.some(
         rule => canMatchCss(rule.test) || canMatchCss(rule.include)
-      )
+      ) ?? false
 
     if (hasUserCssConfig) {
       if (webpackConfig.module?.rules.length) {
diff --git a/test/integration/legacy-sass/next.config.js b/test/integration/legacy-sass/next.config.js
@@ -0,0 +1,2 @@
+const withSass = require('@zeit/next-sass')
+module.exports = withSass({})
diff --git a/test/integration/legacy-sass/pages/index.js b/test/integration/legacy-sass/pages/index.js
@@ -0,0 +1,3 @@
+import '../styles/style.scss'
+
+export default () => <div className="example">Hello World!</div>
diff --git a/test/integration/legacy-sass/styles/style.scss b/test/integration/legacy-sass/styles/style.scss
@@ -0,0 +1,4 @@
+$color: #2ecc71;
+.example {
+  background-color: $color;
+}
diff --git a/test/integration/legacy-sass/test/index.test.js b/test/integration/legacy-sass/test/index.test.js
@@ -0,0 +1,26 @@
+/* eslint-env jest */
+/* global jasmine */
+import { remove } from 'fs-extra'
+import { nextBuild } from 'next-test-utils'
+import { recursiveReadDir } from 'next/dist/lib/recursive-readdir'
+import { join } from 'path'
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 1
+
+const appDir = join(__dirname, '../')
+
+describe('Legacy Sass Support Should Disable New CSS', () => {
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+    await nextBuild(appDir)
+  })
+
+  it(`should've emitted a single CSS file`, async () => {
+    const cssFiles = await recursiveReadDir(
+      join(appDir, '.next', 'static'),
+      /\.css$/
+    )
+
+    expect(cssFiles.length).toBe(1)
+  })
+})

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+const withSass = require('@zeit/next-sass')`
	`2`	`+module.exports = withSass({})`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import '../styles/style.scss'`
	`2`	`+`
	`3`	`+export default () => <div className="example">Hello World!</div>`