Skip to content
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions .eslintignore

This file was deleted.

19 changes: 0 additions & 19 deletions .eslintrc.js

This file was deleted.

2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ module.exports = {
options: {
modules: {
namedExport: false,
exportLocalsConvention: 'as-is',
exportLocalsConvention: "as-is",
//
// or, if you prefer camelcase style
//
Expand Down
44 changes: 21 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
},
},
},
Expand Down Expand Up @@ -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",
},
},
},
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -1349,8 +1347,8 @@ module.exports = {
loader: "css-loader",
options: {
modules: {
exportLocalsConvention: function (name) {
return name.replace(/-/g, "_");
exportLocalsConvention(name) {
return name.replaceAll("-", "_");
},
},
},
Expand All @@ -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(),
),
];
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand All @@ -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)) {
Expand All @@ -1624,7 +1621,7 @@ class CssModulesJsonPlugin {
Object.entries(allExportsJson).map((key) => {
key[0] = path
.relative(compiler.context, key[0])
.replace(/\\/g, "/");
.replaceAll("\\", "/");

return key;
}),
Expand Down Expand Up @@ -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 = {
Expand All @@ -2034,7 +2032,7 @@ module.exports = {
},
],
},
plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
plugins: [devMode ? [] : [new MiniCssExtractPlugin()]].flat(),
};
```

Expand Down Expand Up @@ -2220,8 +2218,8 @@ module.exports = {
options: {
modules: {
namedExport: true,
exportLocalsConvention: function (name) {
return name.replace(/-/g, "_");
exportLocalsConvention(name) {
return name.replaceAll("-", "_");
},
},
},
Expand Down Expand Up @@ -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 svars from "variables.scss";

// Render DOM with CSS modules class name
// <div className={styles.componentClass}>
Expand Down
9 changes: 9 additions & 0 deletions eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { defineConfig } from "eslint/config";
import configs from "eslint-config-webpack/configs.js";

export default defineConfig([
{
extends: [configs["recommended-dirty"]],
ignores: ["*.md", "CHANGELOG.md", "README.md"],
},
]);
Loading
Loading