From 2f4c27399fdadace5af221ae8df95a36642a377e Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Sun, 13 Nov 2022 19:02:01 +0300 Subject: [PATCH] fix: css modules generation with inline syntax (#1480) --- src/utils.js | 10 ++++++- test/__snapshots__/loader.test.js.snap | 30 +++++++++---------- .../__snapshots__/modules-option.test.js.snap | 10 +++---- test/fixtures/index-loader-syntax.js | 2 +- 4 files changed, 30 insertions(+), 22 deletions(-) diff --git a/src/utils.js b/src/utils.js index ea59b235..9d6217be 100644 --- a/src/utils.js +++ b/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 --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index 195e272c..26b5872b 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/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 --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index e52dfe07..d81968da 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/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 --git a/test/fixtures/index-loader-syntax.js b/test/fixtures/index-loader-syntax.js index 7648acf2..d199beb8 100644 --- a/test/fixtures/index-loader-syntax.js +++ b/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]; \ No newline at end of file +export default [...one, ...two, ...three, ...four];