From 565362c3007fd5e74f3e994a0bc51fb7d93af41d Mon Sep 17 00:00:00 2001
From: "alexander.akait" <sheo13666q@gmail.com>
Date: Mon, 8 Apr 2024 19:17:34 +0300
Subject: [PATCH] docs: update

---
 README.md | 39 ++++++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 0ddd558..a398c6c 100644
--- a/README.md
+++ b/README.md
@@ -119,7 +119,7 @@ Example with Locals (CSS Modules):
 **component-with-css-modules.js**
 
 ```js
-import styles from "./styles.css";
+import * as styles from "./styles.css";
 
 const divElement = document.createElement("div");
 divElement.className = styles["my-class"];
@@ -178,7 +178,7 @@ import "./styles.css";
 **component-with-css-modules.js**
 
 ```js
-import styles from "./styles.css";
+import * as styles from "./styles.css";
 
 const divElement = document.createElement("div");
 divElement.className = styles["my-class"];
@@ -245,12 +245,12 @@ styles.use();
 **component-with-css-modules.js**
 
 ```js
-import styles from "./styles.lazy.css";
+import styles, { "my-class" as myClass } from "./styles.lazy.css";
 
 styles.use();
 
 const divElement = document.createElement("div");
-divElement.className = styles.locals["my-class"];
+divElement.className = myClass;
 ```
 
 All locals (class names) stored in `locals` property of imported object.
@@ -316,12 +316,12 @@ styles.use();
 **component-with-css-modules.js**
 
 ```js
-import styles from "./styles.lazy.css";
+import styles, { "my-class" as myClass } from "./styles.lazy.css";
 
 styles.use();
 
 const divElement = document.createElement("div");
-divElement.className = styles.locals["my-class"];
+divElement.className = myClass;
 ```
 
 All locals (class names) stored in `locals` property of imported object.
@@ -420,7 +420,7 @@ If defined, the `style-loader` will attach given attributes with their values on
 **component.js**
 
 ```js
-import style from "./file.css";
+import "./file.css";
 ```
 
 **webpack.config.js**
@@ -841,35 +841,44 @@ module.exports = {
 
 ### Named export for CSS Modules
 
-> **Warning**
->
-> Names of locals are converted to `camelCase`.
-
 > **Warning**
 >
 > It is not allowed to use JavaScript reserved words in css class names.
 
 > **Warning**
 >
-> Options `esModule` and `modules.namedExport` in `css-loader` should be enabled.
+> Options `esModule` and `modules.namedExport` in `css-loader` should be enabled (by default for `css-loader@7` it is true).
 
 **styles.css**
 
 ```css
-.foo-baz {
+.fooBaz {
   color: red;
 }
 .bar {
   color: blue;
 }
+.my-class {
+  color: green;
+}
 ```
 
 **index.js**
 
 ```js
-import { fooBaz, bar } from "./styles.css";
+import { fooBaz, bar, "my-class" as myClass } from "./styles.css";
+
+console.log(fooBaz, bar, myClass);
+```
+
+Or:
+
+**index.js**
+
+```js
+import * as styles from "./styles.css";
 
-console.log(fooBaz, bar);
+console.log(styles.fooBaz, styles.bar, styles["my-class"]);
 ```
 
 You can enable a ES module named export using: