css-loader 6.11.0 → 7.1.0

package/README.md

@@ -47,7 +47,7 @@ Then add the plugin to your `webpack` config. For example:
 **file.js**
 
 ```js
-import css from "file.css";
+import * as css from "file.css";
 ```
 
 **webpack.config.js**
@@ -192,7 +192,7 @@ type importFn =
         media: string,
         resourcePath: string,
         supports?: string,
-        layer?: string
+        layer?: string,
       ) => boolean;
     };
 ```
@@ -315,18 +315,29 @@ type modules =
       getLocalIdent: (
         context: LoaderContext,
         localIdentName: string,
-        localName: string
+        localName: string,
       ) => string;
       namedExport: boolean;
       exportGlobals: boolean;
       exportLocalsConvention:
-        | "asIs"
-        | "camelCase"
-        | "camelCaseOnly"
+        | "as-is"
+        | "camel-case"
+        | "camel-case-only"
         | "dashes"
-        | "dashesOnly"
+        | "dashes-only"
         | ((name: string) => string);
       exportOnlyLocals: boolean;
+      getJSON: ({
+        resourcePath,
+        imports,
+        exports,
+        replacements,
+      }: {
+        resourcePath: string;
+        imports: object[];
+        exports: object[];
+        replacements: object[];
+      }) => Promise<void> | void;
     };
 ```
 
@@ -489,7 +500,10 @@ To import from multiple modules use multiple `composes:` rules.
 
 ```css
 :local(.className) {
-  composes: edit highlight from "./edit.css", button from "module/button.css", classFromThisModule;
+  composes:
+    edit highlight from "./edit.css",
+    button from "module/button.css",
+    classFromThisModule;
   background: red;
 }
 ```
@@ -599,8 +613,9 @@ module.exports = {
             localIdentContext: path.resolve(__dirname, "src"),
             localIdentHashSalt: "my-custom-hash",
             namedExport: true,
-            exportLocalsConvention: "camelCase",
+            exportLocalsConvention: "as-is",
             exportOnlyLocals: false,
+            getJSON: ({ resourcePath, imports, exports, replacements }) => {},
           },
         },
       },
@@ -620,7 +635,7 @@ type auto =
   | ((
       resourcePath: string,
       resourceQuery: string,
-      resourceFragment: string
+      resourceFragment: string,
     ) => boolean);
 ```
 
@@ -726,7 +741,7 @@ type mode =
   | ((
       resourcePath: string,
       resourceQuery: string,
-      resourceFragment: string
+      resourceFragment: string,
     ) => "local" | "global" | "pure" | "icss");
 ```
 
@@ -1094,7 +1109,7 @@ Type:
 type getLocalIdent = (
   context: LoaderContext,
   localIdentName: string,
-  localName: string
+  localName: string,
 ) => string;
 ```
 
@@ -1135,21 +1150,13 @@ Type:
 type namedExport = boolean;
 ```
 
-Default: `false`
+Default: Depends on the value of the `esModule` option. If the value of the `esModule` options is `true`, this value will also be `true`, otherwise it will be `false`.
 
 Enables/disables ES modules named export for locals.
 
 > **Warning**
 >
-> Names of locals are converted to camelcase, i.e. the `exportLocalsConvention` option has
-> `camelCaseOnly` value by default. You can set this back to any other valid option but selectors
-> which are not valid JavaScript identifiers may run into problems which do not implement the entire
-> modules specification.
-
-> **Warning**
->
-> It is not allowed to use JavaScript reserved words in css class names unless
-> `exportLocalsConvention` is `"asIs"`.
+> It is not allowed to use the `default` reserved word in css classes.
 
 **styles.css**
 
@@ -1167,9 +1174,11 @@ Enables/disables ES modules named export for locals.
 ```js
 import * as styles from "./styles.css";
 
-console.log(styles.fooBaz, styles.bar);
-// or if using `exportLocalsConvention: "asIs"`:
+// If using `exportLocalsConvention: "as-is"` (default value):
 console.log(styles["foo-baz"], styles.bar);
+
+// If using `exportLocalsConvention: "camel-case-only"`:
+console.log(styles.fooBaz, styles.bar);
 ```
 
 You can enable a ES module named export using:
