Move resolve-url-loader into Next.js (#32932)

* Move resolve-url-loader into Next.js

Fixes #32157

Moves resolve-url-loader into Next.js and strips out all features that are not used like `rework` support. Will reduce install size as well as allow for optimizing the approach in the near future.

* Update precompiled

* Use loader-utils 2

* Update trace test

* Revert "Update trace test"

This reverts commit 7c09a07.

* Add es5-ext as it's used in trace tests

* Update join-function.js

* Update bundle5.js

Author: timneutkens

package.json

@@ -94,6 +94,7 @@
     "critters": "0.0.6",
     "cross-env": "6.0.3",
     "cross-spawn": "6.0.5",
+    "es5-ext": "0.10.53",
     "escape-string-regexp": "2.0.0",
     "eslint": "7.24.0",
     "eslint-plugin-import": "2.22.1",

packages/next/build/webpack/config/blocks/css/index.ts

@@ -139,7 +139,7 @@ export const css = curry(async function css(
     ...sassOptions
   } = ctx.sassOptions
 
-  const lazyPostCSSInitalizer = () =>
+  const lazyPostCSSInitializer = () =>
     lazyPostCSS(
       ctx.rootDirectory,
       ctx.supportedBrowsers,
@@ -165,8 +165,9 @@ export const css = curry(async function css(
     // To fix this, we use `resolve-url-loader` to rewrite the CSS
     // imports to real file paths.
     {
-      loader: require.resolve('next/dist/compiled/resolve-url-loader'),
+      loader: require.resolve('../../../loaders/resolve-url-loader/index'),
       options: {
+        postcss: lazyPostCSSInitializer,
         // Source maps are not required here, but we may as well emit
         // them.
         sourceMap: true,
@@ -216,7 +217,7 @@ export const css = curry(async function css(
             and: [ctx.rootDirectory],
             not: [/node_modules/],
           },
-          use: getCssModuleLoader(ctx, lazyPostCSSInitalizer),
+          use: getCssModuleLoader(ctx, lazyPostCSSInitializer),
         }),
       ],
     })
@@ -241,7 +242,7 @@ export const css = curry(async function css(
           },
           use: getCssModuleLoader(
             ctx,
-            lazyPostCSSInitalizer,
+            lazyPostCSSInitializer,
             sassPreprocessors
           ),
         }),
@@ -303,7 +304,7 @@ export const css = curry(async function css(
                   and: [ctx.rootDirectory],
                   not: [/node_modules/],
                 },
-            use: getGlobalCssLoader(ctx, lazyPostCSSInitalizer),
+            use: getGlobalCssLoader(ctx, lazyPostCSSInitializer),
           }),
         ],
       })
@@ -321,7 +322,7 @@ export const css = curry(async function css(
               sideEffects: true,
               test: regexCssGlobal,
               issuer: { and: [ctx.customAppFile] },
-              use: getGlobalCssLoader(ctx, lazyPostCSSInitalizer),
+              use: getGlobalCssLoader(ctx, lazyPostCSSInitializer),
             }),
           ],
         })
@@ -339,7 +340,7 @@ export const css = curry(async function css(
               issuer: { and: [ctx.customAppFile] },
               use: getGlobalCssLoader(
                 ctx,
-                lazyPostCSSInitalizer,
+                lazyPostCSSInitializer,
                 sassPreprocessors
               ),
             }),

packages/next/build/webpack/loaders/resolve-url-loader/index.js

@@ -0,0 +1,103 @@
+/*
+The MIT License (MIT)
+
+Copyright (c) 2016 Ben Holloway
+
+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.
+*/
+
+import { SourceMapConsumer } from 'next/dist/compiled/source-map'
+import valueProcessor from './lib/value-processor'
+import { defaultJoin } from './lib/join-function'
+import process from './lib/postcss'
+/**
+ * A webpack loader that resolves absolute url() paths relative to their original source file.
+ * Requires source-maps to do any meaningful work.
+ * @param {string} content Css content
+ * @param {object} sourceMap The source-map
+ * @returns {string|String}
+ */
+export default async function resolveUrlLoader(content, sourceMap) {
+  const options = Object.assign(
+    {
+      sourceMap: this.sourceMap,
+      silent: false,
+      absolute: false,
+      keepQuery: false,
+      root: false,
+      debug: false,
+      join: defaultJoin,
+    },
+    this.getOptions()
+  )
+
+  let sourceMapConsumer
+  if (sourceMap) {
+    sourceMapConsumer = new SourceMapConsumer(sourceMap)
+  }
+
+  const callback = this.async()
+  const { postcss } = await options.postcss()
+  process(postcss, this.resourcePath, content, {
+    outputSourceMap: Boolean(options.sourceMap),
+    transformDeclaration: valueProcessor(this.resourcePath, options),
+    inputSourceMap: sourceMap,
+    sourceMapConsumer: sourceMapConsumer,
+  })
+    .catch(onFailure)
+    .then(onSuccess)
+
+  function onFailure(error) {
+    callback(encodeError('CSS error', error))
+  }
+
+  function onSuccess(reworked) {
+    if (reworked) {
+      // complete with source-map
+      //  source-map sources are relative to the file being processed
+      if (options.sourceMap) {
+        callback(null, reworked.content, reworked.map)
+      }
+      // complete without source-map
+      else {
+        callback(null, reworked.content)
+      }
+    }
+  }
+
+  function encodeError(label, exception) {
+    return new Error(
+      [
+        'resolve-url-loader',
+        ': ',
+        [label]
+          .concat(
+            (typeof exception === 'string' && exception) ||
+              (exception instanceof Error && [
+                exception.message,
+                exception.stack.split('\n')[1].trim(),
+              ]) ||
+              []
+          )
+          .filter(Boolean)
+          .join('\n  '),
+      ].join('')
+    )
+  }
+}

packages/next/build/webpack/loaders/resolve-url-loader/lib/file-protocol.js

@@ -0,0 +1,65 @@
+/*
+The MIT License (MIT)
+
+Copyright (c) 2016 Ben Holloway
+
+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.
+*/
+
+/**
+ * Prepend file:// protocol to source path string or source-map sources.
+ */
+function prepend(candidate) {
+  if (typeof candidate === 'string') {
+    return 'file://' + candidate
+  } else if (
+    candidate &&
+    typeof candidate === 'object' &&
+    Array.isArray(candidate.sources)
+  ) {
+    return Object.assign({}, candidate, {
+      sources: candidate.sources.map(prepend),
+    })
+  } else {
+    throw new Error('expected string|object')
+  }
+}
+
+exports.prepend = prepend
+
+/**
+ * Remove file:// protocol from source path string or source-map sources.
+ */
+function remove(candidate) {
+  if (typeof candidate === 'string') {
+    return candidate.replace(/^file:\/{2}/, '')
+  } else if (
+    candidate &&
+    typeof candidate === 'object' &&
+    Array.isArray(candidate.sources)
+  ) {
+    return Object.assign({}, candidate, {
+      sources: candidate.sources.map(remove),
+    })
+  } else {
+    throw new Error('expected string|object')
+  }
+}
+
+exports.remove = remove