From abc0b5f807be79934d4c471a3c160b20819e8fb1 Mon Sep 17 00:00:00 2001
From: "alexander.akait" <sheo13666q@gmail.com>
Date: Mon, 8 Apr 2024 19:31:19 +0300
Subject: [PATCH] docs: improve more

---
 README.md | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index a398c6c..bc50ea8 100644
--- a/README.md
+++ b/README.md
@@ -125,7 +125,7 @@ const divElement = document.createElement("div");
 divElement.className = styles["my-class"];
 ```
 
-All locals (class names) stored in imported object.
+All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup `modules` option for `css-loader`. For more information consult with `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).
 
 **webpack.config.js**
 
@@ -138,7 +138,11 @@ module.exports = {
         use: [
           // The `injectType`  option can be avoided because it is default behaviour
           { loader: "style-loader", options: { injectType: "styleTag" } },
-          "css-loader",
+          {
+            loader: "css-loader",
+            // Uncomment it if you want to use CSS modules
+            // options: { modules: true }
+          },
         ],
       },
     ],
@@ -184,7 +188,7 @@ const divElement = document.createElement("div");
 divElement.className = styles["my-class"];
 ```
 
-All locals (class names) stored in imported object.
+All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup `modules` option for `css-loader`. For more information consult with `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).
 
 **webpack.config.js**
 
@@ -199,7 +203,11 @@ module.exports = {
             loader: "style-loader",
             options: { injectType: "singletonStyleTag" },
           },
-          "css-loader",
+          {
+            loader: "css-loader",
+            // Uncomment it if you want to use CSS modules
+            // options: { modules: true }
+          },
         ],
       },
     ],
@@ -253,7 +261,7 @@ const divElement = document.createElement("div");
 divElement.className = myClass;
 ```
 
-All locals (class names) stored in `locals` property of imported object.
+All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup `modules` option for `css-loader`. For more information consult with `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).
 
 **webpack.config.js**
 
@@ -270,7 +278,11 @@ module.exports = {
         test: /\.lazy\.css$/i,
         use: [
           { loader: "style-loader", options: { injectType: "lazyStyleTag" } },
-          "css-loader",
+          {
+            loader: "css-loader",
+            // Uncomment it if you want to use CSS modules
+            // options: { modules: true }
+          },
         ],
       },
     ],
@@ -324,7 +336,7 @@ const divElement = document.createElement("div");
 divElement.className = myClass;
 ```
 
-All locals (class names) stored in `locals` property of imported object.
+All local variables (class names) are exported as named exports. To achieve this behaviour you also have to setup `modules` option for `css-loader`. For more information consult with `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).
 
 **webpack.config.js**
 
@@ -344,7 +356,11 @@ module.exports = {
             loader: "style-loader",
             options: { injectType: "lazySingletonStyleTag" },
           },
-          "css-loader",
+          {
+            loader: "css-loader",
+            // Uncomment it if you want to use CSS modules
+            // options: { modules: true }
+          },
         ],
       },
     ],