use loader-utils 2 for resolve-url-loader to fix ./data: urls in sa…

…ss (#31134)

upgrade to loader-utils 3.1.2 for hash fix

fixes #31016
fixes #30998

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

@@ -1,4 +1,4 @@
-import loaderUtils from 'next/dist/compiled/loader-utils'
+import loaderUtils from 'next/dist/compiled/loader-utils3'
 import path from 'path'
 import { webpack } from 'next/dist/compiled/webpack/webpack'
 

packages/next/build/webpack/loaders/css-loader/src/utils.js

@@ -5,7 +5,7 @@
 import { fileURLToPath } from 'url'
 import path from 'path'
 
-import { urlToRequest } from 'next/dist/compiled/loader-utils'
+import { urlToRequest } from 'next/dist/compiled/loader-utils3'
 import modulesValues from 'next/dist/compiled/postcss-modules-values'
 import localByDefault from 'next/dist/compiled/postcss-modules-local-by-default'
 import extractImports from 'next/dist/compiled/postcss-modules-extract-imports'

packages/next/build/webpack/loaders/next-image-loader.js

@@ -1,4 +1,4 @@
-import loaderUtils from 'next/dist/compiled/loader-utils'
+import loaderUtils from 'next/dist/compiled/loader-utils3'
 import { resizeImage, getImageSize } from '../../../server/image-optimizer'
 
 const BLUR_IMG_SIZE = 8

packages/next/build/webpack/plugins/copy-file-plugin.ts

@@ -1,5 +1,5 @@
 import { promises as fs } from 'fs'
-import loaderUtils from 'next/dist/compiled/loader-utils'
+import loaderUtils from 'next/dist/compiled/loader-utils3'
 import { sources, webpack } from 'next/dist/compiled/webpack/webpack'
 
 const PLUGIN_NAME = 'CopyFilePlugin'

packages/next/compiled/loader-utils2/package.json

@@ -0,0 +1 @@
+{"name":"loader-utils","main":"index.js","author":"Tobias Koppers @sokra","license":"MIT"}

packages/next/compiled/loader-utils3/LICENSE

@@ -0,0 +1,20 @@
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/next/compiled/loader-utils3/package.json

@@ -0,0 +1 @@
+{"name":"loader-utils","main":"index.js","author":"Tobias Koppers @sokra","license":"MIT"}

packages/next/package.json

@@ -224,7 +224,8 @@
     "is-wsl": "2.2.0",
     "json5": "2.2.0",
     "jsonwebtoken": "8.5.1",
-    "loader-utils": "3.1.0",
+    "loader-utils2": "npm:loader-utils@2.0.0",
+    "loader-utils3": "npm:loader-utils@3.1.3",
     "lodash.curry": "4.1.1",
     "lru-cache": "5.1.1",
     "micromatch": "4.0.4",

packages/next/taskfile.js

@@ -356,12 +356,21 @@ export async function ncc_jsonwebtoken(task, opts) {
     .target('compiled/jsonwebtoken')
 }
 // eslint-disable-next-line camelcase
-externals['loader-utils'] = 'next/dist/compiled/loader-utils'
-export async function ncc_loader_utils(task, opts) {
+externals['loader-utils'] = 'error loader-utils version not specified'
+externals['loader-utils2'] = 'next/dist/compiled/loader-utils2'
+export async function ncc_loader_utils2(task, opts) {
   await task
-    .source(opts.src || 'bundles/loader-utils.js')
-    .ncc({ packageName: 'loader-utils', externals })
-    .target('compiled/loader-utils')
+    .source(opts.src || relative(__dirname, require.resolve('loader-utils2')))
+    .ncc({ packageName: 'loader-utils2', externals })
+    .target('compiled/loader-utils2')
+}
+// eslint-disable-next-line camelcase
+externals['loader-utils3'] = 'next/dist/compiled/loader-utils3'
+export async function ncc_loader_utils3(task, opts) {
+  await task
+    .source(opts.src || relative(__dirname, require.resolve('loader-utils3')))
+    .ncc({ packageName: 'loader-utils3', externals })
+    .target('compiled/loader-utils3')
 }
 // eslint-disable-next-line camelcase
 externals['lodash.curry'] = 'next/dist/compiled/lodash.curry'
@@ -613,7 +622,13 @@ export async function ncc_resolve_url_loader(task, opts) {
     .source(
       opts.src || relative(__dirname, require.resolve('resolve-url-loader'))
     )
-    .ncc({ packageName: 'resolve-url-loader', externals })
+    .ncc({
+      packageName: 'resolve-url-loader',
+      externals: {
+        ...externals,
+        'loader-utils': externals['loader-utils2'], // actually loader-utils@1 but that is compatible
+      },
+    })
     .target('compiled/resolve-url-loader')
 }
 // eslint-disable-next-line camelcase
@@ -631,6 +646,7 @@ export async function ncc_sass_loader(task, opts) {
       externals: {
         ...externals,
         'schema-utils': externals['schema-utils3'],
+        'loader-utils': externals['loader-utils2'],
       },
       target: 'es5',
     })
@@ -958,7 +974,8 @@ export async function ncc(task, opts) {
         'ncc_is_wsl',
         'ncc_json5',
         'ncc_jsonwebtoken',
-        'ncc_loader_utils',
+        'ncc_loader_utils2',
+        'ncc_loader_utils3',
         'ncc_lodash_curry',
         'ncc_lru_cache',
         'ncc_nanoid',

packages/next/types/webpack.d.ts

@@ -24,7 +24,7 @@
 /// <reference types="node" />
 
 declare module 'mini-css-extract-plugin'
-declare module 'next/dist/compiled/loader-utils'
+declare module 'next/dist/compiled/loader-utils3'
 
 declare module 'next/dist/compiled/webpack/webpack' {
   import webpackSources from 'webpack-sources1'

test/integration/css-features/test/index.test.js

@@ -197,7 +197,7 @@ describe('CSS Modules: Import Global CSS', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `"a .styles_foo__31qlD{all:initial}"`
+      `"a .styles_foo__Io_Us{all:initial}"`
     )
   })
 })
