Repository: webpack-contrib/css-loader
Pull request #1117 (2020-07-21 15:59:25)

refactor: default value `modules.auto` is true
BREAKING CHANGE: the `modules.auto` option is `true` by default

<!--
  HOLY CRAP a Pull Request. We ❤️ those!

  If you remove or skip this template, you'll make the 🐼 sad and the mighty god
  of Github will appear and pile-drive the close button from a great height
  while making animal noises.

  Please place an x (no spaces!) in all [ ] that apply
-->

This PR contains a:

- [ ] **bugfix**
- [x] new **feature**
- [x] **code refactor**
- [x] **test update** <!-- if bug or feature is checked, this should be too -->
- [ ] **typo fix**
- [ ] **metadata update**

### Motivation / Use-Case

Set the `auto` option to `true` value by default, better 0CJS

### Breaking Changes

Yes

### Additional Info

No


Patch:
diff --git a/README.md b/README.md
index f3dc62f..83d1a51 100644
--- a/README.md
+++ b/README.md
@@ -284,7 +284,7 @@ module.exports = {
 ### `modules`
 
 Type: `Boolean|String|Object`
-Default: `false`
+Default: based on filename, `true` for all files matching `/\.module\.\w+$/i.test(filename)` regular expression, more information you can read [here](https://github.com/webpack-contrib/css-loader#auto)
 
 Enables/Disables CSS Modules and their configuration.
 
@@ -546,7 +546,7 @@ module.exports = {
 ##### `auto`
 
 Type: `Boolean|RegExp|Function`
-Default: `'undefined'`
+Default: `'true'`
 
 Allows auto enable css modules based on filename.
 
@@ -968,7 +968,7 @@ module.exports = {
 };
 ```
 
-### `exportOnlyLocals`
+##### `exportOnlyLocals`
 
 Type: `Boolean`
 Default: `false`
diff --git a/src/utils.js b/src/utils.js
index 8a7b712..bf0606a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -104,16 +104,26 @@ function getFilter(filter, resourcePath) {
   };
 }
 
+const moduleRegExp = /\.module\.\w+$/i;
+
 function getModulesOptions(rawOptions, loaderContext) {
+  const { resourcePath } = loaderContext;
+
   if (typeof rawOptions.modules === 'undefined') {
-    return false;
-  }
+    const isModules = moduleRegExp.test(resourcePath);
 
-  if (typeof rawOptions.modules === 'boolean' && rawOptions.modules === false) {
+    if (!isModules) {
+      return false;
+    }
+  } else if (
+    typeof rawOptions.modules === 'boolean' &&
+    rawOptions.modules === false
+  ) {
     return false;
   }
 
   let modulesOptions = {
+    auto: true,
     mode: 'local',
     localIdentName: '[hash:base64]',
     // eslint-disable-next-line no-undefined
@@ -133,30 +143,30 @@ function getModulesOptions(rawOptions, loaderContext) {
     modulesOptions.mode =
       typeof rawOptions.modules === 'string' ? rawOptions.modules : 'local';
   } else {
-    const { resourcePath } = loaderContext;
+    if (rawOptions.modules) {
+      if (typeof rawOptions.modules.auto === 'boolean') {
+        const isModules =
+          rawOptions.modules.auto && moduleRegExp.test(resourcePath);
 
-    if (typeof rawOptions.modules.auto === 'boolean') {
-      const isModules =
-        rawOptions.modules.auto && /\.module\.\w+$/i.test(resourcePath);
-
-      if (!isModules) {
-        return false;
-      }
-    } else if (rawOptions.modules.auto instanceof RegExp) {
-      const isModules = rawOptions.modules.auto.test(resourcePath);
+        if (!isModules) {
+          return false;
+        }
+      } else if (rawOptions.modules.auto instanceof RegExp) {
+        const isModules = rawOptions.modules.auto.test(resourcePath);
 
-      if (!isModules) {
-        return false;
-      }
-    } else if (typeof rawOptions.modules.auto === 'function') {
-      const isModule = rawOptions.modules.auto(resourcePath);
+        if (!isModules) {
+          return false;
+        }
+      } else if (typeof rawOptions.modules.auto === 'function') {
+        const isModule = rawOptions.modules.auto(resourcePath);
 
-      if (!isModule) {
-        return false;
+        if (!isModule) {
+          return false;
+        }
       }
     }
 
-    modulesOptions = { ...modulesOptions, ...rawOptions.modules };
+    modulesOptions = { ...modulesOptions, ...(rawOptions.modules || {}) };
   }
 
   if (typeof modulesOptions.mode === 'function') {


Test patch:
diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap
index 9b9d00a..305e904 100644
--- a/test/__snapshots__/modules-option.test.js.snap
+++ b/test/__snapshots__/modules-option.test.js.snap
@@ -3790,65 +3790,6 @@ Array [
 
 exports[`"modules" option should work when the "getLocalIdent" option returns "false": warnings 1`] = `Array []`;
 
-exports[`"modules" option should work with a modules.auto Boolean that is "false": errors 1`] = `Array []`;
-
-exports[`"modules" option should work with a modules.auto Boolean that is "false": module 1`] = `
-"// Imports
-import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
-// Module
-___CSS_LOADER_EXPORT___.push([module.id, \\".relative {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
-// Exports
-export default ___CSS_LOADER_EXPORT___;
-"
-`;
-
-exports[`"modules" option should work with a modules.auto Boolean that is "false": result 1`] = `
-Array [
-  Array [
-    "./modules/mode/relative.module.css",
-    ".relative {
-  color: red;
-}
-",
-    "",
-  ],
-]
-`;
-
-exports[`"modules" option should work with a modules.auto Boolean that is "false": warnings 1`] = `Array []`;
-
-exports[`"modules" option should work with a modules.auto Boolean that is "true": errors 1`] = `Array []`;
-
-exports[`"modules" option should work with a modules.auto Boolean that is "true": module 1`] = `
-"// Imports
-import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\";
-var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
-// Module
-___CSS_LOADER_EXPORT___.push([module.id, \\"._1HULUYtV_Lb49H2tf3WnVr {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
-// Exports
-___CSS_LOADER_EXPORT___.locals = {
-	\\"relative\\": \\"_1HULUYtV_Lb49H2tf3WnVr\\"
-};
-export default ___CSS_LOADER_EXPORT___;
-"
-`;
-
-exports[`"modules" option should work with a modules.auto Boolean that is "true": result 1`] = `
-Array [
-  Array [
-    "./modules/mode/relative.module.css",
-    "._1HULUYtV_Lb49H2tf3WnVr {
-  color: red;
-}
-",
-    "",
-  ],
-]
-`;
-
-exports[`"modules" option should work with a modules.auto Boolean that is "true": warnings 1`] = `Array []`;
-
 exports[`"modules" option should work with a modules.auto Function that returns "false": errors 1`] = `Array []`;
 
 exports[`"modules" option should work with a modules.auto Function that returns "false": module 1`] = `
@@ -11941,6 +11882,96 @@ Array [
 
 exports[`"modules" option should work with the "[local]" placeholder for the "localIdentName" option: warnings 1`] = `Array []`;
 
+exports[`"modules" option should work with the "auto" by default: errors 1`] = `Array []`;
+
+exports[`"modules" option should work with the "auto" by default: module 1`] = `
+"// Imports
+import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\"._1HULUYtV_Lb49H2tf3WnVr {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	\\"relative\\": \\"_1HULUYtV_Lb49H2tf3WnVr\\"
+};
+export default ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`"modules" option should work with the "auto" by default: result 1`] = `
+Array [
+  Array [
+    "./modules/mode/relative.module.css",
+    "._1HULUYtV_Lb49H2tf3WnVr {
+  color: red;
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`"modules" option should work with the "auto" by default: warnings 1`] = `Array []`;
+
+exports[`"modules" option should work with the "auto" when it is "false": errors 1`] = `Array []`;
+
+exports[`"modules" option should work with the "auto" when it is "false": module 1`] = `
+"// Imports
+import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\".relative {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
+// Exports
+export default ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`"modules" option should work with the "auto" when it is "false": result 1`] = `
+Array [
+  Array [
+    "./modules/mode/relative.module.css",
+    ".relative {
+  color: red;
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`"modules" option should work with the "auto" when it is "false": warnings 1`] = `Array []`;
+
+exports[`"modules" option should work with the "auto" when it is "true": errors 1`] = `Array []`;
+
+exports[`"modules" option should work with the "auto" when it is "true": module 1`] = `
+"// Imports
+import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\"._1HULUYtV_Lb49H2tf3WnVr {\\\\n  color: red;\\\\n}\\\\n\\", \\"\\"]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	\\"relative\\": \\"_1HULUYtV_Lb49H2tf3WnVr\\"
+};
+export default ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`"modules" option should work with the "auto" when it is "true": result 1`] = `
+Array [
+  Array [
+    "./modules/mode/relative.module.css",
+    "._1HULUYtV_Lb49H2tf3WnVr {
+  color: red;
+}
+",
+    "",
+  ],
+]
+`;
+
+exports[`"modules" option should work with the "auto" when it is "true": warnings 1`] = `Array []`;
+
 exports[`"modules" option should work with the \`exportGlobals\` option (the \`mode\` option is \`global\`): errors 1`] = `Array []`;
 
 exports[`"modules" option should work with the \`exportGlobals\` option (the \`mode\` option is \`global\`): module 1`] = `
diff --git a/test/modules-option.test.js b/test/modules-option.test.js
index 52cefd2..88da8ad 100644
--- a/test/modules-option.test.js
+++ b/test/modules-option.test.js
@@ -711,7 +711,21 @@ describe('"modules" option', () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
-  it('should work with a modules.auto Boolean that is "false"', async () => {
+  it('should work with the "auto" by default', async () => {
+    const compiler = getCompiler('./modules/mode/modules.js');
+    const stats = await compile(compiler);
+
+    expect(
+      getModuleSource('./modules/mode/relative.module.css', stats)
+    ).toMatchSnapshot('module');
+    expect(getExecutedCode('main.bundle.js', compiler, stats)).toMatchSnapshot(
+      'result'
+    );
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
+
+  it('should work with the "auto" when it is "false"', async () => {
     const compiler = getCompiler('./modules/mode/modules.js', {
       modules: {
         auto: false,
@@ -729,7 +743,7 @@ describe('"modules" option', () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
-  it('should work with a modules.auto Boolean that is "true"', async () => {
+  it('should work with the "auto" when it is "true"', async () => {
     const compiler = getCompiler('./modules/mode/modules.js', {
       modules: {
         auto: true,