use loader-utils 2 for resolve-url-loader to fix `./data:` urls in sass #31134

sokra · 2021-11-08T10:07:51Z

upgrade to loader-utils 3.1.2 for hash fix

fixes #31016
fixes #30998

upgrade to loader-utils 3.1.2 for hash fix

ijjk · 2021-11-08T13:30:13Z

Failing test suites

Commit: 09cb84d

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

SCSS Support > Data Urls > should've emitted expected files

Expand output

● SCSS Support › Data Urls › should've emitted expected files

expect(received).toMatch(expected)

Expected pattern: /^\.red-text\{color:red;background-image:url\("data:[^)"]+"\)\}$/
Received string:  ".red-text{color:red;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\")}"

  823 |         stdout: true,
  824 |       })
> 825 |       expect(code).toBe(0)
      |                          ^
  826 |       expect(stdout).toMatch(/Compiled successfully/)
  827 |     })
  828 |

  at Object.<anonymous> (integration/scss/test/index.test.js:825:26)

styfle · 2021-11-08T17:32:02Z

packages/next/taskfile.js

-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'


Suggested change

externals['loader-utils2'] = 'next/dist/compiled/loader-utils2'

// eslint-disable-next-line camelcase

externals['loader-utils2'] = 'next/dist/compiled/loader-utils2'

You might need another eslint comment

ijjk · 2021-11-08T18:15:27Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
buildDuration	24.2s	24.4s	⚠️ +250ms
buildDurationCached	5s	4.9s	-85ms
nodeModulesSize	332 MB	332 MB	⚠️ +53.2 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.308	4.252	-0.06
/ avg req/sec	580.26	587.89	+7.63
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.172	2.236	⚠️ +0.06
/error-in-render avg req/sec	1151.05	1117.9	⚠️ -33.15

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	28.1 kB	28.1 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	-1 B
Overall change	71.9 kB	71.9 kB	-1 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
_app-HASH.js gzip	1.23 kB	1.23 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	635 B	635 B	✓
image-HASH.js gzip	4.44 kB	4.44 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.87 kB	1.87 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
334f979574ae..6f4.css gzip	106 B	107 B	⚠️ +1 B
Overall change	13.1 kB	13.1 kB	⚠️ +1 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
_buildManifest.js gzip	459 B	460 B	⚠️ +1 B
Overall change	459 B	460 B	⚠️ +1 B

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
index.html gzip	522 B	523 B	⚠️ +1 B
link.html gzip	535 B	536 B	⚠️ +1 B
withRouter.html gzip	516 B	518 B	⚠️ +2 B
Overall change	1.57 kB	1.58 kB	⚠️ +4 B

Diffs

Diff for _buildManifest.js