@@ -247,7 +247,7 @@ describe('CSS Modules: Import Exports', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".styles_blk__2ns7r{color:#000}"`
+      `".styles_blk__CqbFg{color:#000}"`
     )
   })
 })

test/integration/css-modules/test/index.test.js

@@ -52,7 +52,7 @@ describe('Basic CSS Module Support', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".index_redText__3CwEB{color:red}"`
+      `".index_redText__KCBQp{color:red}"`
     )
   })
 
@@ -69,7 +69,7 @@ describe('Basic CSS Module Support', () => {
     expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
 
     expect($('#verify-red').attr('class')).toMatchInlineSnapshot(
-      `"index_redText__3CwEB"`
+      `"index_redText__KCBQp"`
     )
   })
 })
@@ -108,7 +108,7 @@ describe('3rd Party CSS Module Support', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".index_foo__29BAH{position:relative}.index_foo__29BAH .bar,.index_foo__29BAH .baz{height:100%;overflow:hidden}.index_foo__29BAH .lol,.index_foo__29BAH>.lel{width:80%}"`
+      `".index_foo__2K5pY{position:relative}.index_foo__2K5pY .bar,.index_foo__2K5pY .baz{height:100%;overflow:hidden}.index_foo__2K5pY .lol,.index_foo__2K5pY>.lel{width:80%}"`
     )
   })
 
@@ -125,7 +125,7 @@ describe('3rd Party CSS Module Support', () => {
     expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
 
     expect($('#verify-div').attr('class')).toMatchInlineSnapshot(
-      `"index_foo__29BAH"`
+      `"index_foo__2K5pY"`
     )
   })
 })
@@ -310,7 +310,7 @@ describe('Valid CSS Module Usage from within node_modules', () => {
 
     const cssPreload = $('#nm-div')
     expect(cssPreload.text()).toMatchInlineSnapshot(
-      `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"example_redText__1rb5g\\"}"`
+      `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"example_redText__lIU4W\\"}"`
     )
   })
 
