feat: enabled esModule by default (#489)

BRAKING CHANGE: the `esModule` option is `true` by default, you need to change `const locals = require('./styles.css')` on ʻimport locals from './styles.css'`
webpack-contrib · Oct 9, 2020 · 727a24d · 727a24d
1 parent f8e13c9
commit 727a24d
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -324,6 +324,7 @@ describe('loader', () => {
 
         const compiler = getCompiler('./lazy-negative-refs.js', {
           injectType,
+          esModule: false,
         });
         const stats = await compile(compiler);