From a8ec7da42234e0b2eb061d2a920669940bcbdf05 Mon Sep 17 00:00:00 2001 From: Jason Quense Date: Wed, 29 Jul 2020 09:19:11 -0400 Subject: [PATCH] feat: add `icss` option (#1140) --- README.md | 27 ++++++++++++++++++ src/index.js | 2 +- src/options.json | 4 +++ src/utils.js | 4 ++- .../validate-options.test.js.snap | 28 +++++++++++++------ test/icss.test.js | 3 +- test/validate-options.test.js | 4 +++ 7 files changed, 61 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 7548eae7..d175a8ef 100644 --- a/README.md +++ b/README.md @@ -1000,6 +1000,33 @@ module.exports = { }; ``` +### `icss` + +Type: Boolean Default: `true` if `modules` are enabled, false otherwise + +Enables/disables handling of the low level "Interoperable CSS" format for declaring +import and export dependencies between CSS and other languages. ICSS enables +CSS Module support, and is enabled automatically when `modules` are enabled. It +can also be enabled independently to allow other loaders to handle processing CSS modules. + +**webpack.config.js** + +```js +module.exports = { + module: { + rules: [ + { + test: /\.css$/i, + loader: 'css-loader', + options: { + icss: true, + }, + }, + ], + }, +}; +``` + ### `sourceMap` Type: `Boolean` diff --git a/src/index.js b/src/index.js index 06d30585..a3a68d4b 100644 --- a/src/index.js +++ b/src/index.js @@ -111,7 +111,7 @@ export default async function loader(content, map, meta) { const icssPluginImports = []; const icssPluginApi = []; - if (needUseModulesPlugins) { + if (needUseModulesPlugins || options.icss) { const icssResolver = this.getResolve({ mainFields: ['css', 'style', 'main', '...'], mainFiles: ['index', '...'], diff --git a/src/options.json b/src/options.json index 9629553a..a7703f3f 100644 --- a/src/options.json +++ b/src/options.json @@ -118,6 +118,10 @@ } ] }, + "icss": { + "description": "Enables/Disables handling the CSS module interoperable import/export format ((https://github.com/webpack-contrib/css-loader#icss)", + "type": "boolean" + }, "sourceMap": { "description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/css-loader#sourcemap).", "type": "boolean" diff --git a/src/utils.js b/src/utils.js index e14f2db2..fdf05f31 100644 --- a/src/utils.js +++ b/src/utils.js @@ -197,10 +197,12 @@ function getModulesOptions(rawOptions, loaderContext) { } function normalizeOptions(rawOptions, loaderContext) { + const modulesOptions = getModulesOptions(rawOptions, loaderContext); return { url: typeof rawOptions.url === 'undefined' ? true : rawOptions.url, import: typeof rawOptions.import === 'undefined' ? true : rawOptions.import, - modules: getModulesOptions(rawOptions, loaderContext), + modules: modulesOptions, + icss: modulesOptions ? true : rawOptions.icss, sourceMap: typeof rawOptions.sourceMap === 'boolean' ? rawOptions.sourceMap diff --git a/test/__snapshots__/validate-options.test.js.snap b/test/__snapshots__/validate-options.test.js.snap index c48b0b1a..fb725763 100644 --- a/test/__snapshots__/validate-options.test.js.snap +++ b/test/__snapshots__/validate-options.test.js.snap @@ -6,6 +6,18 @@ 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 "icss" 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.icss should be a boolean. + -> Enables/Disables handling the CSS module interoperable import/export format ((https://github.com/webpack-contrib/css-loader#icss)" +`; + +exports[`validate options should throw an error on the "icss" 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.icss should be a boolean. + -> Enables/Disables handling the CSS module interoperable import/export format ((https://github.com/webpack-contrib/css-loader#icss)" +`; + 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: @@ -235,49 +247,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?, icss?, sourceMap?, importLoaders?, 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?, icss?, sourceMap?, importLoaders?, 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?, icss?, sourceMap?, importLoaders?, 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?, icss?, sourceMap?, importLoaders?, 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?, icss?, sourceMap?, importLoaders?, 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?, icss?, sourceMap?, importLoaders?, 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?, icss?, sourceMap?, importLoaders?, 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?, icss?, sourceMap?, importLoaders?, esModule? }" `; exports[`validate options should throw an error on the "url" option with "true" value 1`] = ` diff --git a/test/icss.test.js b/test/icss.test.js index a2963307..ff1ba97f 100644 --- a/test/icss.test.js +++ b/test/icss.test.js @@ -17,7 +17,8 @@ describe('ICSS', () => { testCases.forEach((name) => { it(`show work with the case "${name}"`, async () => { const compiler = getCompiler(`./icss/tests-cases/${name}/source.js`, { - modules: 'global', + modules: false, + icss: true, }); const stats = await compile(compiler); diff --git a/test/validate-options.test.js b/test/validate-options.test.js index 70a9badc..dd95c0a4 100644 --- a/test/validate-options.test.js +++ b/test/validate-options.test.js @@ -10,6 +10,10 @@ describe('validate options', () => { success: [true, false, () => {}], failure: ['true'], }, + icss: { + success: [true, false], + failure: ['true', 1], + }, modules: { success: [ true,