refactor: import option

Author: cap-Bernardito

README.md

@@ -110,7 +110,7 @@ module.exports = {
 |                 Name                  |            Type             |      Default       | Description                                                            |
 | :-----------------------------------: | :-------------------------: | :----------------: | :--------------------------------------------------------------------- |
 |           **[`url`](#url)**           |     `{Boolean\|Object}`     |       `true`       | Enables/Disables `url`/`image-set` functions handling                  |
-|        **[`import`](#import)**        |    `{Boolean\|Function}`    |       `true`       | Enables/Disables `@import` at-rules handling                           |
+|        **[`import`](#import)**        |     `{Boolean\|Object}`     |       `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                             |
 | **[`importLoaders`](#importloaders)** |         `{Number}`          |        `0`         | Enables/Disables or setups number of loaders applied before CSS loader |
@@ -200,7 +200,7 @@ module.exports = {
 
 ### `import`
 
-Type: `Boolean|Function`
+Type: `Boolean|Object`
 Default: `true`
 
 Enables/Disables `@import` at-rules handling.
@@ -248,7 +248,7 @@ module.exports = {
 };
 ```
 
-#### `Function`
+#### `Object`
 
 Allow to filter `@import`. All filtered `@import` will not be resolved (left in the code as they were written).
 
@@ -262,15 +262,17 @@ module.exports = {
         test: /\.css$/i,
         loader: "css-loader",
         options: {
-          import: (url, media, resourcePath) => {
-            // resourcePath - path to css file
+          import: {
+            filter: (url, media, resourcePath) => {
+              // resourcePath - path to css file
 
-            // Don't handle `style.css` import
-            if (url.includes("style.css")) {
-              return false;
-            }
+              // Don't handle `style.css` import
+              if (url.includes("style.css")) {
+                return false;
+              }
 
-            return true;
+              return true;
+            },
           },
         },
       },

src/index.js

@@ -67,7 +67,7 @@ export default async function loader(content, map, meta) {
         api: importPluginApi,
         context: this.context,
         rootContext: this.rootContext,
-        filter: getFilter(options.import, this.resourcePath),
+        filter: getFilter(options.import.filter, this.resourcePath),
         resolver,
         urlHandler: (url) =>
           stringifyRequest(

src/options.json

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

test/__snapshots__/import-option.test.js.snap

@@ -6,14 +6,48 @@ exports[`validate options should throw an error on the "esModule" option with "t
    -> Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule)."
 `;
 
+exports[`validate options should throw an error on the "import" option with "() => {}" value 1`] = `
+"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
+ - options.import should be one of these:
+   boolean | object { filter? }
+   -> Enables/Disables '@import' at-rules handling (https://github.com/webpack-contrib/css-loader#import).
+   Details:
+    * options.import should be a boolean.
+    * options.import should be an object:
+      object { filter? }"
+`;
+
+exports[`validate options should throw an error on the "import" option with "[]" value 1`] = `
+"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
+ - options.import should be one of these:
+   boolean | object { filter? }
+   -> Enables/Disables '@import' at-rules handling (https://github.com/webpack-contrib/css-loader#import).
+   Details:
+    * options.import should be a boolean.
+    * options.import should be an object:
+      object { filter? }"
+`;
+
+exports[`validate options should throw an error on the "import" 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.import.filter should be an instance of function."
+`;
+
+exports[`validate options should throw an error on the "import" option with "{}" value 1`] = `
+"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
+ - options.import has an unknown property 'unknown'. These properties are valid:
+   object { filter? }"
+`;
+
 exports[`validate options should throw an error on the "import" 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.import should be one of these:
-   boolean | function
+   boolean | object { filter? }
    -> Enables/Disables '@import' at-rules handling (https://github.com/webpack-contrib/css-loader#import).
    Details:
     * options.import should be a boolean.
-    * options.import should be an instance of function."
+    * options.import should be an object:
+      object { filter? }"
 `;
 
 exports[`validate options should throw an error on the "importLoaders" option with "2.5" value 1`] = `

test/__snapshots__/url-option.test.js.snap

@@ -53,23 +53,25 @@ describe('"import" option', () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
-  it('should work when "Function"', async () => {
+  it("should work with import.filter", async () => {
     const compiler = getCompiler("./import/import.js", {
-      import: (url, media, resourcePath) => {
-        expect(url).toBeDefined();
+      import: {
+        filter: (url, media, resourcePath) => {
+          expect(url).toBeDefined();
 
-        if (url === "test-nested-media.css") {
-          expect(media).toBeDefined();
-        }
+          if (url === "test-nested-media.css") {
+            expect(media).toBeDefined();
+          }
 
-        expect(resourcePath).toBeDefined();
+          expect(resourcePath).toBeDefined();
 
-        // Don't handle `test.css`
-        if (url.includes("test.css")) {
-          return false;
-        }
+          // Don't handle `test.css`
+          if (url.includes("test.css")) {
+            return false;
+          }
 
-        return true;
+          return true;
+        },
       },
     });
     const stats = await compile(compiler);

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

@@ -50,7 +50,7 @@ describe('"url" option', () => {
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
 
-  it('should work with a value equal to "Function"', async () => {
+  it("should work with url.filter", async () => {
     const compiler = getCompiler("./url/url.js", {
       url: {
         filter: (url, resourcePath) => {

test/import-option.test.js

@@ -7,8 +7,8 @@ describe("validate options", () => {
       failure: ["true", [], () => {}, { filter: true }, { unknown: () => {} }],
     },
     import: {
-      success: [true, false, () => {}],
-      failure: ["true"],
+      success: [true, false, { filter: () => true }],
+      failure: ["true", [], () => {}, { filter: true }, { unknown: () => {} }],
     },
     modules: {
       success: [