Skip to content

Commit 8b6835b

Browse files
alexander-akaitalexander-akait
authoredJul 15, 2021
refactor: fix bugs before release
·
v7.1.2v6.0.0
1 parent 39c6c93 commit 8b6835b

34 files changed

+700
-168
lines changed
 

‎CHANGELOG.md

+9-3
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,33 @@ All notable changes to this project will be documented in this file. See [standa
88
### ⚠ BREAKING CHANGES
99

1010
* minimum supported `Node.js` version is `12.13.0`
11-
* minimum supported `weboack` version is `5`
11+
* minimum supported `webpack` version is `5`, we recommend to update to the latest version for better performance
1212
* 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 } }`
13-
* the `importLoaders` option was removed in favor in favor `import.loaders` option
1413
* the `modules.compileType` option was removed in favor the `modules.mode` option with `icss` value, also the `modules` option can have `icss` string value
1514
* `new URL()` syntax used for `url()`, only when the `esModules` option is enabled (enabled by default), it means you can bundle CSS for libraries
1615
* [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)
1716
* 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)
18-
* 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).
17+
* 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).
1918
* `[ext]` placeholder don't need `.` (dot) before for the `localIdentName` option, i.e. please change `.[ext]` on `[ext]` (no dot before)
2019
* `[folder]` placeholder was removed without replacement for the `localIdentName` option, please use a custom function if you need complex logic
2120
* `[emoji]` placeholder was removed without replacement for the `localIdentName` option, please use a custom function if you need complex logic
2221
* the `localIdentHashPrefix` was removed in favor the `localIdentHashSalt` option
2322

2423
### Features
2524

25+
* supported [`resolve.byDependency.css`](https://webpack.js.org/configuration/resolve/#resolvebydependency) resolve options for `@import`
26+
* supported [`resolve.byDependency.icss`](https://webpack.js.org/configuration/resolve/#resolvebydependency) resolve CSS modules and ICSS imports (i.e. `composes`/etc)
2627
* added `modules.localIdentHashFunction`, `modules.localIdentHashDigest`, `modules.localIdentHashDigestLength` options for better class hashing controlling
2728
* less dependencies
2829

2930
### Bug Fixes
3031

3132
* better performance
33+
* fixed circular `@import`
34+
35+
### Notes
36+
37+
* **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)**
3238

3339
### [5.2.7](https://github.com/webpack-contrib/css-loader/compare/v5.2.6...v5.2.7) (2021-07-13)
3440

‎README.md

+64-65
Original file line numberDiff line numberDiff line change
@@ -109,13 +109,14 @@ module.exports = {
109109

110110
## Options
111111

112-
| Name | Type | Default | Description |
113-
| :---------------------------: | :-------------------------: | :----------------: | :---------------------------------------------------- |
114-
| **[`url`](#url)** | `{Boolean\|Object}` | `true` | Enables/Disables `url`/`image-set` functions handling |
115-
| **[`import`](#import)** | `{Boolean\|Object}` | `true` | Enables/Disables `@import` at-rules handling |
116-
| **[`modules`](#modules)** | `{Boolean\|String\|Object}` | `{auto: true}` | Enables/Disables CSS Modules and their configuration |
117-
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |
118-
| **[`esModule`](#esmodule)** | `{Boolean}` | `true` | Use ES modules syntax |
112+
| Name | Type | Default | Description |
113+
| :-----------------------------------: | :-------------------------: | :----------------: | :----------------------------------------------------------------------------------------------------------------------- |
114+
| **[`url`](#url)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `url()`/`image-set()` functions handling |
115+
| **[`import`](#import)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `@import` at-rules handling |
116+
| **[`modules`](#modules)** | `{Boolean\|String\|Object}` | `{auto: true}` | Allows to enables/disables or setup CSS Modules options |
117+
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |
118+
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports |
119+
| **[`esModule`](#esmodule)** | `{Boolean}` | `true` | Use ES modules syntax |
119120

120121
### `url`
121122

@@ -253,10 +254,9 @@ module.exports = {
253254

254255
#### `Object`
255256

256-
| Name | Type | Default | Description |
257-
| :-----------------------: | :----------: | :---------: | :--------------------------------------------------------------------- |
258-
| **[`filter`](#filter)** | `{Function}` | `undefined` | Allow to filter `@import` |
259-
| **[`loaders`](#loaders)** | `{Number}` | `0` | Enables/Disables or setups number of loaders applied before CSS loader |
257+
| Name | Type | Default | Description |
258+
| :---------------------: | :----------: | :---------: | :------------------------ |
259+
| **[`filter`](#filter)** | `{Function}` | `undefined` | Allow to filter `@import` |
260260

261261
##### `filter`
262262

@@ -294,47 +294,6 @@ module.exports = {
294294
};
295295
```
296296

