@@ -732,9 +732,8 @@ module.exports = {
732
732
loader: " css-loader" ,
733
733
options: {
734
734
modules: {
735
- auto : (resourcePath , resourceQuery , resourceFragment ) => {
736
- return resourcePath .endsWith (" .custom-module.css" );
737
- },
735
+ auto : (resourcePath , resourceQuery , resourceFragment ) =>
736
+ resourcePath .endsWith (" .custom-module.css" ),
738
737
},
739
738
},
740
739
},
@@ -1150,9 +1149,8 @@ module.exports = {
1150
1149
loader: " css-loader" ,
1151
1150
options: {
1152
1151
modules: {
1153
- getLocalIdent : (context , localIdentName , localName , options ) => {
1154
- return " whatever_random_class_name" ;
1155
- },
1152
+ getLocalIdent : (context , localIdentName , localName , options ) =>
1153
+ " whatever_random_class_name" ,
1156
1154
},
1157
1155
},
1158
1156
},
@@ -1203,7 +1201,7 @@ console.log(styles["foo-baz"], styles.bar);
1203
1201
console .log (styles .fooBaz , styles .bar );
1204
1202
1205
1203
// For the `default` classname
1206
- console .log (styles[ " _default" ] );
1204
+ console .log (styles . _default );
1207
1205
```
1208
1206
1209
1207
You can enable ES module named export using:
@@ -1349,8 +1347,8 @@ module.exports = {
1349
1347
loader: " css-loader" ,
1350
1348
options: {
1351
1349
modules: {
1352
- exportLocalsConvention : function (name ) {
1353
- return name .replace ( / - / g , " _" );
1350
+ exportLocalsConvention (name ) {
1351
+ return name .replaceAll ( " - " , " _" );
1354
1352
},
1355
1353
},
1356
1354
},
@@ -1371,11 +1369,11 @@ module.exports = {
1371
1369
loader: " css-loader" ,
1372
1370
options: {
1373
1371
modules: {
1374
- exportLocalsConvention : function (name ) {
1372
+ exportLocalsConvention (name ) {
1375
1373
return [
1376
- name .replace ( / - / g , " _" ),
1374
+ name .replaceAll ( " - " , " _" ),
1377
1375
// dashesCamelCase
1378
- name .replace (/ -+ (\w )/ g , (match , firstLetter ) =>
1376
+ name .replaceAll (/ -+ (\w )/ g , (match , firstLetter ) =>
1379
1377
firstLetter .toUpperCase (),
1380
1378
),
1381
1379
];
@@ -1496,8 +1494,8 @@ In the following example, we use `getJSON` to cache canonical mappings and add s
1496
1494
** webpack.config.js**
1497
1495
1498
1496
``` js
1499
- const path = require (" path " );
1500
- const fs = require (" fs " );
1497
+ const fs = require (" node:fs " );
1498
+ const path = require (" node:path " );
1501
1499
1502
1500
const CSS_LOADER_REPLACEMENT_REGEX =
1503
1501
/ (___CSS_LOADER_ICSS_IMPORT_\d + _REPLACEMENT_\d + ___)/ g ;
@@ -1576,9 +1574,9 @@ function replaceReplacements(classNames) {
1576
1574
}
1577
1575
1578
1576
function getJSON ({ resourcePath, imports, exports , replacements }) {
1579
- const exportsJson = exports . reduce (( acc , { name, value }) => {
1580
- return { ... acc, [name] : value };
1581
- }, {} );
1577
+ const exportsJson = Object . fromEntries (
1578
+ exports . map (({ name, value }) => [name, value]),
1579
+ );
1582
1580
1583
1581
if (replacements .length > 0 ) {
1584
1582
// replacements present --> add stand-in values for absolute paths and local names,
@@ -1602,7 +1600,6 @@ class CssModulesJsonPlugin {
1602
1600
this .options = options;
1603
1601
}
1604
1602
1605
- // eslint-disable-next-line class-methods-use-this
1606
1603
apply (compiler ) {
1607
1604
compiler .hooks .emit .tap (" CssModulesJsonPlugin" , () => {
1608
1605
for (const [identifier , classNames ] of Object .entries (replacementsMap)) {
@@ -1624,7 +1621,7 @@ class CssModulesJsonPlugin {
1624
1621
Object .entries (allExportsJson).map ((key ) => {
1625
1622
key[0 ] = path
1626
1623
.relative (compiler .context , key[0 ])
1627
- .replace ( / \\ / g , " /" );
1624
+ .replaceAll ( " \\ " , " /" );
1628
1625
1629
1626
return key;
1630
1627
}),
@@ -2016,6 +2013,7 @@ For `development` mode (including `webpack-dev-server`) you can use [style-loade
2016
2013
2017
2014
``` js
2018
2015
const MiniCssExtractPlugin = require (" mini-css-extract-plugin" );
2016
+
2019
2017
const devMode = process .env .NODE_ENV !== " production" ;
2020
2018
2021
2019
module .exports = {
@@ -2034,7 +2032,7 @@ module.exports = {
2034
2032
},
2035
2033
],
2036
2034
},
2037
- plugins: []. concat ( devMode ? [] : [new MiniCssExtractPlugin ()]),
2035
+ plugins: [devMode ? [] : [new MiniCssExtractPlugin ()]]. flat ( ),
2038
2036
};
2039
2037
```
2040
2038
@@ -2220,8 +2218,8 @@ module.exports = {
2220
2218
options: {
2221
2219
modules: {
2222
2220
namedExport: true ,
2223
- exportLocalsConvention : function (name ) {
2224
- return name .replace ( / - / g , " _" );
2221
+ exportLocalsConvention (name ) {
2222
+ return name .replaceAll ( " - " , " _" );
2225
2223
},
2226
2224
},
2227
2225
},
@@ -2325,8 +2323,8 @@ File treated as `CSS Module`.
2325
2323
Using both ` CSS Module ` functionality as well as SCSS variables directly in JavaScript.
2326
2324
2327
2325
``` jsx
2328
- import * as svars from " variables.scss" ;
2329
2326
import * as styles from " Component.module.scss" ;
2327
+ import * as svars from " variables.scss" ;
2330
2328
2331
2329
// Render DOM with CSS modules class name
2332
2330
// <div className={styles.componentClass}>
0 commit comments