[CSS Modules] Update our React/Preact tests to fit css-loader v7 default options, notify Vue users about the new behaviour and the solution

Author: Kocal

CHANGELOG.md

@@ -93,6 +93,37 @@ pnpm install webpack-dev-server --save-dev
 
 * #1319 Drop support of css-loader ^6, add support for css-loader ^7.1 (@Kocal)
 
+Since [`css-loader` 7.0.0](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#700-2024-04-04),
+styles imports became named by default.
+It means you should update your code from:
+```js
+import style from "./style.css";
+
+console.log(style.myClass);
+```
+to:
+```js
+import * as style from "./style.css";
+
+console.log(style.myClass);
+```
+
+There is also a possibility to keep the previous behavior by configuring the `css-loader`'s `modules` option:
+```js
+config.configureCssLoader(options => {
+   if (options.modules) {
+       options.modules.namedExport = false;
+       options.modules.exportLocalsConvention = 'as-is';
+   } 
+});
+```
+
+> [!IMPORTANT]  
+> If you use CSS Modules inside `.vue` files,
+> until https://github.com/vuejs/vue-loader/pull/1909 is merged and released, you will need to restore the previous 
+> behavior by configuring Encore with the code above.
+
+
 ## 4.7.0
 
 ### Features

fixtures/preact-css-modules/components/App.jsx

@@ -3,10 +3,10 @@ import './styles.css';
 import './styles.less';
 import './styles.scss';
 import './styles.stylus';
-import stylesCss from './styles.module.css?module';
-import stylesLess from './styles.module.less?module';
-import stylesScss from './styles.module.scss?module';
-import stylesStylus from './styles.module.stylus?module';
+import * as stylesCss from './styles.module.css?module';
+import * as stylesLess from './styles.module.less?module';
+import * as stylesScss from './styles.module.scss?module';
+import * as stylesStylus from './styles.module.stylus?module';
 
 export default function App() {
     return <div className={`red large justified lowercase ${stylesCss.italic} ${stylesLess.underline} ${stylesScss.bold} ${stylesStylus.rtl}`}></div>

fixtures/react-css-modules/components/App.jsx

@@ -2,10 +2,10 @@ import './styles.css';
 import './styles.less';
 import './styles.scss';
 import './styles.stylus';
-import stylesCss from './styles.module.css?module';
-import stylesLess from './styles.module.less?module';
-import stylesScss from './styles.module.scss?module';
-import stylesStylus from './styles.module.stylus?module';
+import * as stylesCss from './styles.module.css?module';
+import * as stylesLess from './styles.module.less?module';
+import * as stylesScss from './styles.module.scss?module';
+import * as stylesStylus from './styles.module.stylus?module';
 
 export default function App() {
     return <div className={`red large justified lowercase ${stylesCss.italic} ${stylesLess.underline} ${stylesScss.bold} ${stylesStylus.rtl}`}></div>

fixtures/vuejs-jsx/components/Hello.jsx

@@ -1,4 +1,4 @@
-import styles from './Hello.css?module';
+import * as styles from './Hello.css?module';
 
 export default {
   name: 'hello',

test/functional.js

@@ -1641,6 +1641,15 @@ module.exports = {
             config.setPublicPath('/build');
             config.addEntry('main', `./vuejs-css-modules/main_v${getVueVersion(config)}`);
             config.enableVueLoader();
+            config.configureCssLoader(options => {
+                // Until https://github.com/vuejs/vue-loader/pull/1909 is merged,
+                // Vue users should configure the css-loader modules
+                // to keep the previous default behavior from css-loader v6
+                if (options.modules) {
+                    options.modules.namedExport = false;
+                    options.modules.exportLocalsConvention = 'as-is';
+                }
+            })
             config.enableSassLoader();
             config.enableLessLoader();
             config.enableStylusLoader();