Skip to content

Commit 89a0e4e

Browse files
authored
docs: update note in README.md (webpack-contrib#1456)
1 parent 8f5cbf8 commit 89a0e4e

File tree

1 file changed

+43
-13
lines changed

1 file changed

+43
-13
lines changed

README.md

+43-13
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ The `css-loader` interprets `@import` and `url()` like `import/require()` and wi
2020

2121
## Getting Started
2222

23-
> ⚠ To use css-loader, webpack@5 is required
23+
> **Warning**
24+
>
25+
> To use css-loader, webpack@5 is required
2426
2527
To begin, you'll need to install `css-loader`:
2628

@@ -402,7 +404,9 @@ The loader replaces local selectors with unique identifiers. The chosen unique i
402404
}
403405
```
404406

405-
> ℹ️ Identifiers are exported
407+
> **Note**
408+
>
409+
> Identifiers are exported
406410
407411
```js
408412
exports.locals = {
@@ -455,7 +459,9 @@ exports.locals = {
455459

456460
To import a local classname from another module.
457461

458-
> i We strongly recommend that you specify the extension when importing a file, since it is possible to import a file with any extension and it is not known in advance which file to use.
462+
> **Note**
463+
>
464+
> We strongly recommend that you specify the extension when importing a file, since it is possible to import a file with any extension and it is not known in advance which file to use.
459465
460466
```css
461467
:local(.continueButton) {
@@ -1103,9 +1109,13 @@ Default: `false`
11031109

11041110
Enables/disables ES modules named export for locals.
11051111

1106-
> ⚠ Names of locals are converted to camelcase, i.e. the `exportLocalsConvention` option has `camelCaseOnly` value by default.
1112+
> **Warning**
1113+
>
1114+
> Names of locals are converted to camelcase, i.e. the `exportLocalsConvention` option has `camelCaseOnly` value by default.
11071115

1108-
> ⚠ It is not allowed to use JavaScript reserved words in css class names.
1116+
> **Warning**
1117+
>
1118+
> It is not allowed to use JavaScript reserved words in css class names.
11091119

11101120
**styles.css**
11111121

@@ -1206,7 +1216,9 @@ Style of exported class names.
12061216

12071217
By default, the exported JSON keys mirror the class names (i.e `asIs` value).
12081218

1209-
> ⚠ Only `camelCaseOnly` value allowed if you set the `namedExport` value to `true`.
1219+
> **Warning**
1220+
>
1221+
> Only `camelCaseOnly` value allowed if you set the `namedExport` value to `true`.
12101222

12111223
| Name | Type | Description |
12121224
| :-------------------: | :------: | :----------------------------------------------------------------------------------------------- |
@@ -1512,8 +1524,13 @@ import "./styles.css";
15121524
15131525
#### `'string'`
15141526
1515-
> ⚠ You don't need [`style-loader`](https://github.com/webpack-contrib/style-loader) anymore, please remove it.
1516-
> ⚠ The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
1527+
> **Warning**
1528+
>
1529+
> You don't need [`style-loader`](https://github.com/webpack-contrib/style-loader) anymore, please remove it.
1530+
1531+
> **Warning**
1532+
>
1533+
> The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
15171534
15181535
The default export is `string`.
15191536
@@ -1542,10 +1559,21 @@ console.log(sheet);
15421559
15431560
#### `'css-style-sheet'`
15441561
1545-
> ⚠ `@import` rules not yet allowed, more [information](https://web.dev/css-module-scripts/#@import-rules-not-yet-allowed)
1546-
> ⚠ You don't need [`style-loader`](https://github.com/webpack-contrib/style-loader) anymore, please remove it.
1547-
> ⚠ The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
1548-
> ⚠ Source maps are not currently supported in `Chrome` due [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1174094&q=CSSStyleSheet%20source%20maps&can=2)
1562+
> **Warning**
1563+
>
1564+
> `@import` rules not yet allowed, more [information](https://web.dev/css-module-scripts/#@import-rules-not-yet-allowed)
1565+
1566+
> **Warning**
1567+
>
1568+
> You don't need [`style-loader`](https://github.com/webpack-contrib/style-loader) anymore, please remove it.
1569+
1570+
> **Warning**
1571+
>
1572+
> The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
1573+
1574+
> **Warning**
1575+
>
1576+
> Source maps are not currently supported in `Chrome` due [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1174094&q=CSSStyleSheet%20source%20maps&can=2)
15491577
15501578
The default export is a [constructable stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) (i.e. [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet)).
15511579
@@ -1654,7 +1682,9 @@ For `production` builds it's recommended to extract the CSS from your bundle bei
16541682
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.
16551683
For `development` mode (including `webpack-dev-server`) you can use [style-loader](https://github.com/webpack-contrib/style-loader), because it injects CSS into the DOM using multiple <style></style> and works faster.
16561684
1657-
> i Do not use `style-loader` and `mini-css-extract-plugin` together.
1685+
> **Note**
1686+
>
1687+
> Do not use `style-loader` and `mini-css-extract-plugin` together.
16581688
16591689
**webpack.config.js**
16601690

0 commit comments

Comments
 (0)