feat: pass the resourceQuery and resourceFragment to the auto a…

…nd `mode` callback (#1569)
webpack-contrib · Jan 30, 2024 · d641c4d · d641c4d
1 parent 3924679
commit d641c4d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git 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
@@ -646,15 +646,24 @@ 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;
     }
   }
 
   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
@@ -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);