From 8286aa1aaca251dec2212ad4ea3c55030a0adaef Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sun, 1 Sep 2024 15:41:48 +0200 Subject: [PATCH 1/2] Drop support of css-loader ^6, add support for css-loader ^7.1 --- CHANGELOG.md | 2 ++ package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 599e418d..87c80236 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -91,6 +91,8 @@ 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) + ## 4.7.0 ### Features diff --git a/package.json b/package.json index 44a052ad..bbdb2c7b 100755 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 0199af52..58121a57 100644 --- a/yarn.lock +++ b/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" From ac0fd391d9cab7b83735a87fe2873e6e3a5281e8 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Fri, 20 Sep 2024 19:56:41 +0200 Subject: [PATCH 2/2] [CSS Modules] Update our React/Preact tests to fit css-loader v7 default options, notify Vue users about the new behaviour and the solution --- CHANGELOG.md | 31 +++++++++++++++++++ .../preact-css-modules/components/App.jsx | 8 ++--- fixtures/react-css-modules/components/App.jsx | 8 ++--- fixtures/vuejs-jsx/components/Hello.jsx | 2 +- test/functional.js | 8 +++++ 5 files changed, 48 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 87c80236..85d25e45 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/fixtures/preact-css-modules/components/App.jsx b/fixtures/preact-css-modules/components/App.jsx index 548efba6..f4fbc892 100644 --- a/fixtures/preact-css-modules/components/App.jsx +++ b/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
diff --git a/fixtures/react-css-modules/components/App.jsx b/fixtures/react-css-modules/components/App.jsx index 070c3ca0..32fe110c 100644 --- a/fixtures/react-css-modules/components/App.jsx +++ b/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
diff --git a/fixtures/vuejs-jsx/components/Hello.jsx b/fixtures/vuejs-jsx/components/Hello.jsx index 10a9bfb1..5dbc0062 100644 --- a/fixtures/vuejs-jsx/components/Hello.jsx +++ b/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', diff --git a/test/functional.js b/test/functional.js index 4aeac54d..ac600457 100644 --- a/test/functional.js +++ b/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) {