From d641c4d48264518dfeb77d7e1e8ef03bbb09b645 Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Tue, 30 Jan 2024 19:18:21 +0300 Subject: [PATCH] feat: pass the `resourceQuery` and `resourceFragment` to the `auto` and `mode` callback (#1569) --- README.md | 27 ++++++++++++++++++++------- src/utils.js | 13 +++++++++++-- test/modules-option.test.js | 14 ++++++++++++-- 3 files changed, 43 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 33df7048..57c86b33 100644 --- a/README.md +++ b/README.md @@ -605,12 +605,19 @@ module.exports = { Type: ```ts -type auto = boolean | regExp | ((resourcePath: string) => boolean); +type auto = + | boolean + | regExp + | (( + resourcePath: string, + resourceQuery: string, + resourceFragment: string + ) => boolean); ``` Default: `undefined` -Allows auto enable CSS modules/ICSS based on filename when `modules` option is object. +Allows auto enable CSS modules/ICSS based on the filename, query or fragment when `modules` option is object. Possible values: @@ -673,7 +680,7 @@ module.exports = { ###### `function` -Enable CSS modules for files based on the filename satisfying your filter function check. +Enable CSS modules for files based on the filename, query or fragment satisfying your filter function check. **webpack.config.js** @@ -686,7 +693,9 @@ module.exports = { loader: "css-loader", options: { modules: { - auto: (resourcePath) => resourcePath.endsWith(".custom-module.css"), + auto: (resourcePath, resourceQuery, resourceFragment) => { + return resourcePath.endsWith(".custom-module.css"); + }, }, }, }, @@ -705,7 +714,11 @@ type mode = | "global" | "pure" | "icss" - | ((resourcePath: string) => "local" | "global" | "pure" | "icss"); + | (( + resourcePath: string, + resourceQuery: string, + resourceFragment: string + ) => "local" | "global" | "pure" | "icss"); ``` Default: `'local'` @@ -745,7 +758,7 @@ module.exports = { ###### `function` -Allows set different values for the `mode` option based on a filename +Allows set different values for the `mode` option based on the filename, query or fragment. Possible return values - `local`, `global`, `pure` and `icss`. @@ -761,7 +774,7 @@ module.exports = { options: { modules: { // Callback must return "local", "global", or "pure" values - mode: (resourcePath) => { + mode: (resourcePath, resourceQuery, resourceFragment) => { if (/pure.css$/i.test(resourcePath)) { return "pure"; } diff --git a/src/utils.js b/src/utils.js index 8ce299fd..9d68a598 100644 --- a/src/utils.js +++ b/src/utils.js @@ -646,7 +646,12 @@ function getModulesOptions(rawOptions, exportType, loaderContext) { return false; } } else if (typeof modulesOptions.auto === "function") { - const isModule = modulesOptions.auto(resourcePath); + const { resourceQuery, resourceFragment } = loaderContext; + const isModule = modulesOptions.auto( + resourcePath, + resourceQuery, + resourceFragment + ); if (!isModule) { return false; @@ -654,7 +659,11 @@ function getModulesOptions(rawOptions, exportType, loaderContext) { } if (typeof modulesOptions.mode === "function") { - modulesOptions.mode = modulesOptions.mode(loaderContext.resourcePath); + modulesOptions.mode = modulesOptions.mode( + loaderContext.resourcePath, + loaderContext.resourceQuery, + loaderContext.resourceFragment + ); } if (needNamedExport) { diff --git a/test/modules-option.test.js b/test/modules-option.test.js index 99bacdbd..ed4b9329 100644 --- a/test/modules-option.test.js +++ b/test/modules-option.test.js @@ -834,7 +834,11 @@ describe('"modules" option', () => { it("issue #1063", async () => { const compiler = getCompiler("./modules/issue-1063/issue-1063.js", { modules: { - mode: (resourcePath) => { + mode: (resourcePath, resourceQuery, resourceFragment) => { + expect(resourcePath).toBeDefined(); + expect(resourceQuery).toBeDefined(); + expect(resourceFragment).toBeDefined(); + if (/pure.css$/i.test(resourcePath)) { return "pure"; } @@ -1269,7 +1273,13 @@ describe('"modules" option', () => { it('should work with a modules.auto Function that returns "true"', async () => { const compiler = getCompiler("./modules/mode/modules.js", { modules: { - auto: (relativePath) => relativePath.endsWith("module.css"), + auto: (resourcePath, resourceQuery, resourceFragment) => { + expect(resourcePath).toBeDefined(); + expect(resourceQuery).toBeDefined(); + expect(resourceFragment).toBeDefined(); + + return resourcePath.endsWith("module.css"); + }, }, }); const stats = await compile(compiler);