fix: css modules generation with inline syntax (#1480)

Author: alexander-akait

Diff for: src/utils.js

@@ -332,10 +332,18 @@ function defaultGetLocalIdent(
 ) {
   const { context, hashSalt, hashStrategy } = options;
   const { resourcePath } = loaderContext;
-  const relativeResourcePath = normalizePath(
+  let relativeResourcePath = normalizePath(
     path.relative(context, resourcePath)
   );
 
+  // eslint-disable-next-line no-underscore-dangle
+  if (loaderContext._module && loaderContext._module.matchResource) {
+    relativeResourcePath = `${normalizePath(
+      // eslint-disable-next-line no-underscore-dangle
+      path.relative(context, loaderContext._module.matchResource)
+    )}`;
+  }
+
   // eslint-disable-next-line no-param-reassign
   options.content =
     hashStrategy === "minimal-subset" && /\[local\]/.test(localIdentName)

Diff for: test/__snapshots__/loader.test.js.snap

@@ -852,66 +852,66 @@ exports[`loader should work with inline module syntax: result 1`] = `
 Array [
   Array [
     "other.modules.css!=!../../src/index.js??ruleSet[1].rules[0].rules[0]!../../node_modules/sass-loader/dist/cjs.js!./index-loader-syntax.modules.css",
-    ".L34UCpsDMDUf5cci5FTp {
+    ".ZVx7VAdLOO3PJ1TqkYUn {
   color: red;
 }
 
-.cR0dzE36E911coHAsfAF {
+.x0BV6RnIqi6PTJ6If2oA {
   color: white;
 }",
     "",
   ],
   Array [
     "button.modules.css!=!./index-loader-syntax-sass.css",
-    ".Bm6FV6LbXUxAkIaBjl7y {
+    ".n6iVkcAs9Wu9ovztqf8g {
   width: 5px;
 }",
     "",
   ],
   Array [
     "other.modules.scss!=!../../src/index.js??ruleSet[1].rules[0].rules[0]!../../node_modules/sass-loader/dist/cjs.js!./index-loader-syntax-sass.modules.css",
-    ".JkECLtXaeLgZptjLMVOV > .cg9Qb_Gz48g_sQh4Pjap {
+    ".NF9v028MAhreSp2TJZnn > .ss2pNzM7P7DcLJerCZFm {
   color: red;
 }",
     "",
   ],
   Array [
     "other.modules.css!=!../../src/index.js??ruleSet[1].rules[0].rules[0]!../../node_modules/sass-loader/dist/cjs.js!./my-inline-loader/index.js!./index-loader-syntax.modules.css",
-    ".L34UCpsDMDUf5cci5FTp {
+    ".ZVx7VAdLOO3PJ1TqkYUn {
   color: red;
 }
 
-.cR0dzE36E911coHAsfAF {
+.x0BV6RnIqi6PTJ6If2oA {
   color: white;
 }
 
-.BBGEY4nuDapXZ5Z5Llcd {
+.bNEIH_2ycglHGlceq20s {
   from: custom;
 }",
     "",
   ],
   Array [
     "other.modules.css!=!../../src/index.js??ruleSet[1].rules[0].rules[0]!../../node_modules/sass-loader/dist/cjs.js!./my-inline-loader/index.js!./index-loader-syntax.modules.css",
-    ".L34UCpsDMDUf5cci5FTp {
+    ".ZVx7VAdLOO3PJ1TqkYUn {
   color: red;
 }
 
-.cR0dzE36E911coHAsfAF {
+.x0BV6RnIqi6PTJ6If2oA {
   color: white;
 }
 
-.BBGEY4nuDapXZ5Z5Llcd {
+.bNEIH_2ycglHGlceq20s {
   from: custom;
 }",
     "",
   ],
   Array [
     "other.modules.scss!=!../../src/index.js??ruleSet[1].rules[0].rules[0]!../../node_modules/sass-loader/dist/cjs.js!./my-inline-loader/index.js!./index-loader-syntax-sass.modules.css",
-    ".JkECLtXaeLgZptjLMVOV > .cg9Qb_Gz48g_sQh4Pjap {
+    ".NF9v028MAhreSp2TJZnn > .ss2pNzM7P7DcLJerCZFm {
   color: red;
 }
 
-.WJ9UGZwK6YvLQsxARKO1 {
+.NMxzPXmuJS2nd8LarB5I {
   from: custom;
 }",
     "",
@@ -925,21 +925,21 @@ Array [
   ],
   Array [
     "button.modules.css!=!./index-loader-syntax-sass.css",
-    ".Bm6FV6LbXUxAkIaBjl7y {
+    ".n6iVkcAs9Wu9ovztqf8g {
   width: 5px;
 }",
     "",
   ],
   Array [
     "button.module.scss!=!./base64-loader/index.js?LmZvbyB7IGNvbG9yOiByZWQ7IH0=!./simple.js?foo=bar",
-    ".nQ7qpE_fxjuYDsViKqtM {
+    ".QwIaKzIX2nnuKwGnu953 {
   color: red;
 }",
     "",
   ],
   Array [
     "other.module.scss!=!./base64-loader/index.js?LmZvbyB7IGNvbG9yOiByZWQ7IH0=!./simple.js?foo=baz",
-    ".nQ7qpE_fxjuYDsViKqtM {
+    ".L_0U1ZWuSHuIqdUV6KjO {
   color: red;
 }",
     "",

Diff for: test/__snapshots__/modules-option.test.js.snap

@@ -5851,11 +5851,11 @@ import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../src/runtime/noSour
 import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\";
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\".dvYI1gdIOPlJqjwAWOo8 {\\\\n  color: red;\\\\n}\\\\n\\\\n.s4qiGaiPSoYikcMyZg9a { from: custom; }\\", \\"\\"]);
+___CSS_LOADER_EXPORT___.push([module.id, \\".mCRIw6YAFAAC3_rE9RUZ {\\\\n  color: red;\\\\n}\\\\n\\\\n.bNEIH_2ycglHGlceq20s { from: custom; }\\", \\"\\"]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
-	\\"some-class\\": \\"dvYI1gdIOPlJqjwAWOo8\\",
-	\\"class\\": \\"s4qiGaiPSoYikcMyZg9a\\"
+	\\"some-class\\": \\"mCRIw6YAFAAC3_rE9RUZ\\",
+	\\"class\\": \\"bNEIH_2ycglHGlceq20s\\"
 };
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -5890,11 +5890,11 @@ Array [
   ],
   Array [
     "other.modules.css!=!./my-inline-loader/index.js!./simple.css",
-    ".dvYI1gdIOPlJqjwAWOo8 {
+    ".mCRIw6YAFAAC3_rE9RUZ {
   color: red;
 }
 
-.s4qiGaiPSoYikcMyZg9a { from: custom; }",
+.bNEIH_2ycglHGlceq20s { from: custom; }",
     "",
   ],
   Array [

Diff for: test/fixtures/index-loader-syntax.js

@@ -6,4 +6,4 @@ import four from './other.module.scss!=!./base64-loader?LmZvbyB7IGNvbG9yOiByZWQ7
 
 __export__ = [...one, ...two, ...three, ...four];
 
-export default [...one, ...two, ...three, ...four];
+export default [...one, ...two, ...three, ...four];