From 02ae0a28bcf3118773e468f54dab9a219446deee Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Mon, 8 Apr 2024 16:42:58 +0300 Subject: [PATCH] docs: update migration guide --- CHANGELOG.md | 25 +++++++++++++++++++++++++ README.md | 12 ++++++------ 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a2b512ec..672a0734 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,31 @@ import * as style from "./style.css"; console.log(style.myClass); ``` +To restore 6.x behavior, please use: + +```js +module.exports = { + module: { + rules: [ + { + test: /\.css$/i, + loader: "css-loader", + options: { + modules: { + namedExport: false, + exportLocalsConvention: 'as-is', + // + // or, if you prefer camelcase style + // + // exportLocalsConvention: 'camel-case-only' + }, + }, + }, + ], + }, +}; +``` + * The `modules.exportLocalsConvention` has the value `as-is` when the `modules.namedExport` option is `true` and you don't specify a value * Minimum supported webpack version is `5.27.0` * Minimum supported Node.js version is `18.12.0` diff --git a/README.md b/README.md index 2c490431..c9a64df1 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ Then add the plugin to your `webpack` config. For example: **file.js** ```js -import css from "file.css"; +import * as css from "file.css"; ``` **webpack.config.js** @@ -1162,11 +1162,11 @@ Enables/disables ES modules named export for locals. ```js import * as styles from "./styles.css"; +// If using `exportLocalsConvention: "as-is"` (default value): +console.log(styles["foo-baz"], styles.bar); + // If using `exportLocalsConvention: "camel-case-only"`: console.log(styles.fooBaz, styles.bar); - -// If using `exportLocalsConvention: "as-is"`: -console.log(styles["foo-baz"], styles.bar); ``` You can enable a ES module named export using: @@ -2033,8 +2033,8 @@ File treated as `CSS Module`. Using both `CSS Module` functionality as well as SCSS variables directly in JavaScript. ```jsx -import svars from "variables.scss"; -import styles from "Component.module.scss"; +import * as svars from "variables.scss"; +import * as styles from "Component.module.scss"; // Render DOM with CSS modules class name //