297-
##### `loaders`
298-
299-
Type: `Number`
300-
Default: `0`
301-
302-
Enables/Disables or setups number of loaders applied before CSS loader.
303-
304-
The option `import.loaders` allows you to configure how many loaders before `css-loader` should be applied to `@import`ed resources.
305-
306-
**webpack.config.js**
307-
308-
```js
309-
module.exports = {
310-
module: {
311-
rules: [
312-
{
313-
test: /\.css$/i,
314-
use: [
315-
"style-loader",
316-
{
317-
loader: "css-loader",
318-
options: {
319-
import: {
320-
loaders: 2,
321-
// 0 => no loaders (default);
322-
// 1 => postcss-loader;
323-
// 2 => postcss-loader, sass-loader
324-
},
325-
},
326-
},
327-
"postcss-loader",
328-
"sass-loader",
329-
],
330-
},
331-
],
332-
},
333-
};
334-
```
335-
336-
This may change in the future when the module system (i. e. webpack) supports loader matching by origin.
337-
338297
### `modules`
339298

340299
Type: `Boolean|String|Object`
@@ -1182,6 +1141,45 @@ module.exports = {
11821141
};
11831142
```
11841143

1144+
### `importLoaders`
1145+
1146+
Type: `Number`
1147+
Default: `0`
1148+
1149+
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.
1150+
1151+
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.
1152+
1153+
**webpack.config.js**
1154+
1155+
```js
1156+
module.exports = {
1157+
module: {
1158+
rules: [
1159+
{
1160+
test: /\.css$/i,
1161+
use: [
1162+
"style-loader",
1163+
{
1164+
loader: "css-loader",
1165+
options: {
1166+
importLoaders: 2,
1167+
// 0 => no loaders (default);
1168+
// 1 => postcss-loader;
1169+
// 2 => postcss-loader, sass-loader
1170+
},
1171+
},
1172+
"postcss-loader",
1173+
"sass-loader",
1174+
],
1175+
},
1176+
],
1177+
},
1178+
};
1179+
```
1180+
1181+
This may change in the future when the module system (i. e. webpack) supports loader matching by origin.
1182+
11851183
### `sourceMap`
11861184

11871185
Type: `Boolean`
@@ -1377,7 +1375,7 @@ module.exports = {
13771375
{
13781376
loader: "css-loader",
13791377
options: {
1380-
// Run `postcss-loader` on each CSS `@import`, do not forget that `sass-loader` compile non CSS `@import`'s into a single file
1378+
// 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
13811379
// If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`
13821380
importLoaders: 1,
13831381
},
@@ -1457,19 +1455,19 @@ module.exports = {
14571455
exclude: /\.module\.scss$/,
14581456
use: [
14591457
{
1460-
loader: 'style-loader'
1458+
loader: "style-loader",
14611459
},
14621460
{
1463-
loader: 'css-loader',
1461+
loader: "css-loader",
14641462
options: {
14651463
importLoaders: 1,
14661464
modules: {
1467-
mode: 'icss'
1468-
}
1469-
}
1465+
mode: "icss",
1466+
},
1467+
},
14701468
},
14711469
{
1472-
loader: 'sass-loader'
1470+
loader: "sass-loader",
14731471
},
14741472
],
14751473
},
@@ -1479,24 +1477,25 @@ module.exports = {
14791477
test: /\.module\.scss$/,
14801478
use: [
14811479
{
1482-
loader: 'style-loader'
1480+
loader: "style-loader",
14831481
},
14841482
{
1485-
loader: 'css-loader',
1483+
loader: "css-loader",
14861484
options: {
14871485
importLoaders: 1,
14881486
modules: {
1489-
mode: 'local'
1490-
}
1491-
}
1487+
mode: "local",
1488+
},
1489+
},
14921490
},
14931491
{
1494-
loader: 'sass-loader'
1492+
loader: "sass-loader",
14951493
},
14961494
],
14971495
},
14981496
// --------
14991497
// ...
1498+
],
15001499
},
15011500
};
15021501
```

‎src/index.js

+9-11
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import {
2020
getPreRequester,
2121
getExportCode,
2222
getFilter,
23-
getImportLoaders,
2423
getImportCode,
2524
getModuleCode,
2625
getModulesPlugins,
@@ -57,10 +56,12 @@ export default async function loader(content, map, meta) {
5756

5857
if (shouldUseImportPlugin(options)) {
5958
const resolver = this.getResolve({
59+
dependencyType: "css",
6060
conditionNames: ["style"],
61-
extensions: [".css"],
6261
mainFields: ["css", "style", "main", "..."],
6362
mainFiles: ["index", "..."],
63+
extensions: [".css", "..."],
64+
preferRelative: true,
6465
});
6566

6667
plugins.push(
@@ -69,15 +70,13 @@ export default async function loader(content, map, meta) {
6970
api: importPluginApi,
7071
context: this.context,
7172
rootContext: this.rootContext,
73+
resourcePath: this.resourcePath,
7274
filter: getFilter(options.import.filter, this.resourcePath),
7375
resolver,
7476
urlHandler: (url) =>
7577
stringifyRequest(
7678
this,
77-
combineRequests(
78-
getPreRequester(this)(getImportLoaders(options.import.loaders)),
79-
url
80-
)
79+
combineRequests(getPreRequester(this)(options.importLoaders), url)
8180
),
8281
})
8382
);
@@ -116,10 +115,12 @@ export default async function loader(content, map, meta) {
116115

117116
if (needToUseIcssPlugin) {
118117
const icssResolver = this.getResolve({
118+
dependencyType: "icss",
119119
conditionNames: ["style"],
120-
extensions: [],
120+
extensions: ["..."],
121121
mainFields: ["css", "style", "main", "..."],
122122
mainFiles: ["index", "..."],
123+
preferRelative: true,
123124
});
124125

125126
plugins.push(
@@ -134,10 +135,7 @@ export default async function loader(content, map, meta) {
134135
urlHandler: (url) =>
135136
stringifyRequest(
136137
this,
137-
combineRequests(
138-
getPreRequester(this)(getImportLoaders(options.import.loaders)),
139-
url
140-
)
138+
combineRequests(getPreRequester(this)(options.importLoaders), url)
141139
),
142140
})
143141
);

‎src/options.json

+15-15
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"additionalProperties": false,
44
"properties": {
55
"url": {
6-
"description": "Allow to enable/disables handling the CSS functions `url` and `image-set` (https://github.com/webpack-contrib/css-loader#url).",
6+
"description": "Allows to enables/disables `url()`/`image-set()` functions handling (https://github.com/webpack-contrib/css-loader#url).",
77
"anyOf": [
88
{
99
"type": "boolean"
@@ -30,20 +30,6 @@
3030
"properties": {
3131
"filter": {
3232
"instanceof": "Function"
33-
},
34-
"loaders": {
35-
"description": "Enables/Disables or setups number of loaders applied before CSS loader (https://github.com/webpack-contrib/css-loader#importloaders).",
36-
"anyOf": [
37-
{
38-
"type": "boolean"
39-
},
40-
{
41-
"type": "string"
42-
},
43-
{
44-
"type": "integer"
45-
}
46-
]
4733
}
4834
},
4935
"additionalProperties": false
@@ -163,6 +149,20 @@
163149
"description": "Allows to enable/disable source maps (https://github.com/webpack-contrib/css-loader#sourcemap).",
164150
"type": "boolean"
165151
},
152+
"importLoaders": {
153+
"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).",
154+
"anyOf": [
155+
{
156+
"type": "boolean"
157+
},
158+
{
159+
"type": "string"
160+
},
161+
{
162+
"type": "integer"
163+
}
164+
]
165+
},
166166
"esModule": {
167167
"description": "Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule).",
168168
"type": "boolean"

‎src/plugins/postcss-import-parser.js

+6
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,12 @@ const plugin = (options = {}) => {
177177
return;
178178
}
179179

180+
if (resolvedUrl === options.resourcePath) {
181+
atRule.remove();
182+
183+
return;
184+
}
185+
180186
atRule.remove();
181187

182188
// eslint-disable-next-line consistent-return

0 commit comments

Comments
 (0)