feature #1319 Drop support of css-loader ^6, add support for css-load…

…er ^7.1 (Kocal)

This PR was squashed before being merged into the main branch.

Discussion
----------

Drop support of css-loader ^6, add support for css-loader ^7.1

Let's continue to upgrade major dependencies, see https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#700-2024-04-04 for changelog

Commits
-------

ac0fd39 [CSS Modules] Update our React/Preact tests to fit css-loader v7 default options, notify Vue users about the new behaviour and the solution
8286aa1 Drop support of css-loader ^6, add support for css-loader ^7.1

CHANGELOG.md

@@ -91,6 +91,39 @@ pnpm install webpack-dev-server --save-dev
 
 * #1342 Replace [`assets-webpack-plugin`](https://github.com/ztoben/assets-webpack-plugin) dependency by an internal plugin, to generate `entrypoints.json` file (@Kocal)
 
+* #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',

package.json

@@ -29,7 +29,7 @@
   "dependencies": {
     "@nuxt/friendly-errors-webpack-plugin": "^2.5.1",
     "babel-loader": "^9.1.3",
-    "css-loader": "^6.7.0",
+    "css-loader": "^7.1.0",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "fastest-levenshtein": "^1.0.16",
     "mini-css-extract-plugin": "^2.6.0",

test/functional.js

@@ -1645,6 +1645,14 @@ module.exports = {
             config.enableLessLoader();
             config.enableStylusLoader();
             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';
+                }
+
                 // Remove hashes from local ident names
                 // since they are not always the same.
                 if (options.modules) {

yarn.lock

@@ -2716,10 +2716,10 @@ css-declaration-sorter@^7.2.0:
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-7.2.0.tgz#6dec1c9523bc4a643e088aab8f09e67a54961024"
   integrity sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==
 
-css-loader@^6.7.0:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.11.0.tgz#33bae3bf6363d0a7c2cf9031c96c744ff54d85ba"
-  integrity sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==
+css-loader@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-7.1.2.tgz#64671541c6efe06b0e22e750503106bdd86880f8"
+  integrity sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==
   dependencies:
     icss-utils "^5.1.0"
     postcss "^8.4.33"