summaryrefslogtreecommitdiff
path: root/node_modules/@csstools/postcss-hwb-function/README.md
diff options
context:
space:
mode:
authorlittleblack111 <littleblack11111@gmail.com>2024-05-14 14:05:49 +0800
committerlittleblack111 <littleblack11111@gmail.com>2024-05-14 14:05:49 +0800
commit06823fbf1c2e763a5bf76c3990ca98fbbcd98691 (patch)
tree4280bece3888d12a022093bf1a9cd1b049393602 /node_modules/@csstools/postcss-hwb-function/README.md
parent1368909b3cd552dbb0d12d5863c597f5be46177d (diff)
updated node_modules
Diffstat (limited to 'node_modules/@csstools/postcss-hwb-function/README.md')
-rw-r--r--node_modules/@csstools/postcss-hwb-function/README.md54
1 files changed, 33 insertions, 21 deletions
diff --git a/node_modules/@csstools/postcss-hwb-function/README.md b/node_modules/@csstools/postcss-hwb-function/README.md
index 3f068a4c..6fde9eba 100644
--- a/node_modules/@csstools/postcss-hwb-function/README.md
+++ b/node_modules/@csstools/postcss-hwb-function/README.md
@@ -1,26 +1,30 @@
-# PostCSS HWB Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
+# PostCSS HWB Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
-[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-hwb-function.svg" height="20">][npm-url]
-[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
-[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
-<br><br>
-[<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/hwb-function.svg" height="20">][css-url]
-[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/hwb-function.svg" height="20">][css-url]
+[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-hwb-function.svg" height="20">][npm-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]<br><br>[<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/hwb-function.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/hwb-function.svg" height="20">][css-url]
-[PostCSS HWB Function] lets you use `hwb` color functions in
-CSS, following the [CSS Color] specification.
+```bash
+npm install @csstools/postcss-hwb-function --save-dev
+```
+
+[PostCSS HWB Function] lets you use the `hwb()` color function in CSS, following [CSS Color Module 4].
```pcss
a {
color: hwb(194 0% 0%);
+}
+
+b {
color: hwb(194 0% 0% / .5);
}
/* becomes */
a {
- color: rgb(0, 195, 255);
- color: rgba(0, 195, 255, .5);
+ color: rgb(0, 196, 255);
+}
+
+b {
+ color: rgba(0, 196, 255, 0.5);
}
```
@@ -39,21 +43,26 @@ const postcss = require('postcss');
const postcssHWBFunction = require('@csstools/postcss-hwb-function');
postcss([
- postcssHWBFunction(/* pluginOptions */)
+ postcssHWBFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```
[PostCSS HWB Function] runs in all Node environments, with special
instructions for:
-| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
-| --- | --- | --- | --- | --- |
+- [Node](INSTALL.md#node)
+- [PostCSS CLI](INSTALL.md#postcss-cli)
+- [PostCSS Load Config](INSTALL.md#postcss-load-config)
+- [Webpack](INSTALL.md#webpack)
+- [Next.js](INSTALL.md#nextjs)
+- [Gulp](INSTALL.md#gulp)
+- [Grunt](INSTALL.md#grunt)
## Options
### preserve
-The `preserve` option determines whether the original functional color notation
+The `preserve` option determines whether the original notation
is preserved. By default, it is not preserved.
```js
@@ -63,15 +72,21 @@ postcssHWBFunction({ preserve: true })
```pcss
a {
color: hwb(194 0% 0%);
+}
+
+b {
color: hwb(194 0% 0% / .5);
}
/* becomes */
a {
- color: rgb(0, 195, 255);
+ color: rgb(0, 196, 255);
color: hwb(194 0% 0%);
- color: rgba(0, 195, 255, .5);
+}
+
+b {
+ color: rgba(0, 196, 255, 0.5);
color: hwb(194 0% 0% / .5);
}
```
@@ -81,9 +96,6 @@ a {
[discord]: https://discord.gg/bUadyRwkJS
[npm-url]: https://www.npmjs.com/package/@csstools/postcss-hwb-function
-[CSS Color]: https://drafts.csswg.org/css-color/#the-hwb-notation
-[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
-[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
[PostCSS]: https://github.com/postcss/postcss
-[PostCSS Loader]: https://github.com/postcss/postcss-loader
[PostCSS HWB Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function
+[CSS Color Module 4]: https://www.w3.org/TR/css-color-4/#the-hwb-notation