@@ -324,7 +324,7 @@ describe('Valid CSS Module Usage from within node_modules', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".example_redText__1rb5g{color:red}"`
+      `".example_redText__lIU4W{color:red}"`
     )
   })
 })
@@ -363,7 +363,7 @@ describe('Valid Nested CSS Module Usage from within node_modules', () => {
 
     const cssPreload = $('#nm-div')
     expect(cssPreload.text()).toMatchInlineSnapshot(
-      `"{\\"message\\":\\"Why hello there\\"} {\\"subClass\\":\\"example_subClass__2YUgj other_className__bt_-E\\"}"`
+      `"{\\"message\\":\\"Why hello there\\"} {\\"subClass\\":\\"example_subClass__ak_R4 other_className__hfPre\\"}"`
     )
   })
 
@@ -377,7 +377,7 @@ describe('Valid Nested CSS Module Usage from within node_modules', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".other2_other2__2PUfY{color:red}.other3_other3__1f9h7{color:violet}.other_className__bt_-E{background:red;color:#ff0}.example_subClass__2YUgj{background:blue}"`
+      `".other2_other2__n0niK{color:red}.other3_other3__5PqwU{color:violet}.other_className__hfPre{background:red;color:#ff0}.example_subClass__ak_R4{background:blue}"`
     )
   })
 })
@@ -410,7 +410,7 @@ describe('CSS Module Composes Usage (Basic)', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".index_className__3gr_q{background:red;color:#ff0}.index_subClass__FUvW6{background:blue}"`
+      `".index_className___fnCf{background:red;color:#ff0}.index_subClass__3ZQHz{background:blue}"`
     )
   })
 })
@@ -443,7 +443,7 @@ describe('CSS Module Composes Usage (External)', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".other_className__21NIP{background:red;color:#ff0}.index_subClass__FUvW6{background:blue}"`
+      `".other_className__3Kqmr{background:red;color:#ff0}.index_subClass__3ZQHz{background:blue}"`
     )
   })
 })
@@ -491,7 +491,7 @@ describe('Dynamic Route CSS Module Usage', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `"._post__home__2Cy-L{background:red}"`
+      `"._post__home__BTqh4{background:red}"`
     )
   })
 })
@@ -541,7 +541,7 @@ describe('Catch-all Route CSS Module Usage', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".___post__home__38gR-{background:red}.__55css_home__qxXcH{color:green}"`
+      `".___post__home__G40mx{background:red}.__55css_home__OvQYk{color:green}"`
     )
   })
 })

test/integration/scss-fixtures/data-url/pages/_app.js

@@ -0,0 +1,12 @@
+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/data-url/pages/index.js

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

test/integration/scss-fixtures/data-url/styles/global.scss

@@ -0,0 +1,5 @@
+$var: red;
+.red-text {
+  color: $var;
+  background-image: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3csvg width='114px' height='100px' viewBox='0 0 114 100' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3clinearGradient x1='100.929941%25' y1='181.283245%25' x2='41.7687834%25' y2='100%25' id='linearGradient-1'%3e%3cstop stop-color='white' offset='0%25'%3e%3c/stop%3e%3cstop stop-color='black' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='Black-Triangle' transform='translate(-293.000000%2c -150.000000)' fill='url(%23linearGradient-1)'%3e%3cpolygon id='Logotype---Black' points='350 150 407 250 293 250'%3e%3c/polygon%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
+}

test/integration/scss-modules/test/index.test.js

@@ -51,7 +51,7 @@ describe('Basic SCSS Module Support', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".index_redText__2VIiM{color:red}"`
+      `".index_redText__WduQk{color:red}"`
     )
   })
 
