docs: update migration guide (#1586)

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`

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**
@@ -1174,11 +1174,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:
@@ -2337,8 +2337,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
 // <div className={styles.componentClass}>