feat: new esModule option (#475)

Author: evilebottnawi

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({

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;

src/options.json

@@ -10,6 +10,9 @@
           "instanceof": "Function"
         }
       ]
+    },
+    "esModule": {
+      "type": "boolean"
     }
   },
   "errorMessages": {

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;
+}
+

test/cases/commonjs-module-syntax/index.js

@@ -0,0 +1 @@
+import './style.css';

test/cases/commonjs-module-syntax/style.css

@@ -0,0 +1,11 @@
+.a {
+  background: red;
+}
+
+:local(.b) {
+  color: green;
+}
+
+:global(.c) {
+  color: blue;
+}

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',
+    }),
+  ],
+};

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;
+}
+

test/cases/es-module-syntax/index.js

@@ -0,0 +1 @@
+import './style.css';

test/cases/es-module-syntax/style.css

@@ -0,0 +1,11 @@
+.a {
+  background: red;
+}
+
+:local(.b) {
+  color: green;
+}
+
+:global(.c) {
+  color: blue;
+}

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',
+    }),
+  ],
+};