refactor: fix bugs before release

Author: alexander-akait

CHANGELOG.md

@@ -8,27 +8,33 @@ All notable changes to this project will be documented in this file. See [standa
 ### ⚠ BREAKING CHANGES
 
 * minimum supported `Node.js` version is `12.13.0`
-* minimum supported `weboack` version is `5`
+* minimum supported `webpack` version is `5`, we recommend to update to the latest version for better performance
 * for `url` and `import` options `Function` type was removed in favor `Object` type with the `filter` property, i.e. before `{ url: () => true }`, now `{ url: { filter: () => true } }` and  before `{ import: () => true }`, now `{ import: { filter: () => true } }`
-* the `importLoaders` option was removed in favor in favor `import.loaders` option
 * the `modules.compileType` option was removed in favor the `modules.mode` option with `icss` value, also the `modules` option can have `icss` string value
 * `new URL()` syntax used for `url()`, only when the `esModules` option is enabled (enabled by default), it means you can bundle CSS for libraries
 * [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) are handling in `url()`, it means you can register loaders for them, [example](https://webpack.js.org/configuration/module/#rulescheme)
 * aliases with `false` value for `url()` now generate empty data URI (i.e. `data:0,`), only when the `esModules` option is enabled (enabled by default)
-* using `~` is deprecated when the `esModules` option is enabled (enabled by default) and can be removed from your code (**we recommend it**), but we still support it for historical reasons. Why you can removed it? The loader will first try to resolve `@import`/`url()` as relative, if it cannot be resolved, the loader will try to resolve `@import`/`url()` inside [`node_modules` or modules directories](https://webpack.js.org/configuration/resolve/#resolvemodules).
+* using `~` is deprecated when the `esModules` option is enabled (enabled by default) and can be removed from your code (**we recommend it**) (`url(~package/image.png)` -> `url(package/image.png)`, `@import url(~package/style.css)` -> `@import url(package/style.css)`, `composes: import from '~package/one.css';` -> `composes: import from 'package/one.css';`), but we still support it for historical reasons. Why you can removed it? The loader will first try to resolve `@import`/`url()`/etc as relative, if it cannot be resolved, the loader will try to resolve `@import`/`url()`/etc inside [`node_modules` or modules directories](https://webpack.js.org/configuration/resolve/#resolvemodules).
 * `[ext]` placeholder don't need `.` (dot) before for the `localIdentName` option, i.e. please change `.[ext]` on `[ext]` (no dot before) 
 * `[folder]` placeholder was removed without replacement for the `localIdentName` option, please use a custom function if you need complex logic
 * `[emoji]` placeholder was removed without replacement for the `localIdentName` option, please use a custom function if you need complex logic
 * the `localIdentHashPrefix` was removed in favor the `localIdentHashSalt` option
 
 ### Features
 
+* supported [`resolve.byDependency.css`](https://webpack.js.org/configuration/resolve/#resolvebydependency) resolve options for `@import`
+* supported [`resolve.byDependency.icss`](https://webpack.js.org/configuration/resolve/#resolvebydependency) resolve CSS modules and ICSS imports (i.e. `composes`/etc)
 * added `modules.localIdentHashFunction`, `modules.localIdentHashDigest`, `modules.localIdentHashDigestLength` options for better class hashing controlling
 * less dependencies
 
 ### Bug Fixes
 
 * better performance
+* fixed circular `@import`
+
+### Notes
+
+* **we strongly recommend not to add `.css` to `resolve.extensions`, it reduces performance and in most cases it is simply not necessary, alternative you can set resolve options [by dependency](https://webpack.js.org/configuration/resolve/#resolvebydependency)**   
 
 ### [5.2.7](https://github.com/webpack-contrib/css-loader/compare/v5.2.6...v5.2.7) (2021-07-13)
 

README.md

@@ -109,13 +109,14 @@ 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            |
-|  **[`esModule`](#esmodule)**  |         `{Boolean}`         |       `true`       | Use ES modules syntax                                 |
+|                 Name                  |            Type             |      Default       | Description                                                                                                              |
+| :-----------------------------------: | :-------------------------: | :----------------: | :----------------------------------------------------------------------------------------------------------------------- |
+|           **[`url`](#url)**           |     `{Boolean\|Object}`     |       `true`       | Allows to enables/disables `url()`/`image-set()` functions handling                                                      |
+|        **[`import`](#import)**        |     `{Boolean\|Object}`     |       `true`       | Allows to enables/disables `@import` at-rules handling                                                                   |
+|       **[`modules`](#modules)**       | `{Boolean\|String\|Object}` |   `{auto: true}`   | Allows to enables/disables or setup CSS Modules options                                                                  |
+|     **[`sourceMap`](#sourcemap)**     |         `{Boolean}`         | `compiler.devtool` | Enables/Disables generation of source maps                                                                               |
+| **[`importLoaders`](#importloaders)** |         `{Number}`          |        `0`         | Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports |
+|      **[`esModule`](#esmodule)**      |         `{Boolean}`         |       `true`       | Use ES modules syntax                                                                                                    |
 
 ### `url`
 
@@ -253,10 +254,9 @@ 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 |
+|          Name           |     Type     |   Default   | Description               |
+| :---------------------: | :----------: | :---------: | :------------------------ |
+| **[`filter`](#filter)** | `{Function}` | `undefined` | Allow to filter `@import` |
 
 ##### `filter`
 
@@ -294,47 +294,6 @@ 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`
@@ -1182,6 +1141,45 @@ module.exports = {
 };
 ```
 
+### `importLoaders`
+
+Type: `Number`
+Default: `0`
+
+Allows to enables/disables or setups number of loaders applied before CSS loader for `@import` at-rules, CSS modules and ICSS imports, i.e. `@import`/`composes`/`@value value from './values.css'`/etc.
+
+The option `importLoaders` allows you to configure how many loaders before `css-loader` should be applied to `@import`ed resources and CSS modules/ICSS imports.
+
+**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.
+
 ### `sourceMap`
 
 Type: `Boolean`
@@ -1377,7 +1375,7 @@ module.exports = {
           {
             loader: "css-loader",
             options: {
-              // Run `postcss-loader` on each CSS `@import`, do not forget that `sass-loader` compile non CSS `@import`'s into a single file
+              // Run `postcss-loader` on each CSS `@import` and CSS modules/ICSS imports, do not forget that `sass-loader` compile non CSS `@import`'s into a single file
               // If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`
               importLoaders: 1,
             },
@@ -1457,19 +1455,19 @@ module.exports = {
         exclude: /\.module\.scss$/,
         use: [
           {
-            loader: 'style-loader'
+            loader: "style-loader",
           },
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
               importLoaders: 1,
               modules: {
-                mode: 'icss'
-              }
-            }
+                mode: "icss",
+              },
+            },
           },
           {
-            loader: 'sass-loader'
+            loader: "sass-loader",
           },
         ],
       },
@@ -1479,24 +1477,25 @@ module.exports = {
         test: /\.module\.scss$/,
         use: [
           {
-            loader: 'style-loader'
+            loader: "style-loader",
           },
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
               importLoaders: 1,
               modules: {
-                mode: 'local'
-              }
-            }
+                mode: "local",
+              },
+            },
           },
           {
-            loader: 'sass-loader'
+            loader: "sass-loader",
           },
         ],
       },
       // --------
       // ...
+    ],
   },
 };
 ```

src/index.js

@@ -20,7 +20,6 @@ import {
   getPreRequester,
   getExportCode,
   getFilter,
-  getImportLoaders,
   getImportCode,
   getModuleCode,
   getModulesPlugins,
@@ -57,10 +56,12 @@ export default async function loader(content, map, meta) {
 
   if (shouldUseImportPlugin(options)) {
     const resolver = this.getResolve({
+      dependencyType: "css",
       conditionNames: ["style"],
-      extensions: [".css"],
       mainFields: ["css", "style", "main", "..."],
       mainFiles: ["index", "..."],
+      extensions: [".css", "..."],
+      preferRelative: true,
     });
 
     plugins.push(
@@ -69,15 +70,13 @@ export default async function loader(content, map, meta) {
         api: importPluginApi,
         context: this.context,
         rootContext: this.rootContext,
+        resourcePath: this.resourcePath,
         filter: getFilter(options.import.filter, this.resourcePath),
         resolver,
         urlHandler: (url) =>
           stringifyRequest(
             this,
-            combineRequests(
-              getPreRequester(this)(getImportLoaders(options.import.loaders)),
-              url
-            )
+            combineRequests(getPreRequester(this)(options.importLoaders), url)
           ),
       })
     );
@@ -116,10 +115,12 @@ export default async function loader(content, map, meta) {
 
   if (needToUseIcssPlugin) {
     const icssResolver = this.getResolve({
+      dependencyType: "icss",
       conditionNames: ["style"],
-      extensions: [],
+      extensions: ["..."],
       mainFields: ["css", "style", "main", "..."],
       mainFiles: ["index", "..."],
+      preferRelative: true,
     });
 
     plugins.push(
@@ -134,10 +135,7 @@ export default async function loader(content, map, meta) {
         urlHandler: (url) =>
           stringifyRequest(
             this,
-            combineRequests(
-              getPreRequester(this)(getImportLoaders(options.import.loaders)),
-              url
-            )
+            combineRequests(getPreRequester(this)(options.importLoaders), url)
           ),
       })
     );

src/options.json

@@ -3,7 +3,7 @@
   "additionalProperties": false,
   "properties": {
     "url": {
-      "description": "Allow to enable/disables handling the CSS functions `url` and `image-set` (https://github.com/webpack-contrib/css-loader#url).",
+      "description": "Allows to enables/disables `url()`/`image-set()` functions handling (https://github.com/webpack-contrib/css-loader#url).",
       "anyOf": [
         {
           "type": "boolean"
@@ -30,20 +30,6 @@
           "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
@@ -163,6 +149,20 @@
       "description": "Allows to enable/disable source maps (https://github.com/webpack-contrib/css-loader#sourcemap).",
       "type": "boolean"
     },
+    "importLoaders": {
+      "description": "Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports (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/plugins/postcss-import-parser.js

@@ -177,6 +177,12 @@ const plugin = (options = {}) => {
                   return;
                 }
 
+                if (resolvedUrl === options.resourcePath) {
+                  atRule.remove();
+
+                  return;
+                }
+
                 atRule.remove();
 
                 // eslint-disable-next-line consistent-return