feat: esModule option (#1026)

webpack-contrib · Dec 17, 2019 · d358cdb · d358cdb
1 parent 23bc1e9
commit d358cdb
Show file tree

Hide file tree

Showing 17 changed files with 704 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -118,6 +118,7 @@ module.exports = {
 |    **[`importLoaders`](#importloaders)**    |         `{Number}`          |   `0`    | Enables/Disables or setups number of loaders applied before CSS loader |
 | **[`localsConvention`](#localsconvention)** |         `{String}`          | `'asIs'` | Style of exported classnames                                           |
 |       **[`onlyLocals`](#onlylocals)**       |         `{Boolean}`         | `false`  | Export only locals                                                     |
+|         **[`esModule`](#esmodule)**         |         `{Boolean}`         | `false`  | Use ES modules syntax                                                  |
 
 ### `url`
 
@@ -857,6 +858,34 @@ module.exports = {
 };
 ```
 
+### `esModule`
+
+Type: `Boolean`
+Default: `false`
+
+By default, `css-loader` 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
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: 'css-loader',
+        options: {
+          esModule: true,
+        },
+      },
+    ],
+  },
+};
+```
+
 ## Examples
 
 ### Assets

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/index.js b/src/index.js
@@ -107,12 +107,16 @@ export default function loader(content, map, meta) {
       }
 
       const { importLoaders, localsConvention } = options;
+      const esModule =
+        typeof options.esModule !== 'undefined' ? options.esModule : false;
+
       const importCode = getImportCode(
         this,
         imports,
         exportType,
         sourceMap,
-        importLoaders
+        importLoaders,
+        esModule
       );
       const moduleCode = getModuleCode(
         this,
@@ -126,7 +130,8 @@ export default function loader(content, map, meta) {
         exports,
         exportType,
         replacers,
-        localsConvention
+        localsConvention,
+        esModule
       );
 
       return callback(null, [importCode, moduleCode, exportCode].join(''));

diff --git a/src/options.json b/src/options.json
@@ -94,6 +94,10 @@
     "onlyLocals": {
       "description": "Export only locals (https://github.com/webpack-contrib/css-loader#onlylocals).",
       "type": "boolean"
+    },
+    "esModule": {
+      "description": "Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule).",
+      "type": "boolean"
     }
   },
   "type": "object"

diff --git a/src/utils.js b/src/utils.js
@@ -205,7 +205,8 @@ function getImportCode(
   imports,
   exportType,
   sourceMap,
-  importLoaders
+  importLoaders,
+  esModule
 ) {
   const importItems = [];
   const codeItems = [];
@@ -216,12 +217,21 @@ function getImportCode(
 
   if (exportType === 'full') {
     importItems.push(
-      `var ___CSS_LOADER_API_IMPORT___ = require(${stringifyRequest(
-        loaderContext,
-        require.resolve('./runtime/api')
-      )});`
+      esModule
+        ? `import ___CSS_LOADER_API_IMPORT___ from ${stringifyRequest(
+            loaderContext,
+            require.resolve('./runtime/api')
+          )};`
+        : `var ___CSS_LOADER_API_IMPORT___ = require(${stringifyRequest(
+            loaderContext,
+            require.resolve('./runtime/api')
+          )});`
+    );
+    codeItems.push(
+      esModule
+        ? `var exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});`
+        : `exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});`
     );
-    codeItems.push(`exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});`);
   }
 
   imports.forEach((item) => {
@@ -251,10 +261,15 @@ function getImportCode(
 
             importName = `___CSS_LOADER_AT_RULE_IMPORT_${atRuleImportNames.size}___`;
             importItems.push(
-              `var ${importName} = require(${stringifyRequest(
-                loaderContext,
-                importPrefix + url
-              )});`
+              esModule
+                ? `import ${importName} from ${stringifyRequest(
+                    loaderContext,
+                    importPrefix + url
+                  )};`
+                : `var ${importName} = require(${stringifyRequest(
+                    loaderContext,
+                    importPrefix + url
+                  )});`
             );
 
             atRuleImportNames.set(url, importName);
@@ -267,10 +282,15 @@ function getImportCode(
         {
           if (urlImportNames.size === 0) {
             importItems.push(
-              `var ___CSS_LOADER_GET_URL_IMPORT___ = require(${stringifyRequest(
-                loaderContext,
-                require.resolve('./runtime/getUrl.js')
-              )});`
+              esModule
+                ? `import ___CSS_LOADER_GET_URL_IMPORT___ from ${stringifyRequest(
+                    loaderContext,
+                    require.resolve('./runtime/getUrl.js')
+                  )};`
+                : `var ___CSS_LOADER_GET_URL_IMPORT___ = require(${stringifyRequest(
+                    loaderContext,
+                    require.resolve('./runtime/getUrl.js')
+                  )});`
             );
           }
 
@@ -281,10 +301,15 @@ function getImportCode(
           if (!importName) {
             importName = `___CSS_LOADER_URL_IMPORT_${urlImportNames.size}___`;
             importItems.push(
-              `var ${importName} = require(${stringifyRequest(
-                loaderContext,
-                url
-              )});`
+              esModule
+                ? `import ${importName} from ${stringifyRequest(
+                    loaderContext,
+                    url
+                  )};`
+                : `var ${importName} = require(${stringifyRequest(
+                    loaderContext,
+                    url
+                  )});`
             );
 
             urlImportNames.set(url, importName);
@@ -311,10 +336,15 @@ function getImportCode(
           }
 
           importItems.push(
-            `var ${importName} = require(${stringifyRequest(
-              loaderContext,
-              importPrefix + url
-            )});`
+            esModule
+              ? `import ${importName} from ${stringifyRequest(
+                  loaderContext,
+                  importPrefix + url
+                )};`
+              : `var ${importName} = require(${stringifyRequest(
+                  loaderContext,
+                  importPrefix + url
+                )});`
           );
 
           if (exportType === 'full') {
@@ -380,7 +410,8 @@ function getExportCode(
   exports,
   exportType,
   replacers,
-  localsConvention
+  localsConvention,
+  esModule
 ) {
   const exportItems = [];
   let exportLocalsCode;
@@ -448,13 +479,19 @@ function getExportCode(
   }
 
   if (exportType === 'locals') {
-    exportItems.push(`module.exports = {\n${exportLocalsCode}\n};`);
+    exportItems.push(
+      `${
+        esModule ? 'export default' : 'module.exports ='
+      } {\n${exportLocalsCode}\n};`
+    );
   } else {
     if (exportLocalsCode) {
       exportItems.push(`exports.locals = {\n${exportLocalsCode}\n};`);
     }
 
-    exportItems.push('module.exports = exports;');
+    exportItems.push(
+      `${esModule ? 'export default' : 'module.exports ='} exports;`
+    );
   }
 
   return `// Exports\n${exportItems.join('\n')}\n`;