feat: added modules.namedExport (#485)

webpack-contrib · Oct 3, 2020 · 15889db · 15889db
1 parent 6e54e4f
commit 15889db
Show file tree

Hide file tree

Showing 15 changed files with 556 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -61,13 +61,14 @@ module.exports = {
 
 ## Options
 
-|              Name               |         Type         |  Default   | Description                                              |
-| :-----------------------------: | :------------------: | :--------: | :------------------------------------------------------- |
-| [**`injectType`**](#injecttype) |      `{String}`      | `styleTag` | Allows to setup how styles will be injected into the DOM |
-| [**`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                                    |
+|              Name               |         Type         |   Default   | Description                                              |
+| :-----------------------------: | :------------------: | :---------: | :------------------------------------------------------- |
+| [**`injectType`**](#injecttype) |      `{String}`      | `styleTag`  | Allows to setup how styles will be injected into the DOM |
+| [**`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                                    |
+|    [**`modules`**](#modules)    |      `{Object}`      | `undefined` | Configuration CSS Modules                                |
 
 ### `injectType`
 
@@ -580,6 +581,81 @@ module.exports = {
 };
 ```
 
+### `modules`
+
+Type: `Object`
+Default: `undefined`
+
+Configuration CSS Modules.
+
+#### `namedExport`
+
+Type: `Boolean`
+Default: `false`
+
+Enables/disables ES modules named export for locals.
+
+> ⚠ Names of locals are converted to `camelCase`.
+
+> ⚠ It is not allowed to use JavaScript reserved words in css class names.
+
+> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` and `style-loader` should be enabled.
+
+**styles.css**
+
+```css
+.foo-baz {
+  color: red;
+}
+.bar {
+  color: blue;
+}
+```
+
+**index.js**
+
+```js
+import { fooBaz, bar } from './styles.css';
+
+console.log(fooBaz, bar);
+```
+
+You can enable a ES module named export using:
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+            options: {
+              esModule: true,
+              modules: {
+                namedExport: true,
+              },
+            },
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              esModule: true,
+              modules: {
+                namedExport: true,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ## Examples
 
 ### Source maps

diff --git a/src/index.js b/src/index.js
@@ -26,6 +26,8 @@ loaderApi.pitch = function loader(request) {
   const injectType = options.injectType || 'styleTag';
   const esModule =
     typeof options.esModule !== 'undefined' ? options.esModule : false;
+  const namedExport =
+    esModule && options.modules && options.modules.namedExport;
   const runtimeOptions = {
     injectType: options.injectType,
     attributes: options.attributes,
@@ -104,20 +106,22 @@ ${esModule ? 'export default {}' : ''}`;
 if (module.hot) {
   if (!content.locals || module.hot.invalidate) {
     var isEqualLocals = ${isEqualLocals.toString()};
-    var oldLocals = content.locals;
+    var oldLocals = ${namedExport ? 'locals' : 'content.locals'};
 
     module.hot.accept(
       ${loaderUtils.stringifyRequest(this, `!!${request}`)},
       function () {
         ${
           esModule
-            ? `if (!isEqualLocals(oldLocals, content.locals)) {
+            ? `if (!isEqualLocals(oldLocals, ${
+                namedExport ? 'locals' : 'content.locals'
+              }, ${namedExport})) {
                 module.hot.invalidate();
 
                 return;
               }
 
-              oldLocals = content.locals;
+              oldLocals = ${namedExport ? 'locals' : 'content.locals'};
 
               if (update && refs > 0) {
                 update(content);
@@ -159,10 +163,9 @@ if (module.hot) {
               this,
               `!${path.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`
             )};
-            import content from ${loaderUtils.stringifyRequest(
-              this,
-              `!!${request}`
-            )};`
+            import content${
+              namedExport ? ', * as locals' : ''
+            } from ${loaderUtils.stringifyRequest(this, `!!${request}`)};`
           : `var api = require(${loaderUtils.stringifyRequest(
               this,
               `!${path.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`
@@ -188,7 +191,7 @@ options.singleton = ${isSingleton};
 
 var exported = {};
 
-exported.locals = content.locals || {};
+${namedExport ? '' : 'exported.locals = content.locals || {};'}
 exported.use = function() {
   if (!(refs++)) {
     update = api(content, options);
@@ -205,7 +208,20 @@ exported.unuse = function() {
 
 ${hmrCode}
 
-${esModule ? 'export default' : 'module.exports ='} exported;`;
+${
+  esModule
+    ? `${
+        namedExport
+          ? `export * from ${loaderUtils.stringifyRequest(
+              this,
+              `!!${request}`
+            )};`
+          : ''
+      };
+       export default exported;`
+    : 'module.exports = exported;'
+}
+`;
     }
 
     case 'styleTag':
@@ -218,20 +234,22 @@ ${esModule ? 'export default' : 'module.exports ='} exported;`;
 if (module.hot) {
   if (!content.locals || module.hot.invalidate) {
     var isEqualLocals = ${isEqualLocals.toString()};
-    var oldLocals = content.locals;
+    var oldLocals = ${namedExport ? 'locals' : 'content.locals'};
 
     module.hot.accept(
       ${loaderUtils.stringifyRequest(this, `!!${request}`)},
       function () {
         ${
           esModule
-            ? `if (!isEqualLocals(oldLocals, content.locals)) {
+            ? `if (!isEqualLocals(oldLocals, ${
+                namedExport ? 'locals' : 'content.locals'
+              }, ${namedExport})) {
                 module.hot.invalidate();
 
                 return;
               }
 
-              oldLocals = content.locals;
+              oldLocals = ${namedExport ? 'locals' : 'content.locals'};
 
               update(content);`
             : `content = require(${loaderUtils.stringifyRequest(
@@ -271,10 +289,9 @@ if (module.hot) {
               this,
               `!${path.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`
             )};
-            import content from ${loaderUtils.stringifyRequest(
-              this,
-              `!!${request}`
-            )};`
+            import content${
+              namedExport ? ', * as locals' : ''
+            } from ${loaderUtils.stringifyRequest(this, `!!${request}`)};`
           : `var api = require(${loaderUtils.stringifyRequest(
               this,
               `!${path.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`
@@ -300,7 +317,13 @@ var update = api(content, options);
 
 ${hmrCode}
 
-${esModule ? 'export default' : 'module.exports ='} content.locals || {};`;
+${
+  esModule
+    ? namedExport
+      ? `export * from ${loaderUtils.stringifyRequest(this, `!!${request}`)};`
+      : 'export default content.locals || {};'
+    : 'module.exports = content.locals || {};'
+}`;
     }
   }
 };

diff --git a/src/options.json b/src/options.json
@@ -33,6 +33,16 @@
     "esModule": {
       "description": "Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule).",
       "type": "boolean"
+    },
+    "modules": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "namedExport": {
+          "description": "Enables/disables ES modules named export for locals (https://webpack.js.org/plugins/mini-css-extract-plugin/#namedexport).",
+          "type": "boolean"
+        }
+      }
     }
   },
   "additionalProperties": false

diff --git a/src/runtime/isEqualLocals.js b/src/runtime/isEqualLocals.js
@@ -1,17 +1,27 @@
-function isEqualLocals(a, b) {
+function isEqualLocals(a, b, isNamedExport) {
   if ((!a && b) || (a && !b)) {
     return false;
   }
 
   let p;
 
   for (p in a) {
+    if (isNamedExport && p === 'default') {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
     if (a[p] !== b[p]) {
       return false;
     }
   }
 
   for (p in b) {
+    if (isNamedExport && p === 'default') {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
     if (!a[p]) {
       return false;
     }

diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`"modules" option should work with the "lazySingletonStyleTag" inject type: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+<div class=\\"KDvN8WTqb8V1KZHXZP-v\\">Water</div><div class=\\"_2ytpV86orKhgjYu_KpCdi _2SqzNMl3NVNNilgJp7bbug\\">Ground</div></body></html>"
+`;
+
+exports[`"modules" option should work with the "lazySingletonStyleTag" inject type: errors 1`] = `Array []`;
+
+exports[`"modules" option should work with the "lazySingletonStyleTag" inject type: warnings 1`] = `Array []`;
+
+exports[`"modules" option should work with the "lazyStyleTag" inject type: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+<div class=\\"KDvN8WTqb8V1KZHXZP-v\\">Water</div><div class=\\"_2ytpV86orKhgjYu_KpCdi _2SqzNMl3NVNNilgJp7bbug\\">Ground</div></body></html>"
+`;
+
+exports[`"modules" option should work with the "lazyStyleTag" inject type: errors 1`] = `Array []`;
+
+exports[`"modules" option should work with the "lazyStyleTag" inject type: warnings 1`] = `Array []`;
+
+exports[`"modules" option should work with the "singletonStyleTag" inject type: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<style>._2SqzNMl3NVNNilgJp7bbug {
+  background: red;
+}
+.KDvN8WTqb8V1KZHXZP-v {
+    background: red;
+}
+
+._2ytpV86orKhgjYu_KpCdi {
+    color: blue;
+}
+</style></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+<div class=\\"KDvN8WTqb8V1KZHXZP-v\\">Water</div><div class=\\"_2ytpV86orKhgjYu_KpCdi _2SqzNMl3NVNNilgJp7bbug\\">Ground</div></body></html>"
+`;
+
+exports[`"modules" option should work with the "singletonStyleTag" inject type: errors 1`] = `Array []`;
+
+exports[`"modules" option should work with the "singletonStyleTag" inject type: warnings 1`] = `Array []`;
+
+exports[`"modules" option should work with the "styleTag" inject type: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<style>._2SqzNMl3NVNNilgJp7bbug {
+  background: red;
+}
+</style><style>.KDvN8WTqb8V1KZHXZP-v {
+    background: red;
+}
+
+._2ytpV86orKhgjYu_KpCdi {
+    color: blue;
+}
+</style></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+<div class=\\"KDvN8WTqb8V1KZHXZP-v\\">Water</div><div class=\\"_2ytpV86orKhgjYu_KpCdi _2SqzNMl3NVNNilgJp7bbug\\">Ground</div></body></html>"
+`;
+
+exports[`"modules" option should work with the "styleTag" inject type: errors 1`] = `Array []`;
+
+exports[`"modules" option should work with the "styleTag" inject type: warnings 1`] = `Array []`;