feat: removed modules.namedexport option (#768)

BREAKING CHANGE: the `modules.namedExport` option was removed, you don't need it anymore, because we respect the `modules.namedExport` option from `css-loader`, just remove it from loader options

Author: cap-Bernardito

README.md

@@ -296,7 +296,6 @@ module.exports = {
 | **[`publicPath`](#publicPath)** | `{String\|Function}` | `webpackOptions.output.publicPath` | Specifies a custom public path for the external resources like images, files, etc |
 |       **[`emit`](#emit)**       |     `{Boolean}`      |               `true`               | If false, the plugin will extract the CSS but **will not** emit the file          |
 |   **[`esModule`](#esModule)**   |     `{Boolean}`      |               `true`               | Use ES modules syntax                                                             |
-|    **[`modules`](#modules)**    |      `{Object}`      |            `undefined`             | Configuration CSS Modules                                                         |
 
 #### `publicPath`
 
@@ -422,85 +421,6 @@ module.exports = {
 };
 ```
 
-#### `modules`
-
-Type: `Object`
-Default: `undefined`
-
-Configuration CSS Modules.
-
-##### `namedExport`
-
-Type: `Boolean`
-Default: `false`
-
-Enables/disables ES modules named export for locals.
-
-> ⚠ Names of locals are converted to `camelCase`.
-
-> ⚠ It is not allowed to use JavaScript reserved words in css class names.
-
-> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` and `MiniCssExtractPlugin.loader` should be enabled.
-
-**styles.css**
-
-```css
-.foo-baz {
-  color: red;
-}
-.bar {
-  color: blue;
-}
-```
-
-**index.js**
-
-```js
-import { fooBaz, bar } from './styles.css';
-
-console.log(fooBaz, bar);
-```
-
-You can enable a ES module named export using:
-
-**webpack.config.js**
-
-```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
-  plugins: [new MiniCssExtractPlugin()],
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: {
-              esModule: true,
-              modules: {
-                namedExport: true,
-              },
-            },
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              esModule: true,
-              modules: {
-                namedExport: true,
-                localIdentName: 'foo__[name]__[local]',
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-};
-```
-
 ## Examples
 
 ### Recommend
@@ -573,6 +493,67 @@ module.exports = {
 };
 ```
 
+### Named export for CSS Modules
+
+> ⚠ Names of locals are converted to `camelCase`.
+
+> ⚠ It is not allowed to use JavaScript reserved words in css class names.
+
+> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` should be enabled.
+
+**styles.css**
+
+```css
+.foo-baz {
+  color: red;
+}
+.bar {
+  color: blue;
+}
+```
+
+**index.js**
+
+```js
+import { fooBaz, bar } from './styles.css';
+
+console.log(fooBaz, bar);
+```
+
+You can enable a ES module named export using:
+
+**webpack.config.js**
+
+```js
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  plugins: [new MiniCssExtractPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              esModule: true,
+              modules: {
+                namedExport: true,
+                localIdentName: 'foo__[name]__[local]',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ### The `publicPath` option as function
 
 **webpack.config.js**

src/loader-options.json

@@ -20,16 +20,6 @@
     },
     "layer": {
       "type": "string"
-    },
-    "modules": {
-      "type": "object",
-      "additionalProperties": false,
-      "properties": {
-        "namedExport": {
-          "description": "Enables/disables ES modules named export for locals (https://webpack.js.org/plugins/mini-css-extract-plugin/#namedexport).",
-          "type": "boolean"
-        }
-      }
     }
   }
 }

src/loader.js

@@ -56,12 +56,10 @@ export function pitch(request) {
 
   const handleExports = (originalExports, compilation, assets, assetsInfo) => {
     let locals;
+    let namedExport;
 
     const esModule =
       typeof options.esModule !== 'undefined' ? options.esModule : true;
-    const namedExport =
-      esModule && options.modules && options.modules.namedExport;
-
     const addDependencies = (dependencies) => {
       if (!Array.isArray(dependencies) && dependencies != null) {
         throw new Error(
@@ -102,6 +100,10 @@ export function pitch(request) {
         ? originalExports.default
         : originalExports;
 
+      namedExport =
+        // eslint-disable-next-line no-underscore-dangle
+        originalExports.__esModule && !('locals' in originalExports.default);
+
       if (namedExport) {
         Object.keys(originalExports).forEach((key) => {
           if (key !== 'default') {

test/__snapshots__/validate-loader-options.test.js.snap.webpack4

@@ -5,18 +5,6 @@ exports[`validate options should throw an error on the "esModule" option with "1
  - options.esModule should be a boolean."
 `;
 
-exports[`validate options should throw an error on the "modules" option with "{"namedExport":"false"}" value 1`] = `
-"Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
- - options.modules.namedExport should be a boolean.
-   -> Enables/disables ES modules named export for locals (https://webpack.js.org/plugins/mini-css-extract-plugin/#namedexport)."
-`;
-
-exports[`validate options should throw an error on the "modules" option with "true" value 1`] = `
-"Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
- - options.modules should be an object:
-   object { namedExport? }"
-`;
-
 exports[`validate options should throw an error on the "publicPath" option with "true" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
  - options.publicPath should be one of these:
@@ -29,47 +17,47 @@ exports[`validate options should throw an error on the "publicPath" option with
 exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "true" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;

test/__snapshots__/validate-loader-options.test.js.snap.webpack5

@@ -5,18 +5,6 @@ exports[`validate options should throw an error on the "esModule" option with "1
  - options.esModule should be a boolean."
 `;
 
-exports[`validate options should throw an error on the "modules" option with "{"namedExport":"false"}" value 1`] = `
-"Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
- - options.modules.namedExport should be a boolean.
-   -> Enables/disables ES modules named export for locals (https://webpack.js.org/plugins/mini-css-extract-plugin/#namedexport)."
-`;
-
-exports[`validate options should throw an error on the "modules" option with "true" value 1`] = `
-"Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
- - options.modules should be an object:
-   object { namedExport? }"
-`;
-
 exports[`validate options should throw an error on the "publicPath" option with "true" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
  - options.publicPath should be one of these:
@@ -29,47 +17,47 @@ exports[`validate options should throw an error on the "publicPath" option with
 exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "true" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin 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 { publicPath?, emit?, esModule?, layer?, modules? }"
+   object { publicPath?, emit?, esModule?, layer? }"
 `;

test/cases/es-module-concatenation-modules/webpack.config.js

@@ -14,9 +14,6 @@ module.exports = {
             loader: Self.loader,
             options: {
               esModule: true,
-              modules: {
-                namedExport: true,
-              },
             },
           },
           {

test/cases/es-named-export-output-module/webpack.config.js

@@ -9,12 +9,6 @@ module.exports = {
         use: [
           {
             loader: Self.loader,
-            options: {
-              esModule: true,
-              modules: {
-                namedExport: true,
-              },
-            },
           },
           {
             loader: 'css-loader',

test/cases/es-named-export/webpack.config.js

@@ -9,12 +9,6 @@ module.exports = {
         use: [
           {
             loader: Self.loader,
-            options: {
-              esModule: true,
-              modules: {
-                namedExport: true,
-              },
-            },
           },
           {
             loader: 'css-loader',