@@ -1236,29 +1245,35 @@ Type:
 
 ```ts
 type exportLocalsConvention =
-  | "asIs"
-  | "camelCase"
-  | "camelCaseOnly"
+  | "as-is"
+  | "camel-case"
+  | "camel-case-only"
   | "dashes"
-  | "dashesOnly"
+  | "dashes-only"
   | ((name: string) => string);
 ```
 
-Default: based on the `modules.namedExport` option value, if `true` - `camelCaseOnly`, otherwise `asIs`
+Default: Depends on the value of the `modules.namedExport` option, if `true` - `as-is`, otherwise `camel-case-only`.
+
+> **Warning**
+>
+> Names of locals are converted to camelcase when the named export is `false`, i.e. the `exportLocalsConvention` option has
+> `camelCaseOnly` value by default. You can set this back to any other valid option but selectors
+> which are not valid JavaScript identifiers may run into problems which do not implement the entire modules specification.
 
 Style of exported class names.
 
 ###### `string`
 
-By default, the exported JSON keys mirror the class names (i.e `asIs` value).
+By default, the exported JSON keys mirror the class names (i.e `as-is` value).
 
-|         Name          |   Type   | Description                                                                                      |
-| :-------------------: | :------: | :----------------------------------------------------------------------------------------------- |
-|     **`'asIs'`**      | `string` | Class names will be exported as is.                                                              |
-|   **`'camelCase'`**   | `string` | Class names will be camelized, the original class name will not to be removed from the locals    |
-| **`'camelCaseOnly'`** | `string` | Class names will be camelized, the original class name will be removed from the locals           |
-|    **`'dashes'`**     | `string` | Only dashes in class names will be camelized                                                     |
-|  **`'dashesOnly'`**   | `string` | Dashes in class names will be camelized, the original class name will be removed from the locals |
+|          Name           |   Type   | Description                                                                                      |
+| :---------------------: | :------: | :----------------------------------------------------------------------------------------------- |
+|      **`'as-is'`**      | `string` | Class names will be exported as is.                                                              |
+|   **`'camel-case'`**    | `string` | Class names will be camelized, the original class name will not to be removed from the locals    |
+| **`'camel-case-only'`** | `string` | Class names will be camelized, the original class name will be removed from the locals           |
+|     **`'dashes'`**      | `string` | Only dashes in class names will be camelized                                                     |
+|   **`'dashes-only'`**   | `string` | Dashes in class names will be camelized, the original class name will be removed from the locals |
 
 **file.css**
 
@@ -1284,7 +1299,7 @@ module.exports = {
         loader: "css-loader",
         options: {
           modules: {
-            exportLocalsConvention: "camelCase",
+            exportLocalsConvention: "camel-case-only",
           },
         },
       },
@@ -1333,7 +1348,7 @@ module.exports = {
                 name.replace(/-/g, "_"),
                 // dashesCamelCase
                 name.replace(/-+(\w)/g, (match, firstLetter) =>
-                  firstLetter.toUpperCase()
+                  firstLetter.toUpperCase(),
                 ),
               ];
             },
