feat: esModule export named

Author: cap-Bernardito

README.md

@@ -119,6 +119,7 @@ module.exports = {
 | **[`localsConvention`](#localsconvention)** |         `{String}`          |      `'asIs'`      | Style of exported classnames                                           |
 |       **[`onlyLocals`](#onlylocals)**       |         `{Boolean}`         |      `false`       | Export only locals                                                     |
 |         **[`esModule`](#esmodule)**         |         `{Boolean}`         |      `false`       | Use ES modules syntax                                                  |
+|      **[`exportNamed`](#exportNamed)**      |         `{Boolean}`         |      `false`       | Use ES modules named export                                            |
 
 ### `url`
 
@@ -1035,6 +1036,54 @@ module.exports = {
 };
 ```
 
+### `exportNamed`
+
+Type: `Boolean`
+Default: `false`
+
+Enable/disable ES modules named export for css classes.
+
+**styles.css**
+
+```css
+.foo {
+  color: red;
+}
+.bar {
+  color: blue;
+}
+```
+
+**index.js**
+
+```js
+import { foo, bar } from './styles.css';
+
+console.log(foo, bar);
+```
+
+You can enable a ES module named export using:
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: 'css-loader',
+        options: {
+          esModule: true,
+          modules: true,
+          exportNamed: true,
+        },
+      },
+    ],
+  },
+};
+```
+
 ## Examples
 
 ### Assets

src/index.js

@@ -171,26 +171,50 @@ export default function loader(content, map, meta) {
         );
       });
 
-      const { localsConvention } = options;
+      const exportNamed =
+        typeof options.exportNamed !== 'undefined'
+          ? options.exportNamed
+          : false;
+
+      const { localsConvention } = exportNamed
+        ? { localsConvention: 'camelCaseOnly' }
+        : options;
+
       const esModule =
         typeof options.esModule !== 'undefined' ? options.esModule : false;
 
-      const importCode = getImportCode(this, exportType, imports, esModule);
+      if (Boolean(exportNamed) && Boolean(exportNamed) !== Boolean(esModule)) {
+        this.emitError(
+          new Error(
+            '`Options.exportNamed` can not use without `options.esModule`'
+          )
+        );
+      }
+
+      const importCode = getImportCode(
+        this,
+        exportType,
+        imports,
+        esModule,
+        exportNamed
+      );
       const moduleCode = getModuleCode(
         result,
         exportType,
         sourceMap,
         apiImports,
         urlReplacements,
         icssReplacements,
-        esModule
+        esModule,
+        exportNamed
       );
       const exportCode = getExportCode(
         exports,
         exportType,
         localsConvention,
         icssReplacements,
-        esModule
+        esModule,
+        exportNamed
       );
 
       return callback(null, `${importCode}${moduleCode}${exportCode}`);

src/options.json

@@ -121,6 +121,10 @@
     "esModule": {
       "description": "Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule).",
       "type": "boolean"
+    },
+    "exportNamed": {
+      "description": "Use the named export ES modules.",
+      "type": "boolean"
     }
   },
   "type": "object"

src/plugins/postcss-icss-parser.js

@@ -83,6 +83,7 @@ export default postcss.plugin(
                 value: {
                   // 'CSS_LOADER_ICSS_IMPORT'
                   order: 0,
+                  icss: true,
                   importName,
                   url: options.urlHandler(resolvedUrl),
                   index: currentIndex,

src/utils.js

@@ -258,7 +258,13 @@ function getPreRequester({ loaders, loaderIndex }) {
   };
 }
 
-function getImportCode(loaderContext, exportType, imports, esModule) {
+function getImportCode(
+  loaderContext,
+  exportType,
+  imports,
+  esModule,
+  exportNamed
+) {
   let code = '';
 
   if (exportType === 'full') {
@@ -273,10 +279,12 @@ function getImportCode(loaderContext, exportType, imports, esModule) {
   }
 
   for (const item of imports) {
-    const { importName, url } = item;
+    const { importName, url, icss } = item;
 
     code += esModule
-      ? `import ${importName} from ${url};\n`
+      ? icss && exportNamed
+        ? `import ${importName}, * as ${importName}_NAMED___ from ${url};\n`
+        : `import ${importName} from ${url};\n`
       : `var ${importName} = require(${url});\n`;
   }
 
@@ -290,7 +298,8 @@ function getModuleCode(
   apiImports,
   urlReplacements,
   icssReplacements,
-  esModule
+  esModule,
+  exportNamed
 ) {
   if (exportType !== 'full') {
     return 'var ___CSS_LOADER_EXPORT___ = {};\n';
@@ -339,9 +348,12 @@ function getModuleCode(
   for (const replacement of icssReplacements) {
     const { replacementName, importName, localName } = replacement;
 
-    code = code.replace(
-      new RegExp(replacementName, 'g'),
-      () => `" + ${importName}.locals[${JSON.stringify(localName)}] + "`
+    code = code.replace(new RegExp(replacementName, 'g'), () =>
+      exportNamed
+        ? `" + ${importName}_NAMED___[${JSON.stringify(
+            camelCase(localName)
+          )}] + "`
+        : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`
     );
   }
 
@@ -359,17 +371,23 @@ function getExportCode(
   exportType,
   localsConvention,
   icssReplacements,
-  esModule
+  esModule,
+  exportNamed
 ) {
   let code = '';
   let localsCode = '';
+  let namedCode = '';
 
   const addExportToLocalsCode = (name, value) => {
     if (localsCode) {
       localsCode += `,\n`;
     }
 
     localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`;
+
+    if (exportNamed) {
+      namedCode += `export const ${name} = ${JSON.stringify(value)};\n`;
+    }
   };
 
   for (const { name, value } of exports) {
@@ -416,10 +434,22 @@ function getExportCode(
       new RegExp(replacementName, 'g'),
       () => `" + ${importName}.locals[${JSON.stringify(localName)}] + "`
     );
+
+    if (exportNamed) {
+      namedCode = namedCode.replace(
+        new RegExp(replacementName, 'g'),
+        () =>
+          `" + ${importName}_NAMED___[${JSON.stringify(
+            camelCase(localName)
+          )}] + "`
+      );
+    }
   }
 
   if (localsCode) {
-    code += `___CSS_LOADER_EXPORT___.locals = {\n${localsCode}\n};\n`;
+    code += namedCode
+      ? `${namedCode}\n`
+      : `___CSS_LOADER_EXPORT___.locals = {\n${localsCode}\n};\n`;
   }
 
   code += `${