fix: experimentalUseImportModule works with new URL(...) syntax

webpack-contrib · Sep 1, 2021 · cf81c4b · CrOrc · Sep 2, 2021 · alexander-akait
1 parent e70a0a9
commit cf81c4b
Show file tree

Hide file tree

Showing 172 changed files with 832 additions and 238 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "babel-jest": "^27.0.6",
     "bootstrap": "^4.6.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.6",
+    "css-loader": "^6.2.0",
     "del": "^6.0.0",
     "del-cli": "^4.0.0",
     "es-check": "^6.0.0",

diff --git a/src/index.js b/src/index.js
@@ -9,6 +9,9 @@ import {
   trueFn,
   MODULE_TYPE,
   AUTO_PUBLIC_PATH,
+  ABSOLUTE_PUBLIC_PATH,
+  SINGLE_DOT_PATH_SEGMENT,
+  DOUBLE_DOT_PATH_SEGMENT,
   compareModulesByIdentifier,
 } from "./utils";
 
@@ -1034,6 +1037,15 @@ class MiniCssExtractPlugin {
 
         const undoPath = getUndoPath(filename, compiler.outputPath, false);
 
+        content = content.replace(new RegExp(ABSOLUTE_PUBLIC_PATH, "g"), "");
+        content = content.replace(
+          new RegExp(SINGLE_DOT_PATH_SEGMENT, "g"),
+          "."
+        );
+        content = content.replace(
+          new RegExp(DOUBLE_DOT_PATH_SEGMENT, "g"),
+          ".."
+        );
         content = content.replace(new RegExp(AUTO_PUBLIC_PATH, "g"), undoPath);
 
         if (module.sourceMap) {

diff --git a/src/loader.js b/src/loader.js
@@ -4,6 +4,9 @@ import {
   findModuleById,
   evalModuleCode,
   AUTO_PUBLIC_PATH,
+  ABSOLUTE_PUBLIC_PATH,
+  SINGLE_DOT_PATH_SEGMENT,
+  DOUBLE_DOT_PATH_SEGMENT,
   stringifyRequest,
 } from "./utils";
 import schema from "./loader-options.json";
@@ -193,15 +196,23 @@ export function pitch(request) {
       return;
     }
 
+    const isAbsolutePublicPath = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/.test(publicPath);
+    const publicPathForExtract = isAbsolutePublicPath
+      ? publicPath
+      : `${ABSOLUTE_PUBLIC_PATH}${publicPath
+          .replace(/\./g, SINGLE_DOT_PATH_SEGMENT)
+          .replace(/\.\./g, DOUBLE_DOT_PATH_SEGMENT)}`;
+
     this.importModule(
       `${this.resourcePath}.webpack[javascript/auto]!=!${request}`,
       {
         layer: options.layer,
-        publicPath,
+        publicPath: publicPathForExtract,
       },
-      (err, exports) => {
-        if (err) {
-          callback(err);
+      (error, exports) => {
+        if (error) {
+          callback(error);
+
           return;
         }
 

diff --git a/src/utils.js b/src/utils.js
@@ -53,7 +53,12 @@ function compareModulesByIdentifier(a, b) {
 }
 
 const MODULE_TYPE = "css/mini-extract";
-const AUTO_PUBLIC_PATH = "__MINI_CSS_EXTRACT_PLUGIN_PUBLIC_PATH__";
+const AUTO_PUBLIC_PATH = "__mini_css_extract_plugin_public_path_auto__";
+const ABSOLUTE_PUBLIC_PATH = "webpack:///mini-css-extract-plugin/";
+const SINGLE_DOT_PATH_SEGMENT =
+  "__mini_css_extract_plugin_single_dot_path_segment__";
+const DOUBLE_DOT_PATH_SEGMENT =
+  "__mini_css_extract_plugin_double_dot_path_segment__";
 
 function isAbsolutePath(str) {
   return path.posix.isAbsolute(str) || path.win32.isAbsolute(str);
@@ -106,5 +111,8 @@ export {
   compareModulesByIdentifier,
   MODULE_TYPE,
   AUTO_PUBLIC_PATH,
+  ABSOLUTE_PUBLIC_PATH,
+  SINGLE_DOT_PATH_SEGMENT,
+  DOUBLE_DOT_PATH_SEGMENT,
   stringifyRequest,
 };
diff --git a/test/TestMemoryFS.test.js b/test/TestMemoryFS.test.js
@@ -8,7 +8,10 @@ const assetsNames = (assets) => assets.map((asset) => asset.name);
 describe("TestMemoryFS", () => {
   it("should preserve asset even if not emitted", (done) => {
     const casesDirectory = path.resolve(__dirname, "cases");
-    const directoryForCase = path.resolve(casesDirectory, "simple-publicpath");
+    const directoryForCase = path.resolve(
+      casesDirectory,
+      "publicpath-default-auto"
+    );
     // eslint-disable-next-line import/no-dynamic-require, global-require
     const webpackConfig = require(path.resolve(
       directoryForCase,

diff --git a/test/__snapshots__/emit-option.test.js.snap b/test/__snapshots__/emit-option.test.js.snap
@@ -59,9 +59,9 @@ exports[`emit option should work with locals and invalidate cache when emit opti
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
 </head>
 <body>
-css.foo: _1F17fUrdX_cbcyDHpFqmAD
-css.bar: _3TZVxmkrZR2cTfifKhDoZn
-css.baz: M-pzkE59YBii7EXzFyxE6
+css.foo: J2lpabaeIrMw_95s_HME
+css.bar: V4_dkftIz80Idb9RVpj3
+css.baz: BhqK6bijhySVfFKg1Jj5
 </body></html>"
 `;
 
@@ -71,9 +71,9 @@ exports[`emit option should work with locals and invalidate cache when emit opti
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
 </head>
 <body>
-css.foo-bar: VWLDg_rByGM4Rdhz5T3Ns
-css.bar: _3TZVxmkrZR2cTfifKhDoZn
-css.baz: M-pzkE59YBii7EXzFyxE6
+css.foo-bar: XDzcxRg1NQGrYrn90Pnq
+css.bar: V4_dkftIz80Idb9RVpj3
+css.baz: BhqK6bijhySVfFKg1Jj5
 </body></html>"
 `;
 
@@ -115,9 +115,9 @@ exports[`emit option should work with locals when emit option is "false": DOM 1`
   <style id=\\"existing-style\\">.existing { color: yellow }</style>
 </head>
 <body>
-css.foo: _1F17fUrdX_cbcyDHpFqmAD
-css.bar: _3TZVxmkrZR2cTfifKhDoZn
-css.baz: M-pzkE59YBii7EXzFyxE6
+css.foo: J2lpabaeIrMw_95s_HME
+css.bar: V4_dkftIz80Idb9RVpj3
+css.baz: BhqK6bijhySVfFKg1Jj5
 </body></html>"
 `;
 

diff --git a/test/cases/asset-modules/webpack.config.js b/test/cases/asset-modules/webpack.config.js
@@ -9,9 +9,6 @@ module.exports = {
         use: [
           {
             loader: Self.loader,
-            options: {
-              publicPath: "",
-            },
           },
           "css-loader",
         ],

diff --git a/...new-url-with-public-path-auto/app/img.png → ...ith-new-url-and-public-path-1/app/img.png b/...new-url-with-public-path-auto/app/img.png → ...ith-new-url-and-public-path-1/app/img.png
diff --git a/...ew-url-with-public-path-auto/app/index.js → ...th-new-url-and-public-path-1/app/index.js b/...ew-url-with-public-path-auto/app/index.js → ...th-new-url-and-public-path-1/app/index.js
diff --git a/test/cases/custom-loader-with-new-url-and-public-path-1/app/mockLoader.js b/test/cases/custom-loader-with-new-url-and-public-path-1/app/mockLoader.js
@@ -0,0 +1,12 @@
+export default function loader() {
+  const callback = this.async();
+
+  callback(
+    null,
+    `export default [
+      [module.id, ".foo {background: url(" + new URL("./img.png", import.meta.url) + ")}", ""],
+      [module.id, ".bar {background: url(" + new URL("../outer-img.png", import.meta.url) + ")}", ""],
+      [module.id, ".baz {background: url(" + new URL("./nested/nested-img.png", import.meta.url) + ")}", ""]
+  ]`
+  );
+}
diff --git a/...ublic-path-auto/app/nested/nested-img.png → ...d-public-path-1/app/nested/nested-img.png b/...ublic-path-auto/app/nested/nested-img.png → ...d-public-path-1/app/nested/nested-img.png
diff --git a/...w-url-with-public-path-auto/app/style.css → ...h-new-url-and-public-path-1/app/style.css b/...w-url-with-public-path-auto/app/style.css → ...h-new-url-and-public-path-1/app/style.css
diff --git a/...ses/custom-loader-with-new-url-and-public-path-1/expected/webpack-5-importModule/main.css b/...ses/custom-loader-with-new-url-and-public-path-1/expected/webpack-5-importModule/main.css
@@ -0,0 +1,3 @@
+.foo {background: url(public/img.png)}
+.bar {background: url(outer-img.png)}
+.baz {background: url(public/nested/nested-img.png)}
diff --git a/...ew-url-with-public-path/expected/main.css → ...public-path-1/expected/webpack-5/main.css b/...ew-url-with-public-path/expected/main.css → ...public-path-1/expected/webpack-5/main.css
diff --git a/...w-url-with-public-path-auto/outer-img.png → ...h-new-url-and-public-path-1/outer-img.png b/...w-url-with-public-path-auto/outer-img.png → ...h-new-url-and-public-path-1/outer-img.png
diff --git a/...ew-url-with-public-path/webpack.config.js → ...w-url-and-public-path-1/webpack.config.js b/...ew-url-with-public-path/webpack.config.js → ...w-url-and-public-path-1/webpack.config.js
diff --git a/...ases/new-url-with-public-path/app/img.png → ...-new-url-and-public-path-auto/app/img.png b/...ases/new-url-with-public-path/app/img.png → ...-new-url-and-public-path-auto/app/img.png
diff --git a/...ses/new-url-with-public-path/app/index.js → ...new-url-and-public-path-auto/app/index.js b/...ses/new-url-with-public-path/app/index.js → ...new-url-and-public-path-auto/app/index.js
diff --git a/test/cases/custom-loader-with-new-url-and-public-path-auto/app/mockLoader.js b/test/cases/custom-loader-with-new-url-and-public-path-auto/app/mockLoader.js
@@ -0,0 +1,12 @@
+export default function loader() {
+  const callback = this.async();
+
+  callback(
+    null,
+    `export default [
+      [module.id, ".foo {background: url(" + new URL("./img.png", import.meta.url) + ")}", ""],
+      [module.id, ".bar {background: url(" + new URL("../outer-img.png", import.meta.url) + ")}", ""],
+      [module.id, ".baz {background: url(" + new URL("./nested/nested-img.png", import.meta.url) + ")}", ""]
+  ]`
+  );
+}
diff --git a/...ith-public-path/app/nested/nested-img.png → ...ublic-path-auto/app/nested/nested-img.png b/...ith-public-path/app/nested/nested-img.png → ...ublic-path-auto/app/nested/nested-img.png
diff --git a/...es/new-url-with-public-path/app/style.css → ...ew-url-and-public-path-auto/app/style.css b/...es/new-url-with-public-path/app/style.css → ...ew-url-and-public-path-auto/app/style.css
diff --git a/...l-with-public-path-auto/expected/main.css → ...rl-and-public-path-auto/expected/main.css b/...l-with-public-path-auto/expected/main.css → ...rl-and-public-path-auto/expected/main.css
diff --git a/...es/new-url-with-public-path/outer-img.png → ...ew-url-and-public-path-auto/outer-img.png b/...es/new-url-with-public-path/outer-img.png → ...ew-url-and-public-path-auto/outer-img.png
diff --git a/...l-with-public-path-auto/webpack.config.js → ...rl-and-public-path-auto/webpack.config.js b/...l-with-public-path-auto/webpack.config.js → ...rl-and-public-path-auto/webpack.config.js
diff --git a/test/cases/custom-loader-with-new-url-and-public-path-default-auto/app/img.png b/test/cases/custom-loader-with-new-url-and-public-path-default-auto/app/img.png
diff --git a/test/cases/publicpath-compiler-auto/index.js → ...and-public-path-default-auto/app/index.js b/test/cases/publicpath-compiler-auto/index.js → ...and-public-path-default-auto/app/index.js
diff --git a/test/cases/custom-loader-with-new-url-and-public-path-default-auto/app/mockLoader.js b/test/cases/custom-loader-with-new-url-and-public-path-default-auto/app/mockLoader.js
@@ -0,0 +1,12 @@
+export default function loader() {
+  const callback = this.async();
+
+  callback(
+    null,
+    `export default [
+      [module.id, ".foo {background: url(" + new URL("./img.png", import.meta.url) + ")}", ""],
+      [module.id, ".bar {background: url(" + new URL("../outer-img.png", import.meta.url) + ")}", ""],
+      [module.id, ".baz {background: url(" + new URL("./nested/nested-img.png", import.meta.url) + ")}", ""]
+  ]`
+  );
+}
diff --git a/...stom-loader-with-new-url-and-public-path-default-auto/app/nested/nested-img.png b/...stom-loader-with-new-url-and-public-path-default-auto/app/nested/nested-img.png
diff --git a/test/cases/custom-loader-with-new-url-and-public-path-default-auto/app/style.css b/test/cases/custom-loader-with-new-url-and-public-path-default-auto/app/style.css
@@ -0,0 +1,3 @@
+.class {
+  background: red;
+}
diff --git a/test/cases/custom-loader-with-new-url-and-public-path-default-auto/expected/main.css b/test/cases/custom-loader-with-new-url-and-public-path-default-auto/expected/main.css
@@ -0,0 +1,3 @@
+.foo {background: url(img.png)}
+.bar {background: url(../outer-img.png)}
+.baz {background: url(nested/nested-img.png)}
diff --git a/test/cases/custom-loader-with-new-url-and-public-path-default-auto/outer-img.png b/test/cases/custom-loader-with-new-url-and-public-path-default-auto/outer-img.png
diff --git a/test/cases/custom-loader-with-new-url-and-public-path-default-auto/webpack.config.js b/test/cases/custom-loader-with-new-url-and-public-path-default-auto/webpack.config.js
@@ -0,0 +1,28 @@
+import path from "path";
+
+import Self from "../../../src";
+
+module.exports = {
+  entry: "./index.js",
+  context: path.resolve(__dirname, "app"),
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, "./mockLoader"],
+      },
+      {
+        test: /\.png$/,
+        type: "asset/resource",
+        generator: {
+          filename: "[path][name][ext]",
+        },
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: "[name].css",
+    }),
+  ],
+};
diff --git a/test/cases/custom-loader-with-new-url-and-public-path/app/img.png b/test/cases/custom-loader-with-new-url-and-public-path/app/img.png
diff --git a/test/cases/publicpath-emptystring/index.js → ...with-new-url-and-public-path/app/index.js b/test/cases/publicpath-emptystring/index.js → ...with-new-url-and-public-path/app/index.js
diff --git a/test/cases/custom-loader-with-new-url-and-public-path/app/mockLoader.js b/test/cases/custom-loader-with-new-url-and-public-path/app/mockLoader.js
@@ -0,0 +1,12 @@
+export default function loader() {
+  const callback = this.async();
+
+  callback(
+    null,
+    `export default [
+      [module.id, ".foo {background: url(" + new URL("./img.png", import.meta.url) + ")}", ""],
+      [module.id, ".bar {background: url(" + new URL("../outer-img.png", import.meta.url) + ")}", ""],
+      [module.id, ".baz {background: url(" + new URL("./nested/nested-img.png", import.meta.url) + ")}", ""]
+  ]`
+  );
+}
diff --git a/test/cases/custom-loader-with-new-url-and-public-path/app/nested/nested-img.png b/test/cases/custom-loader-with-new-url-and-public-path/app/nested/nested-img.png
diff --git a/test/cases/custom-loader-with-new-url-and-public-path/app/style.css b/test/cases/custom-loader-with-new-url-and-public-path/app/style.css
@@ -0,0 +1,3 @@
+.class {
+  background: red;
+}
diff --git a/...cases/custom-loader-with-new-url-and-public-path/expected/webpack-5-importModule/main.css b/...cases/custom-loader-with-new-url-and-public-path/expected/webpack-5-importModule/main.css
@@ -0,0 +1,3 @@
+.foo {background: url(/public/img.png)}
+.bar {background: url(/outer-img.png)}
+.baz {background: url(/public/nested/nested-img.png)}
diff --git a/test/cases/custom-loader-with-new-url-and-public-path/expected/webpack-5/main.css b/test/cases/custom-loader-with-new-url-and-public-path/expected/webpack-5/main.css
@@ -0,0 +1,3 @@
+.foo {background: url(/public/img.png)}
+.bar {background: url(/public/../outer-img.png)}
+.baz {background: url(/public/nested/nested-img.png)}
diff --git a/test/cases/custom-loader-with-new-url-and-public-path/outer-img.png b/test/cases/custom-loader-with-new-url-and-public-path/outer-img.png
diff --git a/test/cases/custom-loader-with-new-url-and-public-path/webpack.config.js b/test/cases/custom-loader-with-new-url-and-public-path/webpack.config.js
@@ -0,0 +1,36 @@
+import path from "path";
+
+import Self from "../../../src";
+
+module.exports = {
+  entry: "./index.js",
+  context: path.resolve(__dirname, "app"),
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: Self.loader,
+            options: {
+              publicPath: "/public/",
+            },
+          },
+          "./mockLoader",
+        ],
+      },
+      {
+        test: /\.png$/,
+        type: "asset/resource",
+        generator: {
+          filename: "[path][name][ext]",
+        },
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: "[name].css",
+    }),
+  ],
+};
diff --git a/test/cases/file-loader/webpack.config.js b/test/cases/file-loader/webpack.config.js
@@ -9,15 +9,18 @@ module.exports = {
         use: [
           {
             loader: Self.loader,
+          },
+          {
+            loader: "css-loader",
             options: {
-              publicPath: "",
+              esModule: false,
             },
           },
-          "css-loader",
         ],
       },
       {
         test: /\.svg$/,
+        type: "javascript/auto",
         use: [
           {
             loader: "file-loader",

diff --git a/test/cases/js-hash/expected/webpack-5-importModule/style.17f5571b796a525cec79.1.css b/test/cases/js-hash/expected/webpack-5-importModule/style.17f5571b796a525cec79.1.css
diff --git a/...rtModule/style.00aa669429946cee3d20.2.css → ...rtModule/style.cee668336e0f53d4ab8e.2.css b/...rtModule/style.00aa669429946cee3d20.2.css → ...rtModule/style.cee668336e0f53d4ab8e.2.css
@@ -1,5 +1,5 @@
 
-.dDtFvCqivX5dncL54de5D {
+.Z_E0RPEyV1Psn6SZX9qd {
   background: green;
 }
 
diff --git a/test/cases/js-hash/expected/webpack-5-importModule/style.ff389914a5cf993f5135.1.css b/test/cases/js-hash/expected/webpack-5-importModule/style.ff389914a5cf993f5135.1.css
@@ -0,0 +1,4 @@
+.Z_E0RPEyV1Psn6SZX9qd {
+  background: red;
+}
+
diff --git a/test/cases/js-hash/expected/webpack-5/style.3e1ac9a6569d80b3d351.2.css b/test/cases/js-hash/expected/webpack-5/style.3e1ac9a6569d80b3d351.2.css
diff --git a/test/cases/js-hash/expected/webpack-5/style.5cacc352876577e35213.2.css b/test/cases/js-hash/expected/webpack-5/style.5cacc352876577e35213.2.css
@@ -0,0 +1,5 @@
+
+.Hm__zqGZU_G0Lp44yFFz {
+  background: green;
+}
+
diff --git a/test/cases/js-hash/expected/webpack-5/style.678e24a6a30ce54e924b.1.css b/test/cases/js-hash/expected/webpack-5/style.678e24a6a30ce54e924b.1.css
diff --git a/test/cases/js-hash/expected/webpack-5/style.8406295479af8ab6e76a.1.css b/test/cases/js-hash/expected/webpack-5/style.8406295479af8ab6e76a.1.css
@@ -0,0 +1,4 @@
+.Hm__zqGZU_G0Lp44yFFz {
+  background: red;
+}
+
diff --git a/test/cases/new-url-with-public-path-auto/app/mockLoader.js b/test/cases/new-url-with-public-path-auto/app/mockLoader.js
diff --git a/test/cases/new-url-with-public-path-auto/test.filter.js b/test/cases/new-url-with-public-path-auto/test.filter.js
diff --git a/test/cases/new-url-with-public-path/app/mockLoader.js b/test/cases/new-url-with-public-path/app/mockLoader.js
diff --git a/test/cases/new-url-with-public-path/test.filter.js b/test/cases/new-url-with-public-path/test.filter.js
diff --git a/...publicpath-auto/expected/assets/react.svg → ...k-5-importModule/c9e192c015437a21dea1.svg b/...publicpath-auto/expected/assets/react.svg → ...k-5-importModule/c9e192c015437a21dea1.svg
diff --git a/test/cases/publicpath-absolute-url-1/expected/webpack-5-importModule/main.css b/test/cases/publicpath-absolute-url-1/expected/webpack-5-importModule/main.css
@@ -0,0 +1,5 @@
+body {
+  background: red;
+  background-image: url(https://webpack.js.org/foo/c9e192c015437a21dea1.svg);
+}
+
diff --git a/.../cases/publicpath-compiler-auto/react.svg → ...pected/webpack-5/c9e192c015437a21dea1.svg b/.../cases/publicpath-compiler-auto/react.svg → ...pected/webpack-5/c9e192c015437a21dea1.svg