css-loader 6.1.0 → 6.2.0

package/README.md

@@ -1031,6 +1031,9 @@ module.exports = {
 };
 ```
 
+To set a custom name for namedExport, can use [`exportLocalsConvention`](#exportLocalsConvention) option as a function.
+Example below in the [`examples`](#examples) section.
+
 ##### `exportGlobals`
 
 Type: `Boolean`
@@ -1060,11 +1063,13 @@ module.exports = {
 
 ##### `exportLocalsConvention`
 
-Type: `String`
+Type: `String|Function`
 Default: based on the `modules.namedExport` option value, if `true` - `camelCaseOnly`, otherwise `asIs`
 
 Style of exported class names.
 
+###### `String`
+
 By default, the exported JSON keys mirror the class names (i.e `asIs` value).
 
 > ⚠ Only `camelCaseOnly` value allowed if you set the `namedExport` value to `true`.
@@ -1110,6 +1115,58 @@ module.exports = {
 };
 ```
 
+###### `Function`
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: "css-loader",
+        options: {
+          modules: {
+            exportLocalsConvention: function (name) {
+              return name.replace(/-/g, "_");
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: "css-loader",
+        options: {
+          modules: {
+            exportLocalsConvention: function (name) {
+              return [
+                name.replace(/-/g, "_"),
+                // dashesCamelCase
+                name.replace(/-+(\w)/g, (match, firstLetter) =>
+                  firstLetter.toUpperCase()
+                ),
+              ];
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
 ##### `exportOnlyLocals`
 
 Type: `Boolean`
@@ -1434,6 +1491,31 @@ module.exports = {
 };
 ```
 
+### Named export with custom export names
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: "css-loader",
+        options: {
+          modules: {
+            namedExport: true,
+            exportLocalsConvention: function (name) {
+              return name.replace(/-/g, "_");
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
 ### Separating `Interoperable CSS`-only and `CSS Module` features
 
 The following setup is an example of allowing `Interoperable CSS` features only (such as `:import` and `:export`) without using further `CSS Module` functionality by setting `mode` option for all files that do not match `*.module.scss` naming convention. This is for reference as having `ICSS` features applied to all files was default `css-loader` behavior before v4.

package/dist/index.js

@@ -180,7 +180,15 @@ async function loader(content, map, meta) {
   }
 
   const importCode = (0, _utils.getImportCode)(imports, options);
-  const moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options, this);
+  let moduleCode;
+
+  try {
+    moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options, this);
+  } catch (error) {
+    callback(error);
+    return;
+  }
+
   const exportCode = (0, _utils.getExportCode)(exports, replacements, needToUseIcssPlugin, options);
   callback(null, `${importCode}${moduleCode}${exportCode}`);
 }

package/dist/options.json

@@ -145,12 +145,19 @@
             "exportLocalsConvention": {
               "description": "Style of exported classnames.",
               "link": "https://github.com/webpack-contrib/css-loader#localsconvention",
-              "enum": [
-                "asIs",
-                "camelCase",
-                "camelCaseOnly",
-                "dashes",
-                "dashesOnly"
+              "anyOf": [
+                {
+                  "enum": [
+                    "asIs",
+                    "camelCase",
+                    "camelCaseOnly",
+                    "dashes",
+                    "dashesOnly"
+                  ]
+                },
+                {
+                  "instanceof": "Function"
+                }
               ]
             },
             "exportOnlyLocals": {

package/dist/utils.js

@@ -462,6 +462,11 @@ function getFilter(filter, resourcePath) {
 }
 
 function getValidLocalName(localName, exportLocalsConvention) {
+  if (typeof exportLocalsConvention === "function") {
+    const result = exportLocalsConvention(localName);
+    return Array.isArray(result) ? result[0] : result;
+  }
+
   if (exportLocalsConvention === "dashesOnly") {
     return dashesCamelCase(localName);
   }
@@ -560,7 +565,7 @@ function getModulesOptions(rawOptions, loaderContext) {
       throw new Error('The "modules.namedExport" option requires the "esModules" option to be enabled');
     }
 
-    if (modulesOptions.exportLocalsConvention !== "camelCaseOnly" && modulesOptions.exportLocalsConvention !== "dashesOnly") {
+    if (typeof modulesOptions.exportLocalsConvention === "string" && modulesOptions.exportLocalsConvention !== "camelCaseOnly" && modulesOptions.exportLocalsConvention !== "dashesOnly") {
       throw new Error('The "modules.namedExport" option requires the "modules.exportLocalsConvention" option to be "camelCaseOnly" or "dashesOnly"');
     }
   }
@@ -861,15 +866,19 @@ function getExportCode(exports, replacements, needToUseIcssPlugin, options) {
 
   let localsCode = "";
 
-  const addExportToLocalsCode = (name, value) => {
-    if (options.modules.namedExport) {
-      localsCode += `export var ${name} = ${JSON.stringify(value)};\n`;
-    } else {
-      if (localsCode) {
-        localsCode += `,\n`;
-      }
+  const addExportToLocalsCode = (names, value) => {
+    const normalizedNames = Array.isArray(names) ? new Set(names) : new Set([names]);
 
-      localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`;
+    for (const name of normalizedNames) {
+      if (options.modules.namedExport) {
+        localsCode += `export var ${name} = ${JSON.stringify(value)};\n`;
+      } else {
+        if (localsCode) {
+          localsCode += `,\n`;
+        }
+
+        localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`;
+      }
     }
   };
 
@@ -877,16 +886,17 @@ function getExportCode(exports, replacements, needToUseIcssPlugin, options) {
     name,
     value
   } of exports) {
+    if (typeof options.modules.exportLocalsConvention === "function") {
+      addExportToLocalsCode(options.modules.exportLocalsConvention(name), value); // eslint-disable-next-line no-continue
+
+      continue;
+    }
+
     switch (options.modules.exportLocalsConvention) {
       case "camelCase":
         {
-          addExportToLocalsCode(name, value);
           const modifiedName = camelCase(name);
-
-          if (modifiedName !== name) {
-            addExportToLocalsCode(modifiedName, value);
-          }
-
+          addExportToLocalsCode([name, modifiedName], value);
           break;
         }
 
@@ -898,13 +908,8 @@ function getExportCode(exports, replacements, needToUseIcssPlugin, options) {
 
       case "dashes":
         {
-          addExportToLocalsCode(name, value);
           const modifiedName = dashesCamelCase(name);
-
-          if (modifiedName !== name) {
-            addExportToLocalsCode(modifiedName, value);
-          }
-
+          addExportToLocalsCode([name, modifiedName], value);
           break;
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",