@@ -1381,6 +1396,252 @@ module.exports = {
 };
 ```
 
+##### `getJSON`
+
+Type:
+
+```ts
+type getJSON = ({
+  resourcePath,
+  imports,
+  exports,
+  replacements,
+}: {
+  resourcePath: string;
+  imports: object[];
+  exports: object[];
+  replacements: object[];
+}) => Promise<void> | void;
+```
+
+Default: `undefined`
+
+Enables a callback to output the CSS modules mapping JSON. The callback is invoked with an object containing the following:
+
+- `resourcePath`: the absolute path of the original resource, e.g., `/foo/bar/baz.module.css`
+
+- `imports`: an array of import objects with data about import types and file paths, e.g.,
+
+```json
+[
+  {
+    "type": "icss_import",
+    "importName": "___CSS_LOADER_ICSS_IMPORT_0___",
+    "url": "\"-!../../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../../../node_modules/postcss-loader/dist/cjs.js!../../../../../node_modules/sass-loader/dist/cjs.js!../../../../baz.module.css\"",
+    "icss": true,
+    "index": 0
+  }
+]
+```
+
+(Note that this will include all imports, not just those relevant to CSS modules.)
+
+- `exports`: an array of export objects with exported names and values, e.g.,
+
+```json
+[
+  {
+    "name": "main",
+    "value": "D2Oy"
+  }
+]
+```
+
+- `replacements`: an array of import replacement objects used for linking `imports` and `exports`, e.g.,
+
+```json
+{
+  "replacementName": "___CSS_LOADER_ICSS_IMPORT_0_REPLACEMENT_0___",
+  "importName": "___CSS_LOADER_ICSS_IMPORT_0___",
+  "localName": "main"
+}
+```
+
+Using `getJSON`, it's possible to output a files with all CSS module mappings.
+In the following example, we use `getJSON` to cache canonical mappings and
+add stand-ins for any composed values (through `composes`), and we use a custom plugin
+to consolidate the values and output them to a file:
+
+**webpack.config.js**
+
+```js
+const path = require("path");
+const fs = require("fs");
+
+const CSS_LOADER_REPLACEMENT_REGEX =
+  /(___CSS_LOADER_ICSS_IMPORT_\d+_REPLACEMENT_\d+___)/g;
+const REPLACEMENT_REGEX = /___REPLACEMENT\[(.*?)]\[(.*?)]___/g;
+const IDENTIFIER_REGEX = /\[(.*?)]\[(.*?)]/;
+const replacementsMap = {};
+const canonicalValuesMap = {};
+const allExportsJson = {};
+
+function generateIdentifier(resourcePath, localName) {
+  return `[${resourcePath}][${localName}]`;
+}
+
+function addReplacements(resourcePath, imports, exportsJson, replacements) {
+  const importReplacementsMap = {};
+
+  // create a dict to quickly identify imports and get their absolute stand-in strings in the currently loaded file
+  // e.g., { '___CSS_LOADER_ICSS_IMPORT_0_REPLACEMENT_0___': '___REPLACEMENT[/foo/bar/baz.css][main]___' }
+  importReplacementsMap[resourcePath] = replacements.reduce(
+    (acc, { replacementName, importName, localName }) => {
+      const replacementImportUrl = imports.find(
+        (importData) => importData.importName === importName,
+      ).url;
+      const relativePathRe = /.*!(.*)"/;
+      const [, relativePath] = replacementImportUrl.match(relativePathRe);
+      const importPath = path.resolve(path.dirname(resourcePath), relativePath);
+      const identifier = generateIdentifier(importPath, localName);
+      return { ...acc, [replacementName]: `___REPLACEMENT${identifier}___` };
+    },
+    {},
+  );
+
+  // iterate through the raw exports and add stand-in variables
+  // ('___REPLACEMENT[<absolute_path>][<class_name>]___')
+  // to be replaced in the plugin below
+  for (const [localName, classNames] of Object.entries(exportsJson)) {
+    const identifier = generateIdentifier(resourcePath, localName);
+
+    if (CSS_LOADER_REPLACEMENT_REGEX.test(classNames)) {
+      // if there are any replacements needed in the concatenated class names,
+      // add them all to the replacements map to be replaced altogether later
+      replacementsMap[identifier] = classNames.replaceAll(
+        CSS_LOADER_REPLACEMENT_REGEX,
+        (_, replacementName) =>
+          importReplacementsMap[resourcePath][replacementName],
+      );
+    } else {
+      // otherwise, no class names need replacements so we can add them to
+      // canonical values map and all exports JSON verbatim
+      canonicalValuesMap[identifier] = classNames;
+
+      allExportsJson[resourcePath] = allExportsJson[resourcePath] || {};
+      allExportsJson[resourcePath][localName] = classNames;
+    }
+  }
+}
+
+function replaceReplacements(classNames) {
+  return classNames.replaceAll(
+    REPLACEMENT_REGEX,
+    (_, resourcePath, localName) => {
+      const identifier = generateIdentifier(resourcePath, localName);
+
+      if (identifier in canonicalValuesMap) {
+        return canonicalValuesMap[identifier];
+      }
+
+      // Recurse through other stand-in that may be imports
+      const canonicalValue = replaceReplacements(replacementsMap[identifier]);
+
+      canonicalValuesMap[identifier] = canonicalValue;
+
+      return canonicalValue;
+    },
+  );
+}
+
+function getJSON({ resourcePath, imports, exports, replacements }) {
+  const exportsJson = exports.reduce((acc, { name, value }) => {
+    return { ...acc, [name]: value };
+  }, {});
+
+  if (replacements.length > 0) {
+    // replacements present --> add stand-in values for absolute paths and local names,
+    // which will be resolved to their canonical values in the plugin below
+    addReplacements(resourcePath, imports, exportsJson, replacements);
+  } else {
+    // no replacements present --> add to canonicalValuesMap verbatim
+    // since all values here are canonical/don't need resolution
+    for (const [key, value] of Object.entries(exportsJson)) {
+      const id = `[${resourcePath}][${key}]`;
+
+      canonicalValuesMap[id] = value;
+    }
+
+    allExportsJson[resourcePath] = exportsJson;
+  }
+}
+
+class CssModulesJsonPlugin {
+  constructor(options) {
+    this.options = options;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  apply(compiler) {
+    compiler.hooks.emit.tap("CssModulesJsonPlugin", () => {
+      for (const [identifier, classNames] of Object.entries(replacementsMap)) {
+        const adjustedClassNames = replaceReplacements(classNames);
+
+        replacementsMap[identifier] = adjustedClassNames;
+
+        const [, resourcePath, localName] = identifier.match(IDENTIFIER_REGEX);
+
+        allExportsJson[resourcePath] = allExportsJson[resourcePath] || {};
+        allExportsJson[resourcePath][localName] = adjustedClassNames;
+      }
+
+      fs.writeFileSync(
+        this.options.filepath,
+        JSON.stringify(
+          // Make path to be relative to `context` (your project root)
+          Object.fromEntries(
+            Object.entries(allExportsJson).map((key) => {
+              key[0] = path
+                .relative(compiler.context, key[0])
+                .replace(/\\/g, "/");
+
+              return key;
+            }),
+          ),
+          null,
+          2,
+        ),
+        "utf8",
+      );
+    });
+  }
+}
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: "css-loader",
+        options: { modules: { getJSON } },
+      },
+    ],
+  },
+  plugins: [
+    new CssModulesJsonPlugin({
+      filepath: path.resolve(__dirname, "./output.css.json"),
+    }),
+  ],
+};
+```
+
+In the above, all import aliases are replaced with `___REPLACEMENT[<resourcePath>][<localName>]___` in `getJSON`, and they're resolved in the custom plugin. All CSS mappings are contained in `allExportsJson`:
+
+```json
+{
+  "foo/bar/baz.module.css": {
+    "main": "D2Oy",
+    "header": "thNN"
+  },
+  "foot/bear/bath.module.css": {
+    "logo": "sqiR",
+    "info": "XMyI"
+  }
+}
+```
+
+This is saved to a local file named `output.css.json`.
+
 ### `importLoaders`
 
 Type:
@@ -1770,7 +2031,8 @@ With the help of the `/* webpackIgnore: true */`comment, it is possible to disab
 .class {
   /* Disabled url handling for the second url in the 'background' declaration */
   color: red;
-  background: url("./url/img.png"),
+  background:
+    url("./url/img.png"),
     /* webpackIgnore: true */ url("./url/img.png");
 }
 
@@ -1904,7 +2166,7 @@ module.exports = {
     alias: {
       "/assets/unresolved/img.png": path.resolve(
         __dirname,
-        "assets/real-path-to-img/img.png"
+        "assets/real-path-to-img/img.png",
       ),
     },
   },
@@ -2029,8 +2291,8 @@ File treated as `CSS Module`.
 Using both `CSS Module` functionality as well as SCSS variables directly in JavaScript.
 
 ```jsx
