From 596e47a8aead53f9cc0e2b1e09a2c20e455e45c1 Mon Sep 17 00:00:00 2001
From: Evilebot Tnawi <evilebottnawi@users.noreply.github.com>
Date: Fri, 20 Dec 2019 18:05:50 +0300
Subject: [PATCH] feat: new `esModule` option (#475)

---
 README.md                                     | 37 +++++++++++++++++++
 src/loader.js                                 |  9 ++++-
 src/options.json                              |  3 ++
 .../commonjs-module-syntax/expected/main.css  | 12 ++++++
 test/cases/commonjs-module-syntax/index.js    |  1 +
 test/cases/commonjs-module-syntax/style.css   | 11 ++++++
 .../commonjs-module-syntax/webpack.config.js  | 32 ++++++++++++++++
 test/cases/es-module-syntax/expected/main.css | 12 ++++++
 test/cases/es-module-syntax/index.js          |  1 +
 test/cases/es-module-syntax/style.css         | 11 ++++++
 test/cases/es-module-syntax/webpack.config.js | 32 ++++++++++++++++
 11 files changed, 159 insertions(+), 2 deletions(-)
 create mode 100644 test/cases/commonjs-module-syntax/expected/main.css
 create mode 100644 test/cases/commonjs-module-syntax/index.js
 create mode 100644 test/cases/commonjs-module-syntax/style.css
 create mode 100644 test/cases/commonjs-module-syntax/webpack.config.js
 create mode 100644 test/cases/es-module-syntax/expected/main.css
 create mode 100644 test/cases/es-module-syntax/index.js
 create mode 100644 test/cases/es-module-syntax/style.css
 create mode 100644 test/cases/es-module-syntax/webpack.config.js

diff --git a/README.md b/README.md
index 3c570d29..7dc44d78 100644
--- a/README.md
+++ b/README.md
@@ -41,12 +41,49 @@ Default: the `publicPath` in `webpackOptions.output`
 
 Specifies a custom public path for the target file(s).
 
+#### `esModule`
+
+Type: `Boolean`
+Default: `false`
+
+By default, `mini-css-extract-plugin` generates JS modules that use the CommonJS modules syntax.
+There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
+
+You can enable a ES module syntax using:
+
+**webpack.config.js**
+
+```js
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  plugins: [new MiniCssExtractPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              esModule: true,
+            },
+          },
+          'css-loader',
+        ],
+      },
+    ],
+  },
+};
+```
+
 #### Minimal example
 
 **webpack.config.js**
 
 ```js
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 module.exports = {
   plugins: [
     new MiniCssExtractPlugin({
diff --git a/src/loader.js b/src/loader.js
index e3791c70..2562f705 100644
--- a/src/loader.js
+++ b/src/loader.js
@@ -203,11 +203,16 @@ export function pitch(request) {
       return callback(e);
     }
 
-    let resultSource = `// extracted by ${pluginName}`;
+    const esModule =
+      typeof options.esModule !== 'undefined' ? options.esModule : false;
     const result = locals
-      ? `\nmodule.exports = ${JSON.stringify(locals)};`
+      ? `\n${esModule ? 'export default' : 'module.exports ='} ${JSON.stringify(
+          locals
+        )};`
       : '';
 
+    let resultSource = `// extracted by ${pluginName}`;
+
     resultSource += options.hmr
       ? hotLoader(result, { context: this.context, options, locals })
       : result;
diff --git a/src/options.json b/src/options.json
index 3cc77705..4bcdddec 100644
--- a/src/options.json
+++ b/src/options.json
@@ -10,6 +10,9 @@
           "instanceof": "Function"
         }
       ]
+    },
+    "esModule": {
+      "type": "boolean"
     }
   },
   "errorMessages": {
diff --git a/test/cases/commonjs-module-syntax/expected/main.css b/test/cases/commonjs-module-syntax/expected/main.css
new file mode 100644
index 00000000..a296d763
--- /dev/null
+++ b/test/cases/commonjs-module-syntax/expected/main.css
@@ -0,0 +1,12 @@
+.foo__style__a {
+  background: red;
+}
+
+.foo__style__b {
+  color: green;
+}
+
+.c {
+  color: blue;
+}
+
diff --git a/test/cases/commonjs-module-syntax/index.js b/test/cases/commonjs-module-syntax/index.js
new file mode 100644
index 00000000..aa3357bf
--- /dev/null
+++ b/test/cases/commonjs-module-syntax/index.js
@@ -0,0 +1 @@
+import './style.css';
diff --git a/test/cases/commonjs-module-syntax/style.css b/test/cases/commonjs-module-syntax/style.css
new file mode 100644
index 00000000..ca57f5fe
--- /dev/null
+++ b/test/cases/commonjs-module-syntax/style.css
@@ -0,0 +1,11 @@
+.a {
+  background: red;
+}
+
+:local(.b) {
+  color: green;
+}
+
+:global(.c) {
+  color: blue;
+}
diff --git a/test/cases/commonjs-module-syntax/webpack.config.js b/test/cases/commonjs-module-syntax/webpack.config.js
new file mode 100644
index 00000000..fff4b7f8
--- /dev/null
+++ b/test/cases/commonjs-module-syntax/webpack.config.js
@@ -0,0 +1,32 @@
+import Self from '../../../src';
+
+module.exports = {
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: Self.loader,
+            options: { esModule: false },
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                mode: 'local',
+                localIdentName: 'foo__[name]__[local]',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};
diff --git a/test/cases/es-module-syntax/expected/main.css b/test/cases/es-module-syntax/expected/main.css
new file mode 100644
index 00000000..a296d763
--- /dev/null
+++ b/test/cases/es-module-syntax/expected/main.css
@@ -0,0 +1,12 @@
+.foo__style__a {
+  background: red;
+}
+
+.foo__style__b {
+  color: green;
+}
+
+.c {
+  color: blue;
+}
+
diff --git a/test/cases/es-module-syntax/index.js b/test/cases/es-module-syntax/index.js
new file mode 100644
index 00000000..aa3357bf
--- /dev/null
+++ b/test/cases/es-module-syntax/index.js
@@ -0,0 +1 @@
+import './style.css';
diff --git a/test/cases/es-module-syntax/style.css b/test/cases/es-module-syntax/style.css
new file mode 100644
index 00000000..ca57f5fe
--- /dev/null
+++ b/test/cases/es-module-syntax/style.css
@@ -0,0 +1,11 @@
+.a {
+  background: red;
+}
+
+:local(.b) {
+  color: green;
+}
+
+:global(.c) {
+  color: blue;
+}
diff --git a/test/cases/es-module-syntax/webpack.config.js b/test/cases/es-module-syntax/webpack.config.js
new file mode 100644
index 00000000..751f009f
--- /dev/null
+++ b/test/cases/es-module-syntax/webpack.config.js
@@ -0,0 +1,32 @@
+import Self from '../../../src';
+
+module.exports = {
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: Self.loader,
+            options: { esModule: true },
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                mode: 'local',
+                localIdentName: 'foo__[name]__[local]',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};