From 727a24d173a4d71a4100ffc2a37ab6c6684a6301 Mon Sep 17 00:00:00 2001
From: Alexey Lavinsky <cap-Bernardito@yandex.ru>
Date: Fri, 9 Oct 2020 13:12:38 +0300
Subject: [PATCH] feat: enabled esModule by default (#489)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BRAKING CHANGE: the `esModule` option is `true` by default, you need to change `const locals = require('./styles.css')` on ʻimport locals from './styles.css'`
---
 README.md                      | 10 +++++-----
 src/index.js                   |  2 +-
 test/attributes-option.test.js |  2 +-
 test/insert-option.test.js     |  1 +
 test/loader.test.js            |  1 +
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index e8968124..9759a7a0 100644
--- a/README.md
+++ b/README.md
@@ -67,7 +67,7 @@ module.exports = {
 | [**`attributes`**](#attributes) |      `{Object}`      |    `{}`     | Adds custom attributes to tag                            |
 |     [**`insert`**](#insert)     | `{String\|Function}` |   `head`    | Inserts tag at the given position into the DOM           |
 |       [**`base`**](#base)       |      `{Number}`      |   `true`    | Sets module ID base (DLLPlugin)                          |
-|   [**`esModule`**](#esmodule)   |     `{Boolean}`      |   `false`   | Use ES modules syntax                                    |
+|   [**`esModule`**](#esmodule)   |     `{Boolean}`      |   `true`    | Use ES modules syntax                                    |
 |    [**`modules`**](#modules)    |      `{Object}`      | `undefined` | Configuration CSS Modules                                |
 
 ### `injectType`
@@ -556,12 +556,12 @@ module.exports = {
 ### `esModule`
 
 Type: `Boolean`
-Default: `false`
+Default: `true`
 
-By default, `style-loader` generates JS modules that use the CommonJS modules syntax.
+By default, `style-loader` generates JS modules that use the ES 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:
+You can enable a CommonJS modules syntax using:
 
 **webpack.config.js**
 
@@ -573,7 +573,7 @@ module.exports = {
         test: /\.css$/i,
         loader: 'style-loader',
         options: {
-          esModule: true,
+          esModule: false,
         },
       },
     ],
diff --git a/src/index.js b/src/index.js
index faf9f53c..0cc776b8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -25,7 +25,7 @@ loaderApi.pitch = function loader(request) {
       : options.insert.toString();
   const injectType = options.injectType || 'styleTag';
   const esModule =
-    typeof options.esModule !== 'undefined' ? options.esModule : false;
+    typeof options.esModule !== 'undefined' ? options.esModule : true;
   const namedExport =
     esModule && options.modules && options.modules.namedExport;
   const runtimeOptions = {
diff --git a/test/attributes-option.test.js b/test/attributes-option.test.js
index 82735287..94349d9e 100644
--- a/test/attributes-option.test.js
+++ b/test/attributes-option.test.js
@@ -43,7 +43,7 @@ describe('"attributes" option', () => {
       expect.assertions(3);
 
       const entry = getEntryByInjectType('nonce-require.js', injectType);
-      const compiler = getCompiler(entry, { injectType });
+      const compiler = getCompiler(entry, { injectType, esModule: false });
       const stats = await compile(compiler);
 
       runInJsDom('main.bundle.js', compiler, stats, (dom) => {
diff --git a/test/insert-option.test.js b/test/insert-option.test.js
index 3901f9b4..acd55589 100644
--- a/test/insert-option.test.js
+++ b/test/insert-option.test.js
@@ -88,6 +88,7 @@ describe('"insert" option', () => {
 
       const entry = getEntryByInjectType('element.js', injectType);
       const compiler = getCompiler(entry, {
+        esModule: false,
         injectType,
         insert: (element) =>
           document.querySelector('#test-shadow').appendChild(element),
diff --git a/test/loader.test.js b/test/loader.test.js
index 979491a0..4ca59b72 100644
--- a/test/loader.test.js
+++ b/test/loader.test.js
@@ -324,6 +324,7 @@ describe('loader', () => {
 
         const compiler = getCompiler('./lazy-negative-refs.js', {
           injectType,
+          esModule: false,
         });
         const stats = await compile(compiler);