Fix preprocessor loader error (#10235)

* Run resolve-url-loader after sass-loader

* Add regression test

* Update test to match

* Revert global.ts

* Make `preProcessors` readonly
Co-authored-by: NJoe Haddad <timer150@gmail.com>

packages/next/build/webpack/config/blocks/css/loaders/global.ts

@@ -5,8 +5,8 @@ import { getClientStyleLoader } from './client'
 
 export function getGlobalCssLoader(
   ctx: ConfigurationContext,
-  postCssPlugins: postcss.AcceptedPlugin[],
-  preProcessors: webpack.RuleSetUseItem[] = []
+  postCssPlugins: readonly postcss.AcceptedPlugin[],
+  preProcessors: readonly webpack.RuleSetUseItem[] = []
 ): webpack.RuleSetUseItem[] {
   const loaders: webpack.RuleSetUseItem[] = []
 
@@ -40,7 +40,7 @@ export function getGlobalCssLoader(
   loaders.push(
     // Webpack loaders run like a stack, so we need to reverse the natural
     // order of preprocessors.
-    ...preProcessors.reverse()
+    ...preProcessors.slice().reverse()
   )
 
   return loaders

packages/next/build/webpack/config/blocks/css/loaders/modules.ts

@@ -6,8 +6,8 @@ import { getCssModuleLocalIdent } from './getCssModuleLocalIdent'
 
 export function getCssModuleLoader(
   ctx: ConfigurationContext,
-  postCssPlugins: postcss.AcceptedPlugin[],
-  preProcessors: webpack.RuleSetUseItem[] = []
+  postCssPlugins: readonly postcss.AcceptedPlugin[],
+  preProcessors: readonly webpack.RuleSetUseItem[] = []
 ): webpack.RuleSetUseItem[] {
   const loaders: webpack.RuleSetUseItem[] = []
 
@@ -56,7 +56,7 @@ export function getCssModuleLoader(
   loaders.push(
     // Webpack loaders run like a stack, so we need to reverse the natural
     // order of preprocessors.
-    ...preProcessors.reverse()
+    ...preProcessors.slice().reverse()
   )
 
   return loaders

test/integration/scss-fixtures/loader-order/pages/_app.js

+import React from 'react'
+import App from 'next/app'
+import '../styles/global.scss'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/scss-fixtures/loader-order/pages/index.js

+export default function Home() {
+  return <div className="red-text">This text should be red.</div>
+}

test/integration/scss-fixtures/loader-order/styles/global.scss

+// Double forward slash comment
+
+$var: red;
+.red-text {
+  color: $var;
+}

test/integration/scss/test/index.test.js

@@ -745,6 +745,21 @@ describe('SCSS Support', () => {
     })
   })
 
+  describe('Preprocessor loader order', () => {
+    const appDir = join(fixturesDir, 'loader-order')
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should compile successfully', async () => {
+      const { stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+  })
+
   describe('Ordering with styled-jsx (dev)', () => {
     const appDir = join(fixturesDir, 'with-styled-jsx')