Skip to content

Commit 68f72af

Browse files
evilebottnawievilebottnawi
authored
feat: add module.type option, the icss option is deprecated (webpack-contrib#1150)
1 parent 9070ba9 commit 68f72af

File tree

32 files changed

+900
-404
lines changed

32 files changed

+900
-404
lines changed

‎README.md

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -109,15 +109,14 @@ module.exports = {
109109

110110
## Options
111111

112-
| Name | Type | Default | Description |
113-
| :-----------------------------------: | :-------------------------: | :------------------------------------------------: | :--------------------------------------------------------------------- |
114-
| **[`url`](#url)** | `{Boolean\|Function}` | `true` | Enables/Disables `url`/`image-set` functions handling |
115-
| **[`import`](#import)** | `{Boolean\|Function}` | `true` | Enables/Disables `@import` at-rules handling |
116-
| **[`modules`](#modules)** | `{Boolean\|String\|Object}` | `{auto: true}` | Enables/Disables CSS Modules and their configuration |
117-
| **[`icss`](#icss)** | `{Boolean}` | `true` if `modules` are enabled, `false` otherwise | Enables/Disables Interoperable CSS |
118-
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |
119-
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Enables/Disables or setups number of loaders applied before CSS loader |
120-
| **[`esModule`](#esmodule)** | `{Boolean}` | `true` | Use ES modules syntax |
112+
| Name | Type | Default | Description |
113+
| :-----------------------------------: | :-------------------------: | :----------------: | :--------------------------------------------------------------------- |
114+
| **[`url`](#url)** | `{Boolean\|Function}` | `true` | Enables/Disables `url`/`image-set` functions handling |
115+
| **[`import`](#import)** | `{Boolean\|Function}` | `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+
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Enables/Disables or setups number of loaders applied before CSS loader |
119+
| **[`esModule`](#esmodule)** | `{Boolean}` | `true` | Use ES modules syntax |
121120

122121
### `url`
123122

@@ -526,6 +525,7 @@ module.exports = {
526525
loader: 'css-loader',
527526
options: {
528527
modules: {
528+
compileType: 'module',
529529
mode: 'local',
530530
auto: true,
531531
exportGlobals: true,
@@ -543,6 +543,38 @@ module.exports = {
543543
};
544544
```
545545

546+
##### `compileType`
547+
548+
Type: `'module' | 'icss'`
549+
Default: `'module'`
550+
551+
Controls the level of compilation applied to the input styles.
552+
553+
The `module` handles `class` and `id` scoping and `@value` values.
554+
The `icss` will only compile the low level `Interoperable CSS` format for declaring `:import` and `:export` dependencies between CSS and other languages.
555+
556+
ICSS underpins CSS Module support, and provides a low level syntax for other tools to implement CSS-module variations of their own.
557+
558+
**webpack.config.js**
559+
560+
```js
561+
module.exports = {
562+
module: {
563+
rules: [
564+
{
565+
test: /\.css$/i,
566+
loader: 'css-loader',
567+
options: {
568+
modules: {
569+
compileType: 'icss',
570+
},
571+
},
572+
},
573+
],
574+
},
575+
};
576+
```
577+
546578
##### `auto`
547579

548580
Type: `Boolean|RegExp|Function`
@@ -1001,33 +1033,6 @@ module.exports = {
10011033
};
10021034
```
10031035

1004-
### `icss`
1005-
1006-
Type: Boolean Default: `true` if `modules` are enabled, false otherwise
1007-
1008-
Enables/disables handling of the low level "Interoperable CSS" format for declaring
1009-
import and export dependencies between CSS and other languages. ICSS enables
1010-
CSS Module support, and is enabled automatically when `modules` are enabled. It
1011-
can also be enabled independently to allow other loaders to handle processing CSS modules.
1012-
1013-
**webpack.config.js**
1014-
1015-
```js
1016-
module.exports = {
1017-
module: {
1018-
rules: [
1019-
{
1020-
test: /\.css$/i,
1021-
loader: 'css-loader',
1022-
options: {
1023-
icss: true,
1024-
},
1025-
},
1026-
],
1027-
},
1028-
};
1029-
```
1030-
10311036
### `sourceMap`
10321037

10331038
Type: `Boolean`

‎src/index.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
shouldUseModulesPlugins,
1818
shouldUseImportPlugin,
1919
shouldUseURLPlugin,
20+
shouldUseIcssPlugin,
2021
getPreRequester,
2122
getExportCode,
2223
getFilter,
@@ -51,9 +52,7 @@ export default async function loader(content, map, meta) {
5152
const replacements = [];
5253
const exports = [];
5354

54-
const needUseModulesPlugins = shouldUseModulesPlugins(options);
55-
56-
if (needUseModulesPlugins) {
55+
if (shouldUseModulesPlugins(options)) {
5756
plugins.push(...getModulesPlugins(options, this));
5857
}
5958

@@ -112,7 +111,7 @@ export default async function loader(content, map, meta) {
112111
const icssPluginImports = [];
113112
const icssPluginApi = [];
114113

115-
if (needUseModulesPlugins || options.icss) {
114+
if (shouldUseIcssPlugin(options)) {
116115
const icssResolver = this.getResolve({
117116
conditionNames: ['style'],
118117
extensions: [],

‎src/options.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@
3636
"type": "object",
3737
"additionalProperties": false,
3838
"properties": {
39+
"compileType": {
40+
"description": "Controls the extent to which css-loader will process module code (https://github.com/webpack-contrib/css-loader#type)",
41+
"enum": ["module", "icss"]
42+
},
3943
"auto": {
4044
"description": "Allows auto enable CSS modules based on filename (https://github.com/webpack-contrib/css-loader#auto).",
4145
"anyOf": [

‎src/utils.js

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ function getModulesOptions(rawOptions, loaderContext) {
125125
}
126126

127127
let modulesOptions = {
128+
compileType: rawOptions.icss ? 'icss' : 'module',
128129
auto: true,
129130
mode: 'local',
130131
exportGlobals: false,
@@ -201,12 +202,22 @@ function getModulesOptions(rawOptions, loaderContext) {
201202
}
202203

203204
function normalizeOptions(rawOptions, loaderContext) {
205+
if (rawOptions.icss) {
206+
loaderContext.emitWarning(
207+
new Error(
208+
'The "icss" option is deprecated, use "modules.compileType: "icss"" instead'
209+
)
210+
);
211+
}
212+
204213
const modulesOptions = getModulesOptions(rawOptions, loaderContext);
214+
205215
return {
206216
url: typeof rawOptions.url === 'undefined' ? true : rawOptions.url,
207217
import: typeof rawOptions.import === 'undefined' ? true : rawOptions.import,
208218
modules: modulesOptions,
209-
icss: modulesOptions ? true : rawOptions.icss,
219+
// TODO remove in the next major release
220+
icss: typeof rawOptions.icss === 'undefined' ? false : rawOptions.icss,
210221
sourceMap:
211222
typeof rawOptions.sourceMap === 'boolean'
212223
? rawOptions.sourceMap
@@ -242,7 +253,11 @@ function shouldUseURLPlugin(options) {
242253
}
243254

244255
function shouldUseModulesPlugins(options) {
245-
return Boolean(options.modules);
256+
return options.modules.compileType === 'module';
257+
}
258+
259+
function shouldUseIcssPlugin(options) {
260+
return options.icss === true || Boolean(options.modules);
246261
}
247262

248263
function getModulesPlugins(options, loaderContext) {
@@ -545,6 +560,7 @@ export {
545560
shouldUseModulesPlugins,
546561
shouldUseImportPlugin,
547562
shouldUseURLPlugin,
563+
shouldUseIcssPlugin,
548564
normalizeUrl,
549565
requestify,
550566
getFilter,

0 commit comments

Comments
 (0)