Handle css-loader file resolving change (#17724)

This is a follow-up to #16973 which adds handling for the breaking change in the latest version of css-loader that causes unresolved file references in `url` or `import` to cause the build to fail. This fixes it by adding our own resolve checking and when it fails disabling the `css-loader`'s handling of it. 

Fixes: #17701

Author: ijjk

packages/next/build/webpack/config/blocks/css/loaders/file-resolve.ts

@@ -0,0 +1,6 @@
+export function cssFileResolve(url: string, _resourcePath: string) {
+  if (url.startsWith('/')) {
+    return false
+  }
+  return true
+}

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

@@ -2,6 +2,7 @@ import postcss from 'postcss'
 import webpack from 'webpack'
 import { ConfigurationContext } from '../../../utils'
 import { getClientStyleLoader } from './client'
+import { cssFileResolve } from './file-resolve'
 
 export function getGlobalCssLoader(
   ctx: ConfigurationContext,
@@ -29,6 +30,9 @@ export function getGlobalCssLoader(
       sourceMap: true,
       // Next.js controls CSS Modules eligibility:
       modules: false,
+      url: cssFileResolve,
+      import: (url: string, _: any, resourcePath: string) =>
+        cssFileResolve(url, resourcePath),
     },
   })
 

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

@@ -2,6 +2,7 @@ import postcss from 'postcss'
 import webpack from 'webpack'
 import { ConfigurationContext } from '../../../utils'
 import { getClientStyleLoader } from './client'
+import { cssFileResolve } from './file-resolve'
 import { getCssModuleLocalIdent } from './getCssModuleLocalIdent'
 
 export function getCssModuleLoader(
@@ -30,6 +31,9 @@ export function getCssModuleLoader(
       sourceMap: true,
       // Use CJS mode for backwards compatibility:
       esModule: false,
+      url: cssFileResolve,
+      import: (url: string, _: any, resourcePath: string) =>
+        cssFileResolve(url, resourcePath),
       modules: {
         // Do not transform class names (CJS mode backwards compatibility):
         exportLocalsConvention: 'asIs',

test/integration/css-fixtures/unresolved-css-url/global.css

@@ -0,0 +1,31 @@
+p {
+  background-image: url('/vercel.svg');
+}
+
+p:nth-child(1) {
+  background-image: url(/vercel.svg);
+}
+
+/* p:nth-child(2) {
+  background-image: url('./vercel.svg');
+}
+
+p:nth-child(3) {
+  background-image: url(./vercel.svg);
+} */
+
+p:nth-child(4) {
+  background-image: url('./public/vercel.svg');
+}
+
+p:nth-child(5) {
+  background-image: url(./public/vercel.svg);
+}
+
+div {
+  background-image: url('https://vercel.com/vercel.svg');
+}
+
+div:nth-child(1) {
+  background-image: url('https://vercel.com/vercel.svg');
+}

test/integration/css-fixtures/unresolved-css-url/global.scss

@@ -0,0 +1,31 @@
+.p {
+  background-image: url('/vercel.svg');
+}
+
+.p:nth-child(1) {
+  background-image: url(/vercel.svg);
+}
+
+// .p:nth-child(2) {
+//   background-image: url('./vercel.svg');
+// }
+
+// .p:nth-child(3) {
+//   background-image: url(./vercel.svg);
+// }
+
+p:nth-child(4) {
+  background-image: url('./public/vercel.svg');
+}
+
+p:nth-child(5) {
+  background-image: url(./public/vercel.svg);
+}
+
+.div {
+  background-image: url('https://vercel.com/vercel.svg');
+}
+
+.div:nth-child(1) {
+  background-image: url('https://vercel.com/vercel.svg');
+}

test/integration/css-fixtures/unresolved-css-url/pages/_app.js

@@ -0,0 +1,6 @@
+import '../global.css'
+import '../global.scss'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}

test/integration/css-fixtures/unresolved-css-url/pages/another.js

@@ -0,0 +1,5 @@
+import styles from './another.module.scss'
+
+export default function Page() {
+  return <p className={styles.first}>Hello from index</p>
+}

test/integration/css-fixtures/unresolved-css-url/pages/another.module.scss

@@ -0,0 +1,31 @@
+.first {
+  background-image: url('/vercel.svg');
+}
+
+.first:nth-child(1) {
+  background-image: url(/vercel.svg);
+}
+
+// .first:nth-child(2) {
+//   background-image: url('./vercel.svg');
+// }
+
+// .first:nth-child(3) {
+//   background-image: url(./vercel.svg);
+// }
+
+.first:nth-child(4) {
+  background-image: url('../public/vercel.svg');
+}
+
+.first:nth-child(5) {
+  background-image: url(../public/vercel.svg);
+}
+
+.another {
+  background-image: url('https://vercel.com/vercel.svg');
+}
+
+.another:nth-child(1) {
+  background-image: url('https://vercel.com/vercel.svg');
+}

test/integration/css-fixtures/unresolved-css-url/pages/index.js

@@ -0,0 +1,5 @@
+import styles from './index.module.css'
+
+export default function Page() {
+  return <p className={styles.first}>Hello from index</p>
+}

test/integration/css-fixtures/unresolved-css-url/pages/index.module.css

@@ -0,0 +1,31 @@
+.first {
+  background-image: url('/vercel.svg');
+}
+
+.first:nth-child(1) {
+  background-image: url(/vercel.svg);
+}
+
+/* .first:nth-child(2) {
+  background-image: url('./vercel.svg');
+}
+
+.first:nth-child(3) {
+  background-image: url(./vercel.svg);
+} */
+
+.first:nth-child(4) {
+  background-image: url('../public/vercel.svg');
+}
+
+.first:nth-child(5) {
+  background-image: url(../public/vercel.svg);
+}
+
+.another {
+  background-image: url('https://vercel.com/vercel.svg');
+}
+
+.another:nth-child(1) {
+  background-image: url('https://vercel.com/vercel.svg');
+}