@@ -732,9 +732,8 @@ module.exports = {
732732        loader:  " css-loader" 
733733        options:  {
734734          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" 
738737          },
739738        },
740739      },
@@ -1150,9 +1149,8 @@ module.exports = {
11501149        loader:  " css-loader" 
11511150        options:  {
11521151          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" 
11561154          },
11571155        },
11581156      },
@@ -1203,7 +1201,7 @@ console.log(styles["foo-baz"], styles.bar);
12031201console .log (styles .fooBaz , styles .bar );
12041202
12051203//  For the `default` classname
1206- console .log (styles[ " _default" ] );
1204+ console .log (styles . _default );
12071205``` 
12081206
12091207You can enable ES module named export using:
@@ -1349,8 +1347,8 @@ module.exports = {
13491347        loader:  " css-loader" 
13501348        options:  {
13511349          modules:  {
1352-             exportLocalsConvention :   function   (name ) {
1353-               return  name .replace ( / - / g " _" 
1350+             exportLocalsConvention (name ) {
1351+               return  name .replaceAll ( " - " " _" 
13541352            },
13551353          },
13561354        },
@@ -1371,11 +1369,11 @@ module.exports = {
13711369        loader:  " css-loader" 
13721370        options:  {
13731371          modules:  {
1374-             exportLocalsConvention :   function   (name ) {
1372+             exportLocalsConvention (name ) {
13751373              return  [
1376-                 name .replace ( / - / g " _" 
1374+                 name .replaceAll ( " - " " _" 
13771375                //  dashesCamelCase
1378-                 name .replace (/ -+ (\w )/ gmatch , firstLetter ) => 
1376+                 name .replaceAll (/ -+ (\w )/ gmatch , firstLetter ) => 
13791377                  firstLetter .toUpperCase (),
13801378                ),
13811379              ];
@@ -1496,8 +1494,8 @@ In the following example, we use `getJSON` to cache canonical mappings and add s
14961494** webpack.config.js** 
14971495
14981496``` js 
1499- const  path  =  require (" path " 
1500- const  fs  =  require (" fs " 
1497+ const  fs  =  require (" node:fs " 
1498+ const  path  =  require (" node:path " 
15011499
15021500const  CSS_LOADER_REPLACEMENT_REGEX  = 
15031501  / (___CSS_LOADER_ICSS_IMPORT_\d + _REPLACEMENT_\d + ___)/ g ;
@@ -1576,9 +1574,9 @@ function replaceReplacements(classNames) {
15761574}
15771575
15781576function  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+   );
15821580
15831581  if  (replacements .length  >  0 ) {
15841582    //  replacements present --> add stand-in values for absolute paths and local names,
@@ -1602,7 +1600,6 @@ class CssModulesJsonPlugin {
16021600    this .options  =  options;
16031601  }
16041602
1605-   //  eslint-disable-next-line class-methods-use-this
16061603  apply (compiler ) {
16071604    compiler .hooks .emit .tap (" CssModulesJsonPlugin" =>  {
16081605      for  (const  [identifier , classNames ] of  Object .entries (replacementsMap)) {
@@ -1624,7 +1621,7 @@ class CssModulesJsonPlugin {
16241621            Object .entries (allExportsJson).map ((key ) =>  {
16251622              key[0 ] =  path
16261623                .relative (compiler .context , key[0 ])
1627-                 .replace ( / \\ / g " /" 
1624+                 .replaceAll ( " \\ " " /" 
16281625
16291626              return  key;
16301627            }),
@@ -2016,6 +2013,7 @@ For `development` mode (including `webpack-dev-server`) you can use [style-loade
20162013
20172014``` js 
20182015const  MiniCssExtractPlugin  =  require (" mini-css-extract-plugin" 
2016+ 
20192017const  devMode  =  process .env .NODE_ENV  !==  " production" 
20202018
20212019module .exports  =  {
@@ -2034,7 +2032,7 @@ module.exports = {
20342032      },
20352033    ],
20362034  },
2037-   plugins:  []. concat ( devMode ?  [] :  [new  MiniCssExtractPlugin ()]),
2035+   plugins:  [devMode ?  [] :  [new  MiniCssExtractPlugin ()]]. flat ( ),
20382036};
20392037``` 
20402038
@@ -2220,8 +2218,8 @@ module.exports = {
22202218        options:  {
22212219          modules:  {
22222220            namedExport:  true ,
2223-             exportLocalsConvention :   function   (name ) {
2224-               return  name .replace ( / - / g " _" 
2221+             exportLocalsConvention (name ) {
2222+               return  name .replaceAll ( " - " " _" 
22252223            },
22262224          },
22272225        },
@@ -2325,8 +2323,8 @@ File treated as `CSS Module`.
23252323Using both ` CSS Module `  functionality as well as SCSS variables directly in JavaScript.
23262324
23272325``` jsx 
2328- import  *  as  svars  from  " variables.scss" 
23292326import  *  as  styles  from  " Component.module.scss" 
2327+ import  *  as  svars  from  " variables.scss" 
23302328
23312329//  Render DOM with CSS modules class name
23322330//  <div className={styles.componentClass}>
0 commit comments