refactor: url option

Author: cap-Bernardito

README.md

@@ -109,7 +109,7 @@ module.exports = {
 
 |                 Name                  |            Type             |      Default       | Description                                                            |
 | :-----------------------------------: | :-------------------------: | :----------------: | :--------------------------------------------------------------------- |
-|           **[`url`](#url)**           |    `{Boolean\|Function}`    |       `true`       | Enables/Disables `url`/`image-set` functions handling                  |
+|           **[`url`](#url)**           |     `{Boolean\|Object}`     |       `true`       | Enables/Disables `url`/`image-set` functions handling                  |
 |        **[`import`](#import)**        |    `{Boolean\|Function}`    |       `true`       | Enables/Disables `@import` at-rules handling                           |
 |       **[`modules`](#modules)**       | `{Boolean\|String\|Object}` |   `{auto: true}`   | Enables/Disables CSS Modules and their configuration                   |
 |     **[`sourceMap`](#sourcemap)**     |         `{Boolean}`         | `compiler.devtool` | Enables/Disables generation of source maps                             |
@@ -118,7 +118,7 @@ module.exports = {
 
 ### `url`
 
-Type: `Boolean|Function`
+Type: `Boolean|Object`
 Default: `true`
 
 Enables/Disables `url`/`image-set` functions handling.
@@ -165,7 +165,7 @@ module.exports = {
 };
 ```
 
-#### `Function`
+#### `Object`
 
 Allow to filter `url()`. All filtered `url()` will not be resolved (left in the code as they were written).
 
@@ -179,15 +179,17 @@ module.exports = {
         test: /\.css$/i,
         loader: "css-loader",
         options: {
-          url: (url, resourcePath) => {
-            // resourcePath - path to css file
+          url: {
+            filter: (url, resourcePath) => {
+              // resourcePath - path to css file
 
-            // Don't handle `img.png` urls
-            if (url.includes("img.png")) {
-              return false;
-            }
+              // Don't handle `img.png` urls
+              if (url.includes("img.png")) {
+                return false;
+              }
 
-            return true;
+              return true;
+            },
           },
         },
       },

src/index.js

@@ -94,7 +94,7 @@ export default async function loader(content, map, meta) {
         replacements,
         context: this.context,
         rootContext: this.rootContext,
-        filter: getFilter(options.url, this.resourcePath),
+        filter: getFilter(options.url.filter, this.resourcePath),
         resolver: urlResolver,
         urlHandler: (url) => stringifyRequest(this, url),
       })

src/options.json

@@ -9,7 +9,13 @@
           "type": "boolean"
         },
         {
-          "instanceof": "Function"
+          "type": "object",
+          "properties": {
+            "filter": {
+              "instanceof": "Function"
+            }
+          },
+          "additionalProperties": false
         }
       ]
     },

test/__snapshots__/validate-options.test.js.snap

@@ -278,12 +278,46 @@ exports[`validate options should throw an error on the "unknown" option with "tr
    object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }"
 `;
 
+exports[`validate options should throw an error on the "url" option with "() => {}" value 1`] = `
+"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
+ - options.url should be one of these:
+   boolean | object { filter? }
+   -> Enables/Disables 'url'/'image-set' functions handling (https://github.com/webpack-contrib/css-loader#url).
+   Details:
+    * options.url should be a boolean.
+    * options.url should be an object:
+      object { filter? }"
+`;
+
+exports[`validate options should throw an error on the "url" option with "[]" value 1`] = `
+"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
+ - options.url should be one of these:
+   boolean | object { filter? }
+   -> Enables/Disables 'url'/'image-set' functions handling (https://github.com/webpack-contrib/css-loader#url).
+   Details:
+    * options.url should be a boolean.
+    * options.url should be an object:
+      object { filter? }"
+`;
+
+exports[`validate options should throw an error on the "url" option with "{"filter":true}" value 1`] = `
+"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
+ - options.url.filter should be an instance of function."
+`;
+
+exports[`validate options should throw an error on the "url" option with "{}" value 1`] = `
+"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
+ - options.url has an unknown property 'unknown'. These properties are valid:
+   object { filter? }"
+`;
+
 exports[`validate options should throw an error on the "url" option with "true" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options.url should be one of these:
-   boolean | function
+   boolean | object { filter? }
    -> Enables/Disables 'url'/'image-set' functions handling (https://github.com/webpack-contrib/css-loader#url).
    Details:
     * options.url should be a boolean.
-    * options.url should be an instance of function."
+    * options.url should be an object:
+      object { filter? }"
 `;

test/url-option.test.js

@@ -52,19 +52,21 @@ describe('"url" option', () => {
 
   it('should work with a value equal to "Function"', async () => {
     const compiler = getCompiler("./url/url.js", {
-      url: (url, resourcePath) => {
-        expect(typeof resourcePath === "string").toBe(true);
+      url: {
+        filter: (url, resourcePath) => {
+          expect(typeof resourcePath === "string").toBe(true);
 
-        if (url.startsWith("/guide/img")) {
-          return false;
-        }
+          if (url.startsWith("/guide/img")) {
+            return false;
+          }
 
-        // Don't handle `img.png`
-        if (url.includes("img.png")) {
-          return false;
-        }
+          // Don't handle `img.png`
+          if (url.includes("img.png")) {
+            return false;
+          }
 
-        return true;
+          return true;
+        },
       },
     });
     const stats = await compile(compiler);

test/validate-options.test.js

@@ -3,8 +3,8 @@ import { getCompiler, compile } from "./helpers/index";
 describe("validate options", () => {
   const tests = {
     url: {
-      success: [true, false, () => {}],
-      failure: ["true"],
+      success: [true, false, { filter: () => true }],
+      failure: ["true", [], () => {}, { filter: true }, { unknown: () => {} }],
     },
     import: {
       success: [true, false, () => {}],