chore: update ESlint from v8 to v9

.github/workflows/nodejs.yml

@@ -43,7 +43,7 @@ jobs:
           cache: "npm"
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
 
       - name: Lint
         run: npm run lint
@@ -84,7 +84,7 @@ jobs:
           cache: "npm"
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
 
       - name: Install webpack ${{ matrix.webpack-version }}
         if: matrix.webpack-version != 'latest'

CHANGELOG.md

@@ -60,7 +60,7 @@ module.exports = {
         options: {
           modules: {
             namedExport: false,
-            exportLocalsConvention: 'as-is',
+            exportLocalsConvention: "as-is",
             //
             // or, if you prefer camelcase style
             //
@@ -78,17 +78,18 @@ Typescript migration:
 Before:
 
 ```ts
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
+declare module "*.module.css" {
+  const classes: Record<string, string>;
+
   export default classes;
 }
 ```
 
 After:
 
 ```ts
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
+declare module "*.module.css" {
+  const classes: Record<string, string>;
   export = classes;
 }
 ```

README.md

@@ -439,7 +439,7 @@ Output (example):
 > Identifiers are exported
 
 ```js
-exports.locals = {
+module.exports.locals = {
   className: "_23_aKvs-b8bW2Vg3fwHozO",
   subClass: "_13LGdX8RMStbBE9w-t0gZ1",
 };
@@ -468,7 +468,7 @@ When declaring a local class name, you can compose it from one or more other loc
 This does not alter the final CSS output, but the generated `subClass` will include both class names in its export.
 
 ```js
-exports.locals = {
+module.exports.locals = {
   className: "_23_aKvs-b8bW2Vg3fwHozO",
   subClass: "_13LGdX8RMStbBE9w-t0gZ1 _23_aKvs-b8bW2Vg3fwHozO",
 };
@@ -732,9 +732,8 @@ module.exports = {
         loader: "css-loader",
         options: {
           modules: {
-            auto: (resourcePath, resourceQuery, resourceFragment) => {
-              return resourcePath.endsWith(".custom-module.css");
-            },
+            auto: (resourcePath, resourceQuery, resourceFragment) =>
+              resourcePath.endsWith(".custom-module.css"),
           },
         },
       },
@@ -1150,9 +1149,8 @@ module.exports = {
         loader: "css-loader",
         options: {
           modules: {
-            getLocalIdent: (context, localIdentName, localName, options) => {
-              return "whatever_random_class_name";
-            },
+            getLocalIdent: (context, localIdentName, localName, options) =>
+              "whatever_random_class_name",
           },
         },
       },
@@ -1203,7 +1201,7 @@ console.log(styles["foo-baz"], styles.bar);
 console.log(styles.fooBaz, styles.bar);
 
 // For the `default` classname
-console.log(styles["_default"]);
+console.log(styles._default);
 ```
 
 You can enable ES module named export using:
@@ -1349,8 +1347,8 @@ module.exports = {
         loader: "css-loader",
         options: {
           modules: {
-            exportLocalsConvention: function (name) {
-              return name.replace(/-/g, "_");
+            exportLocalsConvention(name) {
+              return name.replaceAll("-", "_");
             },
           },
         },
@@ -1371,11 +1369,11 @@ module.exports = {
         loader: "css-loader",
         options: {
           modules: {
-            exportLocalsConvention: function (name) {
+            exportLocalsConvention(name) {
               return [
-                name.replace(/-/g, "_"),
+                name.replaceAll("-", "_"),
                 // dashesCamelCase
-                name.replace(/-+(\w)/g, (match, firstLetter) =>
+                name.replaceAll(/-+(\w)/g, (match, firstLetter) =>
                   firstLetter.toUpperCase(),
                 ),
               ];
@@ -1496,8 +1494,8 @@ In the following example, we use `getJSON` to cache canonical mappings and add s
 **webpack.config.js**
 
 ```js
-const path = require("path");
-const fs = require("fs");
+const fs = require("node:fs");
+const path = require("node:path");
 
 const CSS_LOADER_REPLACEMENT_REGEX =
   /(___CSS_LOADER_ICSS_IMPORT_\d+_REPLACEMENT_\d+___)/g;
@@ -1549,7 +1547,7 @@ function addReplacements(resourcePath, imports, exportsJson, replacements) {
       // canonical values map and all exports JSON verbatim
       canonicalValuesMap[identifier] = classNames;
 
-      allExportsJson[resourcePath] = allExportsJson[resourcePath] || {};
+      allExportsJson[resourcePath] ||= {};
       allExportsJson[resourcePath][localName] = classNames;
     }
   }
@@ -1576,9 +1574,9 @@ function replaceReplacements(classNames) {
 }
 
 function getJSON({ resourcePath, imports, exports, replacements }) {
-  const exportsJson = exports.reduce((acc, { name, value }) => {
-    return { ...acc, [name]: value };
-  }, {});
+  const exportsJson = Object.fromEntries(
+    exports.map(({ name, value }) => [name, value]),
+  );
 
   if (replacements.length > 0) {
     // replacements present --> add stand-in values for absolute paths and local names,
@@ -1602,7 +1600,6 @@ class CssModulesJsonPlugin {
     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)) {
@@ -1612,7 +1609,7 @@ class CssModulesJsonPlugin {
 
         const [, resourcePath, localName] = identifier.match(IDENTIFIER_REGEX);
 
-        allExportsJson[resourcePath] = allExportsJson[resourcePath] || {};
+        allExportsJson[resourcePath] ||= {};
         allExportsJson[resourcePath][localName] = adjustedClassNames;
       }
 
@@ -1624,7 +1621,7 @@ class CssModulesJsonPlugin {
             Object.entries(allExportsJson).map((key) => {
               key[0] = path
                 .relative(compiler.context, key[0])
-                .replace(/\\/g, "/");
+                .replaceAll("\\", "/");
 
               return key;
             }),
@@ -2016,6 +2013,7 @@ For `development` mode (including `webpack-dev-server`) you can use [style-loade
 
 ```js
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
 const devMode = process.env.NODE_ENV !== "production";
 
 module.exports = {
@@ -2034,7 +2032,7 @@ module.exports = {
       },
     ],
   },
-  plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
+  plugins: [devMode ? [] : [new MiniCssExtractPlugin()]].flat(),
 };
 ```
 
@@ -2220,8 +2218,8 @@ module.exports = {
         options: {
           modules: {
             namedExport: true,
-            exportLocalsConvention: function (name) {
-              return name.replace(/-/g, "_");
+            exportLocalsConvention(name) {
+              return name.replaceAll("-", "_");
             },
           },
         },
@@ -2325,8 +2323,8 @@ File treated as `CSS Module`.
 Using both `CSS Module` functionality as well as SCSS variables directly in JavaScript.
 
 ```jsx
-import * as svars from "variables.scss";
-import * as styles from "Component.module.scss";
+import * as _styles from "./Component.module.scss";
+import * as _svars from "./variables.scss";
 
 // Render DOM with CSS modules class name
 // <div className={styles.componentClass}>
@@ -2335,7 +2333,7 @@ import * as styles from "Component.module.scss";
 
 // Somewhere in JavaScript canvas drawing code use the variable directly
 // const ctx = mountsCanvas.current.getContext('2d',{alpha: false});
-ctx.fillStyle = `${svars.colorBackgroundCanvas}`;
+// ctx.fillStyle = `${svars.colorBackgroundCanvas}`;
 ```
 
 ## Contributing

eslint.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from "eslint/config";
+import configs from "eslint-config-webpack/configs.js";
+
+export default defineConfig([
+  {
+    extends: [configs["recommended-dirty"]],
+  },
+]);

jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   testEnvironment: "node",
+  testPathIgnorePatterns: ["/node_modules/", "/test/runtime/"],
 };