@@ -68,7 +68,7 @@ describe('Basic SCSS Module Support', () => {
     expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
 
     expect($('#verify-red').attr('class')).toMatchInlineSnapshot(
-      `"index_redText__2VIiM"`
+      `"index_redText__WduQk"`
     )
   })
 })
@@ -107,7 +107,7 @@ describe('3rd Party CSS Module Support', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".index_foo__9_fxH{position:relative}.index_foo__9_fxH .bar,.index_foo__9_fxH .baz{height:100%;overflow:hidden}.index_foo__9_fxH .lol,.index_foo__9_fxH>.lel{width:80%}"`
+      `".index_foo__gL0ty{position:relative}.index_foo__gL0ty .bar,.index_foo__gL0ty .baz{height:100%;overflow:hidden}.index_foo__gL0ty .lol,.index_foo__gL0ty>.lel{width:80%}"`
     )
   })
 
@@ -124,7 +124,7 @@ describe('3rd Party CSS Module Support', () => {
     expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
 
     expect($('#verify-div').attr('class')).toMatchInlineSnapshot(
-      `"index_foo__9_fxH"`
+      `"index_foo__gL0ty"`
     )
   })
 })
@@ -309,7 +309,7 @@ describe('Valid CSS Module Usage from within node_modules', () => {
 
     const cssPreload = $('#nm-div')
     expect(cssPreload.text()).toMatchInlineSnapshot(
-      `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"example_redText__1hNNA\\"}"`
+      `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"example_redText__8_1ap\\"}"`
     )
   })
 
@@ -323,7 +323,7 @@ describe('Valid CSS Module Usage from within node_modules', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".example_redText__1hNNA{color:red}"`
+      `".example_redText__8_1ap{color:red}"`
     )
   })
 })
@@ -362,7 +362,7 @@ describe('Valid Nested CSS Module Usage from within node_modules', () => {
 
     const cssPreload = $('#nm-div')
     expect(cssPreload.text()).toMatchInlineSnapshot(
-      `"{\\"message\\":\\"Why hello there\\"} {\\"other2\\":\\"example_other2__1pnJV\\",\\"subClass\\":\\"example_subClass__2EbKX other_className__E6nd8\\"}"`
+      `"{\\"message\\":\\"Why hello there\\"} {\\"other2\\":\\"example_other2__pD1TP\\",\\"subClass\\":\\"example_subClass___Qywg other_className__jR2X2\\"}"`
     )
   })
 
@@ -376,7 +376,7 @@ describe('Valid Nested CSS Module Usage from within node_modules', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".other_other3__ZPN-Y{color:violet}.other_className__E6nd8{background:red;color:#ff0}.example_other2__1pnJV{color:red}.example_subClass__2EbKX{background:blue}"`
+      `".other_other3__QRKUk{color:violet}.other_className__jR2X2{background:red;color:#ff0}.example_other2__pD1TP{color:red}.example_subClass___Qywg{background:blue}"`
     )
   })
 })
@@ -409,7 +409,7 @@ describe('CSS Module Composes Usage (Basic)', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".index_className__2O8Wt{background:red;color:#ff0}.index_subClass__3e6Re{background:blue}"`
+      `".index_className__phGSl{background:red;color:#ff0}.index_subClass__fPp6w{background:blue}"`
     )
   })
 })
@@ -442,7 +442,7 @@ describe('CSS Module Composes Usage (External)', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".other_className__2VTl4{background:red;color:#ff0}.index_subClass__3e6Re{background:blue}"`
+      `".other_className__e_JDW{background:red;color:#ff0}.index_subClass__fPp6w{background:blue}"`
     )
   })
 })
@@ -480,7 +480,7 @@ describe('Dynamic Route CSS Module Usage', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `"._post__home__3F5yW{background:red}"`
+      `"._post__home__a9vTy{background:red}"`
     )
   })
 
@@ -538,7 +538,7 @@ describe('Catch-all Route CSS Module Usage', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".___post__home__psZf9{background:red}"`
+      `".___post__home__w1yuY{background:red}"`
     )
   })
 })