@@ -4,8 +4,8 @@ self.__BUILD_MANIFEST = {
   "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-97db2c91e74bb63f.js"],
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-8c7b17a56b7abb6e.js"],
   "/css": [
-    "static\u002Fcss\u002F7edf9ee7c3885268.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-99ad492aad2c14e4.js"
+    "static\u002Fcss\u002F94fdbc56eafa2039.css",
+    "static\u002Fchunks\u002Fpages\u002Fcss-deb2f2a41a5bf511.js"
   ],
   "/dynamic": [
     "static\u002Fchunks\u002Fpages\u002Fdynamic-0ead1841ed0002db.js"

Diff for css-HASH.js

@@ -50,7 +50,7 @@
 
     /***/ 3350: /***/ function(module) {
       // extracted by mini-css-extract-plugin
-      module.exports = { helloWorld: "css_helloWorld__2Fhmt" };
+      module.exports = { helloWorld: "css_helloWorld__qqNwY" };
 
       /***/
     }

Diff for webpack-HASH.js

@@ -171,7 +171,7 @@
     /******/ // This function allow to reference all chunks
     /******/ __webpack_require__.miniCssF = function(chunkId) {
       /******/ // return url for filenames based on template
-      /******/ return "static/css/" + "7edf9ee7c3885268" + ".css";
+      /******/ return "static/css/" + "94fdbc56eafa2039" + ".css";
       /******/
     };
     /******/

Diff for 7edf9ee7c3885268.css

@@ -1,4 +1,4 @@
-.css_helloWorld__2Fhmt {
+.css_helloWorld__qqNwY {
   color: green;
   background: url(/_next/static/media/nextjs.cae0b805.png);
 }

Diff for index.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-43980cc4f59eb55b.js"
+      src="/_next/static/chunks/webpack-8244d589778df4b1.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-43980cc4f59eb55b.js"
+      src="/_next/static/chunks/webpack-8244d589778df4b1.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-43980cc4f59eb55b.js"
+      src="/_next/static/chunks/webpack-8244d589778df4b1.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
buildDuration	27.5s	27.4s	-83ms
buildDurationCached	5s	4.9s	-27ms
nodeModulesSize	332 MB	332 MB	⚠️ +53.2 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.307	4.375	⚠️ +0.07
/ avg req/sec	580.49	571.39	⚠️ -9.1
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.201	2.151	-0.05
/error-in-render avg req/sec	1136.04	1162.46	+26.42

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.2 kB	28.2 kB	✓
webpack-HASH.js gzip	1.43 kB	1.43 kB	-1 B
Overall change	72.1 kB	72.1 kB	-1 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
_app-HASH.js gzip	1.22 kB	1.22 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	622 B	622 B	✓
image-HASH.js gzip	4.46 kB	4.46 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	1.91 kB	1.91 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
334f979574ae..6f4.css gzip	106 B	107 B	⚠️ +1 B
Overall change	13.1 kB	13.1 kB	⚠️ +1 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
_buildManifest.js gzip	460 B	459 B	-1 B
Overall change	460 B	459 B	-1 B

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js bugfix/sass-url	Change
index.html gzip	522 B	523 B	⚠️ +1 B
link.html gzip	535 B	535 B	✓
withRouter.html gzip	516 B	517 B	⚠️ +1 B
Overall change	1.57 kB	1.57 kB	⚠️ +2 B

Diffs

Diff for _buildManifest.js

@@ -4,8 +4,8 @@ self.__BUILD_MANIFEST = {
   "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-97db2c91e74bb63f.js"],
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-8c7b17a56b7abb6e.js"],
   "/css": [
-    "static\u002Fcss\u002F7edf9ee7c3885268.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-99ad492aad2c14e4.js"
+    "static\u002Fcss\u002F94fdbc56eafa2039.css",
+    "static\u002Fchunks\u002Fpages\u002Fcss-deb2f2a41a5bf511.js"
   ],
   "/dynamic": [
     "static\u002Fchunks\u002Fpages\u002Fdynamic-0ead1841ed0002db.js"

Diff for css-HASH.js

@@ -50,7 +50,7 @@
 
     /***/ 3350: /***/ function(module) {
       // extracted by mini-css-extract-plugin
-      module.exports = { helloWorld: "css_helloWorld__2Fhmt" };
+      module.exports = { helloWorld: "css_helloWorld__qqNwY" };
 
       /***/
     }

Diff for webpack-HASH.js

@@ -171,7 +171,7 @@
     /******/ // This function allow to reference all chunks
     /******/ __webpack_require__.miniCssF = function(chunkId) {
       /******/ // return url for filenames based on template
-      /******/ return "static/css/" + "7edf9ee7c3885268" + ".css";
+      /******/ return "static/css/" + "94fdbc56eafa2039" + ".css";
       /******/
     };
     /******/

Diff for 7edf9ee7c3885268.css

@@ -1,4 +1,4 @@
-.css_helloWorld__2Fhmt {
+.css_helloWorld__qqNwY {
   color: green;
   background: url(/_next/static/media/nextjs.cae0b805.png);
 }

Diff for index.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-43980cc4f59eb55b.js"
+      src="/_next/static/chunks/webpack-8244d589778df4b1.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-43980cc4f59eb55b.js"
+      src="/_next/static/chunks/webpack-8244d589778df4b1.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -11,7 +11,7 @@
       src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-43980cc4f59eb55b.js"
+      src="/_next/static/chunks/webpack-8244d589778df4b1.js"
       defer=""
     ></script>
     <script

Commit: 099f371

rtritto · 2021-11-10T08:21:27Z

What is the function of loader-utils v3 that generates the problem and correctly work on v2?
We should open an issue on that library to revert these changes and use only v3.

FYI @sokra @styfle

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Nov 8, 2021

sokra changed the title ~~use loader-utils 2 for resolve-url-loader to fix ./data: urls~~ use loader-utils 2 for resolve-url-loader to fix ./data: urls in sass Nov 8, 2021

This comment has been minimized.

Sign in to view

sokra force-pushed the bugfix/sass-url branch from 0e72e57 to c229f59 Compare November 8, 2021 11:10

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

840f669

upgrade to loader-utils 3.1.2 for hash fix

sokra force-pushed the bugfix/sass-url branch from c229f59 to 840f669 Compare November 8, 2021 11:15

This comment has been minimized.

Sign in to view

sokra marked this pull request as ready for review November 8, 2021 12:18

sokra requested review from huozhi, ijjk, padmaia, shuding, styfle and timneutkens as code owners November 8, 2021 12:18

timneutkens approved these changes Nov 8, 2021

View reviewed changes

Merge branch 'canary' into bugfix/sass-url

fc6fdb8

This comment has been minimized.

Sign in to view

Merge branch 'canary' into bugfix/sass-url

09cb84d

timneutkens previously approved these changes Nov 8, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

sokra added 2 commits November 8, 2021 16:12

Merge remote-tracking branch 'origin/canary' into bugfix/sass-url

2f54c9a

fix test case

8c5ee5f

sokra dismissed timneutkens’s stale review via 8c5ee5f November 8, 2021 15:14

This comment has been minimized.

Sign in to view

ijjk approved these changes Nov 8, 2021

View reviewed changes

Merge branch 'canary' into bugfix/sass-url

f7a067a

kodiakhq bot added 2 commits November 8, 2021 16:35

Merge branch 'canary' into bugfix/sass-url

4cfd3cc

Merge branch 'canary' into bugfix/sass-url

a524d65

This comment has been minimized.

Sign in to view

kodiakhq bot added 3 commits November 8, 2021 17:17

Merge branch 'canary' into bugfix/sass-url

15081a5

Merge branch 'canary' into bugfix/sass-url

fd484fc

Merge branch 'canary' into bugfix/sass-url

ef72834

styfle reviewed Nov 8, 2021

View reviewed changes

styfle approved these changes Nov 8, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

kodiakhq bot added 2 commits November 8, 2021 17:51

Merge branch 'canary' into bugfix/sass-url

89f028b

Merge branch 'canary' into bugfix/sass-url

099f371

kodiakhq bot merged commit 283af4e into canary Nov 8, 2021

kodiakhq bot deleted the bugfix/sass-url branch November 8, 2021 18:37

This was referenced Nov 9, 2021

Can't resolve '../../node_modules/bootstrap/scss/mixins/data:image/svg+xml... #31167

Closed

Issue with css-loader + SVG cursor in Next 12 #31019

Closed

styfle mentioned this pull request Nov 9, 2021

Regression: Cannot find module './data:image/svg+xml;utf8,<svg ...></svg> for .scss file containing background-image: url( data:...) #30895

Closed

kherock mentioned this pull request Nov 11, 2021

Next 12 SWC - Base 64 background image in CSS Module file can't be resolved. #31277

Closed

nwalters512 mentioned this pull request Nov 11, 2021

Upgrade to Next.js 12; drop custom deploy tooling PrairieLearn/marketing#15

Merged

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

use loader-utils 2 for resolve-url-loader to fix `./data:` urls in sass #31134

use loader-utils 2 for resolve-url-loader to fix `./data:` urls in sass #31134

sokra commented Nov 8, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Nov 8, 2021

This comment has been minimized.

This comment has been minimized.

styfle Nov 8, 2021

This comment has been minimized.

ijjk commented Nov 8, 2021

Diffs

Diffs

rtritto commented Nov 10, 2021 •

edited

	externals['loader-utils2'] = 'next/dist/compiled/loader-utils2'
	// eslint-disable-next-line camelcase
	externals['loader-utils2'] = 'next/dist/compiled/loader-utils2'

use loader-utils 2 for resolve-url-loader to fix ./data: urls in sass #31134

use loader-utils 2 for resolve-url-loader to fix ./data: urls in sass #31134

Conversation

sokra commented Nov 8, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Nov 8, 2021

Failing test suites

This comment has been minimized.

This comment has been minimized.

styfle Nov 8, 2021

Choose a reason for hiding this comment

This comment has been minimized.

ijjk commented Nov 8, 2021

Stats from current PR

Diffs

Diffs

rtritto commented Nov 10, 2021 • edited

use loader-utils 2 for resolve-url-loader to fix `./data:` urls in sass #31134

use loader-utils 2 for resolve-url-loader to fix `./data:` urls in sass #31134

rtritto commented Nov 10, 2021 •

edited