diff --git a/README.md b/README.md
index 8c44ab03..f2145a06 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,7 @@ pnpm add -D style-loader
It's recommended to combine `style-loader` with the [`css-loader`](https://github.com/webpack-contrib/css-loader)
-Then add the loader to your `webpack` config. For example:
+Then add the loader to your `webpack` configuration. For example:
**style.css**
@@ -100,13 +100,13 @@ type injectType =
Default: `styleTag`
-Allows to setup how styles will be injected into the DOM.
+Allows you to setup how styles will be injected into the DOM.
Possible values:
#### `styleTag`
-Automatically injects styles into the DOM using multiple ``. It is **default** behaviour.
+Automatically injects styles into the DOM using multiple ``. It is the **default** behaviour.
**component.js**
@@ -125,7 +125,7 @@ const divElement = document.createElement("div");
divElement.className = styles["my-class"];
```
-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).
+All local variables (class names) are exported as named exports. To achieve this behaviour you also have to set up the `modules` option for `css-loader`. For more information, consult the `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).
**webpack.config.js**
@@ -167,7 +167,7 @@ The loader inject styles like:
#### `singletonStyleTag`
-Automatically injects styles into the DOM using one ``.
+Automatically injects styles into the DOM using a single `` tag.
> [!WARNING]
>
@@ -188,7 +188,7 @@ const divElement = document.createElement("div");
divElement.className = styles["my-class"];
```
-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).
+All local variables (class names) are exported as named exports. To achieve this behaviour, you also have to set up the `modules` option for `css-loader`. For more information, consult the `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).
**webpack.config.js**
@@ -234,9 +234,11 @@ Works the same as a [`styleTag`](#styleTag), but if the code is executed in IE6-
#### `lazyStyleTag`
-Injects styles into the DOM using multiple `` on demand.
-We recommend following `.lazy.css` naming convention for lazy styles and the `.css` for basic `style-loader` usage (similar to other file types, i.e. `.lazy.less` and `.less`).
-When you `lazyStyleTag` value the `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`.
+Injects styles into the DOM using multiple `` tags on demand.
+
+We recommend following the `.lazy.css` naming convention for lazy styles and `.css` for basic `style-loader` usage (similar to other file types, i.e. `.lazy.less` and `.less`).
+
+When you use the `lazyStyleTag` value, `style-loader` injects the styles lazily, making them useable on-demand via `style.use()` / `style.unuse()`.
> ⚠️ Behavior is undefined when `unuse` is called more often than `use`. Don't do that.
@@ -261,7 +263,7 @@ const divElement = document.createElement("div");
divElement.className = myClass;
```
-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).
+All local variables (class names) are exported as named exports. To achieve this behaviour, you also have to set up the `modules` option for `css-loader`. For more information, consult the `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).
**webpack.config.js**
@@ -307,9 +309,11 @@ The loader inject styles like:
#### `lazySingletonStyleTag`
-Injects styles into the DOM using one `` on demand.
+Injects styles into the DOM using a single `` tag on demand.
+
We recommend following `.lazy.css` naming convention for lazy styles and the `.css` for basic `style-loader` usage (similar to other file types, i.e. `.lazy.less` and `.less`).
-When you `lazySingletonStyleTag` value the `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`.
+
+When you use the `lazySingletonStyleTag` value, `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`.
> ⚠️ Source maps do not work.
@@ -336,7 +340,7 @@ const divElement = document.createElement("div");
divElement.className = myClass;
```
-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).
+All local variables (class names) are exported as named exports. To achieve this behaviour, you also have to set up the `modules` option for `css-loader`. For more information, consult the `css-loader` [`documentation`](https://github.com/webpack-contrib/css-loader).
**webpack.config.js**
@@ -431,7 +435,7 @@ type attributes = HTMLAttributes;
Default: `{}`
-If defined, the `style-loader` will attach given attributes with their values on `` and works faster.
+For `production` builds, it's recommended to extract the CSS from your bundle to enable parallel loading of CSS/JS resources later on.
+This can be achieved by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin), because it creates separate CSS files.
+For `development` mode (including `webpack-dev-server`), you can use `style-loader`, because it injects CSS into the DOM using multiple `` tags and works faster.
> [!WARNING]
>
-> Do not use together `style-loader` and `mini-css-extract-plugin`.
+> Do not use `style-loader` and `mini-css-extract-plugin` together.
**webpack.config.js**
@@ -859,7 +868,7 @@ module.exports = {
> [!WARNING]
>
-> It is not allowed to use JavaScript reserved words in css class names.
+> It is not allowed to use JavaScript reserved words in CSS class names.
> [!WARNING]
>
@@ -897,7 +906,7 @@ import * as styles from "./styles.css";
console.log(styles.fooBaz, styles.bar, styles["my-class"]);
```
-You can enable a ES module named export using:
+You can enable an ES module named export using:
**webpack.config.js**
@@ -928,7 +937,8 @@ module.exports = {
### Source maps
-The loader automatically inject source maps when previous loader emit them.
+The loader automatically injects source maps when the previous loader emits them.
+
Therefore, to generate source maps, set the `sourceMap` option to `true` for the previous loader.
**webpack.config.js**
@@ -955,8 +965,8 @@ If you are using a [Content Security Policy](https://www.w3.org/TR/CSP3/) (CSP),
There are two ways to work with `nonce`:
-- using the `attributes` option
-- using the `__webpack_nonce__` variable
+- Using the `attributes` option
+- Using the `__webpack_nonce__` variable
> [!WARNING]
>
@@ -1155,7 +1165,7 @@ module.exports = {
#### Custom Elements (Shadow DOM)
-You can define custom target for your styles for the `lazyStyleTag` type.
+You can define custom target for your styles when using the `lazyStyleTag` type.
**insert-function.js**
@@ -1197,7 +1207,7 @@ module.exports = {
};
```
-Insert styles to the provided element or to the `head` tag if target isn't provided.
+Insert styles to the provided element, or into the `head` tag if the target isn't provided.
**custom-square.css**
@@ -1248,7 +1258,8 @@ export default CustomSquare;
## Contributing
-Please take a moment to read our contributing guidelines if you haven't yet done so.
+We welcome all contributions!
+If you're new here, please take a moment to review our contributing guidelines before submitting issues or pull requests.
[CONTRIBUTING](./.github/CONTRIBUTING.md)