refactor: removed importLoaders in favor import.loaders

Author: cap-Bernardito

README.md

@@ -107,14 +107,13 @@ module.exports = {
 
 ## Options
 
-|                 Name                  |            Type             |      Default       | Description                                                            |
-| :-----------------------------------: | :-------------------------: | :----------------: | :--------------------------------------------------------------------- |
-|           **[`url`](#url)**           |     `{Boolean\|Object}`     |       `true`       | Enables/Disables `url`/`image-set` functions 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 |
-|      **[`esModule`](#esmodule)**      |         `{Boolean}`         |       `true`       | Use ES modules syntax                                                  |
+|             Name              |            Type             |      Default       | Description                                           |
+| :---------------------------: | :-------------------------: | :----------------: | :---------------------------------------------------- |
+|       **[`url`](#url)**       |     `{Boolean\|Object}`     |       `true`       | Enables/Disables `url`/`image-set` functions 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            |
+|  **[`esModule`](#esmodule)**  |         `{Boolean}`         |       `true`       | Use ES modules syntax                                 |
 
 ### `url`
 
@@ -250,6 +249,16 @@ module.exports = {
 
 #### `Object`
 
+|           Name            |     Type     |   Default   | Description                                                            |
+| :-----------------------: | :----------: | :---------: | :--------------------------------------------------------------------- |
+|  **[`filter`](#filter)**  | `{Function}` | `undefined` | Allow to filter `@import`                                              |
+| **[`loaders`](#loaders)** |  `{Number}`  |     `0`     | Enables/Disables or setups number of loaders applied before CSS loader |
+
+##### `filter`
+
+Type: `Function`
+Default: `undefined`
+
 Allow to filter `@import`. All filtered `@import` will not be resolved (left in the code as they were written).
 
 **webpack.config.js**
@@ -281,6 +290,47 @@ module.exports = {
 };
 ```
 
+##### `loaders`
+
+Type: `Number`
+Default: `0`
+
+Enables/Disables or setups number of loaders applied before CSS loader.
+
+The option `import.loaders` allows you to configure how many loaders before `css-loader` should be applied to `@import`ed resources.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [
+          "style-loader",
+          {
+            loader: "css-loader",
+            options: {
+              import: {
+                loaders: 2,
+                // 0 => no loaders (default);
+                // 1 => postcss-loader;
+                // 2 => postcss-loader, sass-loader
+              },
+            },
+          },
+          "postcss-loader",
+          "sass-loader",
+        ],
+      },
+    ],
+  },
+};
+```
+
+This may change in the future when the module system (i. e. webpack) supports loader matching by origin.
+
 ### `modules`
 
 Type: `Boolean|String|Object`
@@ -1063,45 +1113,6 @@ module.exports = {
 };
 ```
 
-### `importLoaders`
-
-Type: `Number`
-Default: `0`
-
-Enables/Disables or setups number of loaders applied before CSS loader.
-
-The option `importLoaders` allows you to configure how many loaders before `css-loader` should be applied to `@import`ed resources.
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        use: [
-          "style-loader",
-          {
-            loader: "css-loader",
-            options: {
-              importLoaders: 2,
-              // 0 => no loaders (default);
-              // 1 => postcss-loader;
-              // 2 => postcss-loader, sass-loader
-            },
-          },
-          "postcss-loader",
-          "sass-loader",
-        ],
-      },
-    ],
-  },
-};
-```
-
-This may change in the future when the module system (i. e. webpack) supports loader matching by origin.
-
 ### `esModule`
 
 Type: `Boolean`

src/index.js

@@ -20,6 +20,7 @@ import {
   getPreRequester,
   getExportCode,
   getFilter,
+  getImportLoaders,
   getImportCode,
   getModuleCode,
   getModulesPlugins,
@@ -72,7 +73,10 @@ export default async function loader(content, map, meta) {
         urlHandler: (url) =>
           stringifyRequest(
             this,
-            combineRequests(getPreRequester(this)(options.importLoaders), url)
+            combineRequests(
+              getPreRequester(this)(getImportLoaders(options.import.loaders)),
+              url
+            )
           ),
       })
     );
@@ -124,7 +128,10 @@ export default async function loader(content, map, meta) {
         urlHandler: (url) =>
           stringifyRequest(
             this,
-            combineRequests(getPreRequester(this)(options.importLoaders), url)
+            combineRequests(
+              getPreRequester(this)(getImportLoaders(options.import.loaders)),
+              url
+            )
           ),
       })
     );

src/options.json

@@ -30,6 +30,20 @@
           "properties": {
             "filter": {
               "instanceof": "Function"
+            },
+            "loaders": {
+              "description": "Enables/Disables or setups number of loaders applied before CSS loader (https://github.com/webpack-contrib/css-loader#importloaders).",
+              "anyOf": [
+                {
+                  "type": "boolean"
+                },
+                {
+                  "type": "string"
+                },
+                {
+                  "type": "integer"
+                }
+              ]
             }
           },
           "additionalProperties": false
@@ -139,20 +153,6 @@
       "description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/css-loader#sourcemap).",
       "type": "boolean"
     },
-    "importLoaders": {
-      "description": "Enables/Disables or setups number of loaders applied before CSS loader (https://github.com/webpack-contrib/css-loader#importloaders).",
-      "anyOf": [
-        {
-          "type": "boolean"
-        },
-        {
-          "type": "string"
-        },
-        {
-          "type": "integer"
-        }
-      ]
-    },
     "esModule": {
       "description": "Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule).",
       "type": "boolean"

src/utils.js

@@ -256,6 +256,10 @@ function getFilter(filter, resourcePath) {
   };
 }
 
+function getImportLoaders(loaders) {
+  return typeof loaders === "string" ? parseInt(loaders, 10) : loaders;
+}
+
 function getValidLocalName(localName, exportLocalsConvention) {
   if (exportLocalsConvention === "dashesOnly") {
     return dashesCamelCase(localName);
@@ -390,10 +394,6 @@ function normalizeOptions(rawOptions, loaderContext) {
       typeof rawOptions.sourceMap === "boolean"
         ? rawOptions.sourceMap
         : loaderContext.sourceMap,
-    importLoaders:
-      typeof rawOptions.importLoaders === "string"
-        ? parseInt(rawOptions.importLoaders, 10)
-        : rawOptions.importLoaders,
     esModule:
       typeof rawOptions.esModule === "undefined" ? true : rawOptions.esModule,
   };
@@ -871,6 +871,7 @@ export {
   normalizeUrl,
   requestify,
   getFilter,
+  getImportLoaders,
   getModulesOptions,
   getModulesPlugins,
   normalizeSourceMap,

test/__snapshots__/loader.test.js.snap

@@ -773,9 +773,9 @@ Array [
 
 exports[`loader should work with none AST metadata: warnings 1`] = `Array []`;
 
-exports[`loader should work with the "modules.auto" option and the "importLoaders" option: errors 1`] = `Array []`;
+exports[`loader should work with the "modules.auto" option and the "import.loaders" option: errors 1`] = `Array []`;
 
-exports[`loader should work with the "modules.auto" option and the "importLoaders" option: result 1`] = `
+exports[`loader should work with the "modules.auto" option and the "import.loaders" option: result 1`] = `
 "/* Pure CSS */
 .imported-by-pure {
   overflow-x: hidden;
@@ -841,7 +841,7 @@ exports[`loader should work with the "modules.auto" option and the "importLoader
 "
 `;
 
-exports[`loader should work with the "modules.auto" option and the "importLoaders" option: warnings 1`] = `Array []`;
+exports[`loader should work with the "modules.auto" option and the "import.loaders" option: warnings 1`] = `Array []`;
 
 exports[`loader should work with webpackIgnore comment: errors 1`] = `Array []`;
 

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

@@ -9,56 +9,60 @@ exports[`validate options should throw an error on the "esModule" option with "t
 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? }
+   boolean | object { filter?, loaders? }
    -> 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? }"
+      object { filter?, loaders? }"
 `;
 
 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? }
+   boolean | object { filter?, loaders? }
    -> 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? }"
+      object { filter?, loaders? }"
 `;
 
 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 "{"loaders":2.5}" 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?, loaders? }
+   -> Enables/Disables '@import' at-rules handling (https://github.com/webpack-contrib/css-loader#import).
+   Details:
+    * options.import.loaders should be one of these:
+      boolean | string | integer
+      -> Enables/Disables or setups number of loaders applied before CSS loader (https://github.com/webpack-contrib/css-loader#importloaders).
+      Details:
+       * options.import.loaders should be a boolean.
+       * options.import.loaders should be a string.
+       * options.import.loaders should be a integer."
+`;
+
 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? }"
+   object { filter?, loaders? }"
 `;
 
 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 | object { filter? }
+   boolean | object { filter?, loaders? }
    -> 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 "importLoaders" option with "2.5" value 1`] = `
-"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- - options.importLoaders should be one of these:
-   boolean | string | integer
-   -> Enables/Disables or setups number of loaders applied before CSS loader (https://github.com/webpack-contrib/css-loader#importloaders).
-   Details:
-    * options.importLoaders should be a boolean.
-    * options.importLoaders should be a string.
-    * options.importLoaders should be a integer."
+      object { filter?, loaders? }"
 `;
 
 exports[`validate options should throw an error on the "modules" option with "{"auto":"invalid"}" value 1`] = `
@@ -267,49 +271,49 @@ exports[`validate options should throw an error on the "sourceMap" option with "
 exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }"
+   object { url?, import?, modules?, sourceMap?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }"
+   object { url?, import?, modules?, sourceMap?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }"
+   object { url?, import?, modules?, sourceMap?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }"
+   object { url?, import?, modules?, sourceMap?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }"
+   object { url?, import?, modules?, sourceMap?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }"
+   object { url?, import?, modules?, sourceMap?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = `
 "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }"
+   object { url?, import?, modules?, sourceMap?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" 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 has an unknown property 'unknown'. These properties are valid:
-   object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }"
+   object { url?, import?, modules?, sourceMap?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "url" option with "() => {}" value 1`] = `