feat: sources import with new URL (#1297)

Author: cap-Bernardito

README.md

@@ -50,10 +50,6 @@ module.exports = {
 };
 ```
 
-**Only for webpack v4:**
-
-Good loaders for requiring your assets are the [file-loader](https://github.com/webpack/file-loader) and the [url-loader](https://github.com/webpack/url-loader) which you should specify in your config (see [below](https://github.com/webpack-contrib/css-loader#assets)).
-
 And run `webpack` via your preferred method.
 
 ### `toString`
@@ -1212,30 +1208,6 @@ module.exports = {
 };
 ```
 
-**For webpack v4:**
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
-        loader: "url-loader",
-        options: {
-          limit: 8192,
-        },
-      },
-    ],
-  },
-};
-```
-
 ### Extract
 
 For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
@@ -1285,14 +1257,6 @@ module.exports = {
         // More information here https://webpack.js.org/guides/asset-modules/
         type: "asset",
       },
-      // For webpack v4
-      // {
-      //  test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
-      //  loader: "url-loader",
-      //  options: {
-      //    limit: 8192,
-      //  },
-      // },
     ],
   },
 };

package-lock.json

@@ -75,7 +75,7 @@
     "less-loader": "^7.1.0",
     "lint-staged": "^10.5.4",
     "memfs": "^3.2.2",
-    "mini-css-extract-plugin": "^1.4.1",
+    "mini-css-extract-plugin": "^1.6.0",
     "npm-run-all": "^4.1.5",
     "postcss-loader": "^4.0.4",
     "postcss-preset-env": "^6.7.0",
@@ -88,7 +88,7 @@
     "stylus": "^0.54.8",
     "stylus-loader": "^4.3.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.34.0"
+    "webpack": "^5.36.2"
   },
   "keywords": [
     "webpack",

package.json

@@ -187,12 +187,14 @@ export default async function loader(content, map, meta) {
 
   if (options.modules.exportOnlyLocals !== true) {
     imports.unshift({
+      type: "api_import",
       importName: "___CSS_LOADER_API_IMPORT___",
       url: stringifyRequest(this, require.resolve("./runtime/api")),
     });
 
     if (options.sourceMap) {
       imports.unshift({
+        type: "api_sourcemap_import",
         importName: "___CSS_LOADER_API_SOURCEMAP_IMPORT___",
         url: stringifyRequest(
           this,

src/index.js

@@ -70,6 +70,7 @@ const plugin = (options = {}) => {
           imports.set(importKey, importName);
 
           options.imports.push({
+            type: "icss_import",
             importName,
             url: options.urlHandler(newUrl),
             icss: true,

src/plugins/postcss-icss-parser.js

@@ -223,6 +223,7 @@ const plugin = (options = {}) => {
               urlToNameMap.set(newUrl, importName);
 
               options.imports.push({
+                type: "rule_import",
                 importName,
                 url: options.urlHandler(newUrl),
                 index,

src/plugins/postcss-import-parser.js

@@ -337,6 +337,7 @@ const plugin = (options = {}) => {
 
             if (!hasUrlImportHelper) {
               options.imports.push({
+                type: "get_url_import",
                 importName: "___CSS_LOADER_GET_URL_IMPORT___",
                 url: options.urlHandler(
                   require.resolve("../runtime/getUrl.js")
@@ -356,6 +357,7 @@ const plugin = (options = {}) => {
               urlToNameMap.set(newUrl, importName);
 
               options.imports.push({
+                type: "url",
                 importName,
                 url: options.urlHandler(newUrl),
                 index,

src/plugins/postcss-url-parser.js

@@ -4,13 +4,13 @@ module.exports = (url, options) => {
     options = {};
   }
 
-  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
-  url = url && url.__esModule ? url.default : url;
-
-  if (typeof url !== "string") {
+  if (!url) {
     return url;
   }
 
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  url = String(url.__esModule ? url.default : url);
+
   // If url is already wrapped in quotes, remove them
   if (/^['"].*['"]$/.test(url)) {
     // eslint-disable-next-line no-param-reassign
@@ -24,7 +24,7 @@ module.exports = (url, options) => {
 
   // Should url be wrapped?
   // See https://drafts.csswg.org/css-values-3/#urls
-  if (/["'() \t\n]/.test(url) || options.needQuotes) {
+  if (/["'() \t\n]|(%20)/.test(url) || options.needQuotes) {
     return `"${url.replace(/"/g, '\\"').replace(/\n/g, "\\n")}"`;
   }
 

src/runtime/getUrl.js

@@ -589,15 +589,18 @@ function getImportCode(imports, options) {
   let code = "";
 
   for (const item of imports) {
-    const { importName, url, icss } = item;
+    const { importName, url, icss, type } = item;
 
     if (options.esModule) {
       if (icss && options.modules.namedExport) {
         code += `import ${
           options.modules.exportOnlyLocals ? "" : `${importName}, `
         }* as ${importName}_NAMED___ from ${url};\n`;
       } else {
-        code += `import ${importName} from ${url};\n`;
+        code +=
+          type === "url"
+            ? `var ${importName} = new URL(${url}, import.meta.url);\n`
+            : `import ${importName} from ${url};\n`;
       }
     } else {
       code += `var ${importName} = require(${url});\n`;

src/utils.js

@@ -7,7 +7,7 @@ exports[`"esModule" option should work when not specified: module 1`] = `
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
-import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
+var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -36,7 +36,7 @@ Array [
 
 .class {
   color: red;
-  background: url(/webpack/public/path/img.png);
+  background: url(replaced_file_protocol_/webpack/public/path/img.png);
 }
 ",
     "",
@@ -99,7 +99,7 @@ exports[`"esModule" option should work with a value equal to "true" and the "mod
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
-import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
+var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -128,7 +128,7 @@ Array [
 
 .class {
   color: red;
-  background: url(/webpack/public/path/img.png);
+  background: url(replaced_file_protocol_/webpack/public/path/img.png);
 }
 ",
     "",
@@ -145,7 +145,7 @@ exports[`"esModule" option should work with a value equal to "true" and the "mod
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
-import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
+var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -177,7 +177,7 @@ Array [
 
 .oFwPvuANP2XsfGir7HPVz {
   color: red;
-  background: url(/webpack/public/path/img.png);
+  background: url(replaced_file_protocol_/webpack/public/path/img.png);
 }
 ",
     "",
@@ -194,7 +194,7 @@ exports[`"esModule" option should work with a value equal to "true" and the "mod
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
-import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
+var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -226,7 +226,7 @@ Array [
 
 .oFwPvuANP2XsfGir7HPVz {
   color: red;
-  background: url(/webpack/public/path/img.png);
+  background: url(replaced_file_protocol_/webpack/public/path/img.png);
 }
 ",
     "",
@@ -243,7 +243,7 @@ exports[`"esModule" option should work with a value equal to "true": module 1`]
 import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\";
 import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css\\";
 import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\";
-import ___CSS_LOADER_URL_IMPORT_0___ from \\"./img.png\\";
+var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
@@ -272,7 +272,7 @@ Array [
 
 .class {
   color: red;
-  background: url(/webpack/public/path/img.png);
+  background: url(replaced_file_protocol_/webpack/public/path/img.png);
 }
 ",
     "",