feat: add icss option (#1140)

Author: jquense

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`

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', '...'],

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"

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

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`] = `

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);
 

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,