-import svars from "variables.scss";
-import styles from "Component.module.scss";
+import * as svars from "variables.scss";
+import * as styles from "Component.module.scss";
 
 // Render DOM with CSS modules class name
 // <div className={styles.componentClass}>

package/dist/index.js

@@ -45,9 +45,9 @@ async function loader(content, map, meta) {
   if (this._compilation && this._compilation.options && this._compilation.options.experiments && this._compilation.options.experiments.buildHttp) {
     isSupportAbsoluteURL = true;
   }
-  const isSupportDataURL = options.esModule && Boolean("fsStartTime" in this._compiler);
   if ((0, _utils.shouldUseImportPlugin)(options)) {
     plugins.push((0, _plugins.importParser)({
+      // TODO need to fix on webpack side, webpack tries to resolve `./runtime/api.js paths like `http://site.com/runtime/api.js`, maybe we should try first request like absolute, the second like a relative to context
       isSupportAbsoluteURL: false,
       isSupportDataURL: false,
       isCSSStyleSheet: options.exportType === "css-style-sheet",
@@ -63,7 +63,7 @@ async function loader(content, map, meta) {
     const needToResolveURL = !options.esModule;
     plugins.push((0, _plugins.urlParser)({
       isSupportAbsoluteURL,
-      isSupportDataURL,
+      isSupportDataURL: options.esModule,
       imports: urlPluginImports,
       replacements,
       context: this.context,
@@ -171,5 +171,21 @@ async function loader(content, map, meta) {
     return;
   }
   const exportCode = (0, _utils.getExportCode)(exports, replacements, needToUseIcssPlugin, options, isTemplateLiteralSupported);
+  const {
+    getJSON
+  } = options.modules;
+  if (typeof getJSON === "function") {
+    try {
+      await getJSON({
+        resourcePath,
+        imports,
+        exports,
+        replacements
+      });
+    } catch (error) {
+      callback(error);
+      return;
+    }
+  }
   callback(null, `${importCode}${moduleCode}${exportCode}`);
 }

package/dist/options.json

@@ -154,10 +154,14 @@
                 {
                   "enum": [
                     "asIs",
+                    "as-is",
                     "camelCase",
+                    "camel-case",
                     "camelCaseOnly",
+                    "camel-case-only",
                     "dashes",
-                    "dashesOnly"
+                    "dashesOnly",
+                    "dashes-only"
                   ]
                 },
                 {
@@ -169,6 +173,11 @@
               "description": "Export only locals.",
               "link": "https://github.com/webpack-contrib/css-loader#exportonlylocals",
               "type": "boolean"
+            },
+            "getJSON": {
+              "description": "Allows outputting of CSS modules mapping through a callback.",
+              "link": "https://github.com/webpack-contrib/css-loader#getJSON",
+              "instanceof": "Function"
             }
           }
         }

package/dist/utils.js

@@ -42,43 +42,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 */
 
 const WEBPACK_IGNORE_COMMENT_REGEXP = exports.WEBPACK_IGNORE_COMMENT_REGEXP = /webpackIgnore:(\s+)?(true|false)/;
-const matchRelativePath = /^\.\.?[/\\]/;
-function isAbsolutePath(str) {
-  return _path.default.posix.isAbsolute(str) || _path.default.win32.isAbsolute(str);
-}
-function isRelativePath(str) {
-  return matchRelativePath.test(str);
-}
-
-// TODO simplify for the next major release
 function stringifyRequest(loaderContext, request) {
-  if (typeof loaderContext.utils !== "undefined" && typeof loaderContext.utils.contextify === "function") {
-    return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
-  }
-  const splitted = request.split("!");
-  const {
-    context
-  } = loaderContext;
-  return JSON.stringify(splitted.map(part => {
-    // First, separate singlePath from query, because the query might contain paths again
-    const splittedPart = part.match(/^(.*?)(\?.*)/);
-    const query = splittedPart ? splittedPart[2] : "";
-    let singlePath = splittedPart ? splittedPart[1] : part;
-    if (isAbsolutePath(singlePath) && context) {
-      singlePath = _path.default.relative(context, singlePath);
-      if (isAbsolutePath(singlePath)) {
-        // If singlePath still matches an absolute path, singlePath was on a different drive than context.
-        // In this case, we leave the path platform-specific without replacing any separators.
-        // @see https://github.com/webpack/loader-utils/pull/14
-        return singlePath + query;
-      }
-      if (isRelativePath(singlePath) === false) {
-        // Ensure that the relative path starts at least with ./ otherwise it would be a request into the modules directory (like node_modules).
-        singlePath = `./${singlePath}`;
-      }
-    }
-    return singlePath.replace(/\\/g, "/") + query;
-  }).join("!"));
+  return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
 }
 
 // We can't use path.win32.isAbsolute because it also matches paths starting with a forward slash
@@ -272,7 +237,7 @@ const filenameReservedRegex = /[<>:"/\\|?*]/g;
 // eslint-disable-next-line no-control-regex
 const reControlChars = /[\u0000-\u001f\u0080-\u009f]/g;
 function escapeLocalIdent(localident) {
-  // TODO simplify in the next major release
+  // TODO simplify?
   return escape(localident
   // For `[hash]` placeholder
   .replace(/^((-?[0-9])|--)/, "_$1").replace(filenameReservedRegex, "-").replace(reControlChars, "-").replace(/\./g, "-"));
@@ -317,10 +282,8 @@ function defaultGetLocalIdent(loaderContext, localIdentName, localName, options)
   }
   let localIdentHash = "";
   for (let tier = 0; localIdentHash.length < hashDigestLength; tier++) {
-    // TODO remove this in the next major release
-    const hash = loaderContext.utils && typeof loaderContext.utils.createHash === "function" ? loaderContext.utils.createHash(hashFunction) :
     // eslint-disable-next-line no-underscore-dangle
-    loaderContext._compiler.webpack.util.createHash(hashFunction);
+    const hash = loaderContext._compiler.webpack.util.createHash(hashFunction);
     if (hashSalt) {
       hash.update(hashSalt);
     }
@@ -440,7 +403,7 @@ function getValidLocalName(localName, exportLocalsConvention) {
 }
 const IS_MODULES = /\.module(s)?\.\w+$/i;
 const IS_ICSS = /\.icss\.\w+$/i;
-function getModulesOptions(rawOptions, exportType, loaderContext) {
+function getModulesOptions(rawOptions, esModule, exportType, loaderContext) {
   if (typeof rawOptions.modules === "boolean" && rawOptions.modules === false) {
     return false;
   }
@@ -470,6 +433,8 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
     outputOptions
   } = loaderContext._compilation;
   const needNamedExport = exportType === "css-style-sheet" || exportType === "string";
+  const namedExport = typeof rawModulesOptions.namedExport !== "undefined" ? rawModulesOptions.namedExport : needNamedExport || esModule;
+  const exportLocalsConvention = typeof rawModulesOptions.exportLocalsConvention !== "undefined" ? rawModulesOptions.exportLocalsConvention : namedExport ? "as-is" : "camel-case-only";
   const modulesOptions = {
     auto,
     mode: "local",
@@ -484,21 +449,25 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
     localIdentRegExp: undefined,
     // eslint-disable-next-line no-undefined
     getLocalIdent: undefined,
-    namedExport: needNamedExport || false,
-    exportLocalsConvention: (rawModulesOptions.namedExport === true || needNamedExport) && typeof rawModulesOptions.exportLocalsConvention === "undefined" ? "camelCaseOnly" : "asIs",
+    // TODO improve me and enable by default
     exportOnlyLocals: false,
     ...rawModulesOptions,
-    useExportsAs: rawModulesOptions.exportLocalsConvention === "asIs"
+    exportLocalsConvention,
+    namedExport
   };
-  let exportLocalsConventionType;
   if (typeof modulesOptions.exportLocalsConvention === "string") {
-    exportLocalsConventionType = modulesOptions.exportLocalsConvention;
+    // eslint-disable-next-line no-shadow
+    const {
+      exportLocalsConvention
+    } = modulesOptions;
     modulesOptions.exportLocalsConvention = name => {
-      switch (exportLocalsConventionType) {
+      switch (exportLocalsConvention) {
+        case "camel-case":
         case "camelCase":
           {
             return [name, camelCase(name)];
           }
+        case "camel-case-only":
         case "camelCaseOnly":
           {
             return camelCase(name);
@@ -507,10 +476,12 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
           {
             return [name, dashesCamelCase(name)];
           }
+        case "dashes-only":
         case "dashesOnly":
           {
             return dashesCamelCase(name);
           }
+        case "as-is":
         case "asIs":
         default:
           return name;
@@ -548,33 +519,29 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
     modulesOptions.mode = modulesOptions.mode(loaderContext.resourcePath, loaderContext.resourceQuery, loaderContext.resourceFragment);
   }
   if (needNamedExport) {
-    if (rawOptions.esModule === false) {
+    if (esModule === false) {
       throw new Error("The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'esModule' option to be enabled");
     }
     if (modulesOptions.namedExport === false) {
       throw new Error("The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'modules.namedExport' option to be enabled");
     }
   }
-  if (modulesOptions.namedExport === true) {
-    if (rawOptions.esModule === false) {
-      throw new Error("The 'modules.namedExport' option requires the 'esModule' option to be enabled");
-    }
-    if (typeof exportLocalsConventionType === "string" && exportLocalsConventionType !== "asIs" && exportLocalsConventionType !== "camelCaseOnly" && exportLocalsConventionType !== "dashesOnly") {
-      throw new Error('The "modules.namedExport" option requires the "modules.exportLocalsConvention" option to be "camelCaseOnly" or "dashesOnly"');
-    }
+  if (modulesOptions.namedExport === true && esModule === false) {
+    throw new Error("The 'modules.namedExport' option requires the 'esModule' option to be enabled");
   }
   return modulesOptions;
 }
 function normalizeOptions(rawOptions, loaderContext) {
   const exportType = typeof rawOptions.exportType === "undefined" ? "array" : rawOptions.exportType;
-  const modulesOptions = getModulesOptions(rawOptions, exportType, loaderContext);
+  const esModule = typeof rawOptions.esModule === "undefined" ? true : rawOptions.esModule;
+  const modulesOptions = getModulesOptions(rawOptions, esModule, exportType, loaderContext);
   return {
     url: typeof rawOptions.url === "undefined" ? true : rawOptions.url,
     import: typeof rawOptions.import === "undefined" ? true : rawOptions.import,
     modules: modulesOptions,
     sourceMap: typeof rawOptions.sourceMap === "boolean" ? rawOptions.sourceMap : loaderContext.sourceMap,
     importLoaders: typeof rawOptions.importLoaders === "string" ? parseInt(rawOptions.importLoaders, 10) : rawOptions.importLoaders,
-    esModule: typeof rawOptions.esModule === "undefined" ? true : rawOptions.esModule,
+    esModule,
     exportType
   };
 }
@@ -869,6 +836,8 @@ function convertToTemplateLiteral(str) {
 function dashesCamelCase(str) {
   return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase());
 }
+const validIdentifier = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/u;
+const keywords = new Set(["abstract", "boolean", "break", "byte", "case", "catch", "char", "class", "const", "continue", "debugger", "default", "delete", "do", "double", "else", "enum", "export", "extends", "false", "final", "finally", "float", "for", "function", "goto", "if", "implements", "import", "in", "instanceof", "int", "interface", "long", "native", "new", "null", "package", "private", "protected", "public", "return", "short", "static", "super", "switch", "synchronized", "this", "throw", "throws", "transient", "true", "try", "typeof", "var", "void", "volatile", "while", "with"]);
 function getExportCode(exports, replacements, icssPluginUsed, options, isTemplateLiteralSupported) {
   let code = "// Exports\n";
   if (icssPluginUsed) {
@@ -879,7 +848,7 @@ function getExportCode(exports, replacements, icssPluginUsed, options, isTemplat
       for (const name of normalizedNames) {
         const serializedValue = isTemplateLiteralSupported ? convertToTemplateLiteral(value) : JSON.stringify(value);
         if (options.modules.namedExport) {
-          if (options.modules.useExportsAs) {
+          if (!validIdentifier.test(name) || keywords.has(name)) {
             identifierId += 1;
             const id = `_${identifierId.toString(16)}`;
             localsCode += `var ${id} = ${serializedValue};\n`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "6.11.0",
+  "version": "7.1.0",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
@@ -13,7 +13,7 @@
   },
   "main": "dist/cjs.js",
   "engines": {
-    "node": ">= 12.13.0"
+    "node": ">= 18.12.0"
   },
   "scripts": {
     "start": "npm run build -- -w",
@@ -24,9 +24,9 @@
     "postbuild": "npm run validate:runtime",
     "commitlint": "commitlint --from=master",
     "security": "npm audit --production",
-    "lint:prettier": "prettier --list-different .",
+    "lint:prettier": "prettier --cache --list-different .",
     "lint:js": "eslint --cache .",
-    "lint:spelling": "cspell \"**/*.*\"",
+    "lint:spelling": "cspell --cache --no-must-find-files --quiet \"**/*.*\"",
     "lint": "npm-run-all -l -p \"lint:**\"",
     "fix:js": "npm run lint:js -- --fix",
     "fix:prettier": "npm run lint:prettier -- --write",
@@ -36,7 +36,7 @@
     "test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
     "pretest": "npm run lint",
     "test": "npm run test:coverage",
-    "prepare": "husky install && npm run build",
+    "prepare": "husky && npm run build",
     "release": "standard-version"
   },
   "files": [
@@ -44,7 +44,7 @@
   ],
   "peerDependencies": {
     "@rspack/core": "0.x || 1.x",
-    "webpack": "^5.0.0"
+    "webpack": "^5.27.0"
   },
   "peerDependenciesMeta": {
     "@rspack/core": {
@@ -68,38 +68,37 @@
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.7",
     "@babel/preset-env": "^7.23.7",
-    "@commitlint/cli": "^16.3.0",
-    "@commitlint/config-conventional": "^16.2.4",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^28.1.3",
+    "babel-jest": "^29.7.0",
     "cross-env": "^7.0.3",
-    "cspell": "^6.31.2",
-    "del": "^6.1.1",
-    "del-cli": "^4.0.1",
+    "cspell": "^8.6.1",
+    "del-cli": "^5.1.0",
     "es-check": "^7.1.0",
     "eslint": "^8.54.0",
-    "eslint-config-prettier": "^8.9.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.0",
     "file-loader": "^6.2.0",
-    "husky": "^7.0.1",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "less": "^4.2.0",
-    "less-loader": "^10.0.1",
-    "lint-staged": "^12.5.0",
-    "memfs": "^3.5.3",
+    "less-loader": "^12.2.0",
+    "lint-staged": "^15.2.2",
+    "memfs": "^4.8.1",
     "mini-css-extract-plugin": "^2.7.5",
     "npm-run-all": "^4.1.5",
-    "postcss-loader": "^6.2.1",
-    "postcss-preset-env": "^7.8.3",
-    "prettier": "^2.8.7",
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^9.5.4",
+    "prettier": "^3.2.5",
     "sass": "^1.69.7",
-    "sass-loader": "^12.6.0",
+    "sass-loader": "^14.1.1",
     "standard-version": "^9.5.0",
     "strip-ansi": "^6.0.0",
-    "style-loader": "^3.3.2",
-    "stylus": "^0.59.0",
-    "stylus-loader": "^6.1.0",
+    "style-loader": "^3.3.4",
+    "stylus": "^0.63.0",
+    "stylus-loader": "^8.1.0",
     "url-loader": "^4.1.1",
     "webpack": "^5.89.0"
   },