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)