fix: the auto option for inline module syntax (#1274)

Author: alexander-akait

package-lock.json

@@ -67,7 +67,7 @@
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
     "es-check": "^5.2.3",
-    "eslint": "^7.21.0",
+    "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.1",
     "file-loader": "^6.2.0",
@@ -90,7 +90,7 @@
     "stylus": "^0.54.8",
     "stylus-loader": "^4.3.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.24.4"
+    "webpack": "^5.26.0"
   },
   "keywords": [
     "webpack",

package.json

@@ -68,12 +68,22 @@ function defaultGetLocalIdent(
   localName,
   options
 ) {
-  const { context, hashPrefix } = options;
-  const { resourcePath } = loaderContext;
-  const request = normalizePath(path.relative(context, resourcePath));
+  let relativeMatchResource = "";
+
+  // eslint-disable-next-line no-underscore-dangle
+  if (loaderContext._module.matchResource) {
+    relativeMatchResource = `${normalizePath(
+      // eslint-disable-next-line no-underscore-dangle
+      path.relative(options.context, loaderContext._module.matchResource)
+    )}\x00`;
+  }
+
+  const relativeResourcePath = normalizePath(
+    path.relative(options.context, loaderContext.resourcePath)
+  );
 
   // eslint-disable-next-line no-param-reassign
-  options.content = `${hashPrefix + request}\x00${localName}`;
+  options.content = `${options.hashPrefix}${relativeMatchResource}${relativeResourcePath}\x00${localName}`;
 
   return interpolateName(loaderContext, localIdentName, options);
 }
@@ -126,7 +136,10 @@ const moduleRegExp = /\.module(s)?\.\w+$/i;
 const icssRegExp = /\.icss\.\w+$/i;
 
 function getModulesOptions(rawOptions, loaderContext) {
-  const { resourcePath } = loaderContext;
+  const resourcePath =
+    // eslint-disable-next-line no-underscore-dangle
+    loaderContext._module.matchResource || loaderContext.resourcePath;
+
   let isIcss;
 
   if (typeof rawOptions.modules === "undefined") {

src/utils.js

@@ -665,66 +665,66 @@ exports[`loader should work with inline module syntax: result 1`] = `
 Array [
   Array [
     "other.modules.css!=!../../src/index.js?[ident]!./index-loader-syntax.modules.css",
-    "._1ZJhuRHDA53bY_Z4Qfm2b4 {
+    "._14oM7qkZ6dgC62uK5h4NI0 {
   color: red;
 }
 
-.j3CQSVq_DdDvo0Ew74yQi {
+._2NqyYysncZeLetATpl0xfW {
   color: white;
 }",
     "",
   ],
   Array [
-    "plain.scss!=!../../src/index.js?[ident]!./index-loader-syntax-sass.css",
-    ".baz {
+    "button.modules.css!=!./index-loader-syntax-sass.css",
+    "._8aapa4kQQdSsOoRODcrwe {
   width: 5px;
 }",
     "",
   ],
   Array [
     "other.modules.scss!=!../../src/index.js?[ident]!./index-loader-syntax-sass.modules.css",
-    "._1fGl5mRxLFCqIet0X3JYrB > ._2pVMnENaxk1YmKug-4EMYF {
+    "._2yVYVQfmDwKLZn9Qj6k_Q5 > ._3rHlnRnPEotX4nTkd82-aE {
   color: red;
 }",
     "",
   ],
   Array [
     "other.modules.css!=!../../src/index.js?[ident]!./index-loader-syntax.modules.css",
-    "._1ZJhuRHDA53bY_Z4Qfm2b4 {
+    "._14oM7qkZ6dgC62uK5h4NI0 {
   color: red;
 }
 
-.j3CQSVq_DdDvo0Ew74yQi {
+._2NqyYysncZeLetATpl0xfW {
   color: white;
 }
 
-.B7fdaUjwJ3YVou1v7dYEE {
+._1-Aa1c8UQML46IWY0FjGXT {
   from: custom;
 }",
     "",
   ],
   Array [
     "other.modules.css!=!../../src/index.js?[ident]!./index-loader-syntax.modules.css",
-    "._1ZJhuRHDA53bY_Z4Qfm2b4 {
+    "._14oM7qkZ6dgC62uK5h4NI0 {
   color: red;
 }
 
-.j3CQSVq_DdDvo0Ew74yQi {
+._2NqyYysncZeLetATpl0xfW {
   color: white;
 }
 
-.B7fdaUjwJ3YVou1v7dYEE {
+._1-Aa1c8UQML46IWY0FjGXT {
   from: custom;
 }",
     "",
   ],
   Array [
     "other.modules.scss!=!../../src/index.js?[ident]!./index-loader-syntax-sass.modules.css",
-    "._1fGl5mRxLFCqIet0X3JYrB > ._2pVMnENaxk1YmKug-4EMYF {
+    "._2yVYVQfmDwKLZn9Qj6k_Q5 > ._3rHlnRnPEotX4nTkd82-aE {
   color: red;
 }
 
-._1kK_VYa-N303wnLgpvL-7d {
+._2kEhhupr-6tgHnCC_d4yO8 {
   from: custom;
 }",
     "",
@@ -733,6 +733,27 @@ Array [
     "./index-loader-syntax.css",
     ".a {
   color: red;
+}",
+    "",
+  ],
+  Array [
+    "button.modules.css!=!./index-loader-syntax-sass.css",
+    "._8aapa4kQQdSsOoRODcrwe {
+  width: 5px;
+}",
+    "",
+  ],
+  Array [
+    "button.module.scss!=!./base64-loader/index.js?[ident]!./simple.js?foo=bar",
+    "._2hfVrRfux-FOrqimHr-fzt {
+  color: red;
+}",
+    "",
+  ],
+  Array [
+    "other.module.scss!=!./base64-loader/index.js?[ident]!./simple.js?foo=baz",
+    "._2jOyhMQwdpQ85V5dDLcfoG {
+  color: red;
 }",
     "",
   ],

test/__snapshots__/loader.test.js.snap

@@ -0,0 +1,3 @@
+module.exports = function loader(content) {
+    return Buffer.from(this.query.slice(1), 'base64').toString('ascii');
+};

test/fixtures/base64-loader/index.js

@@ -1,5 +1,9 @@
-import css from './index-loader-syntax.css';
+import one from './index-loader-syntax.css';
+import two from 'button.modules.css!=!./index-loader-syntax-sass.css';
+// Hash should be different
+import three from './button.module.scss!=!./base64-loader?LmZvbyB7IGNvbG9yOiByZWQ7IH0=!./simple.js?foo=bar';
+import four from './other.module.scss!=!./base64-loader?LmZvbyB7IGNvbG9yOiByZWQ7IH0=!./simple.js?foo=baz';
 
-__export__ = css;
+__export__ = [...one, ...two, ...three, ...four];
 
-export default css;
+export default [...one, ...two, ...three, ...four];

test/fixtures/index-loader-syntax.js

@@ -501,7 +501,7 @@ describe('"sourceMap" option', () => {
 
       expect(chunkName).toBe(
         webpack.version[0] === "5"
-          ? "main.89840c70616b788038a2.bundle.js"
+          ? "main.a531550ffe767c49e881.bundle.js"
           : "main.19efc497c5c37fc5e355.bundle.js"
       );
       expect(