csstools · romainmenke · Sep 12, 2023 · Sep 12, 2023
diff --git a/.github/bin/generate-docs/readme.mjs b/.github/bin/generate-docs/readme.mjs
@@ -50,7 +50,12 @@ readmeDoc = readmeDoc.replace('<header>', `# <humanReadableName> [<img src="http
 		''
 }` +
 '[<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]');
+	'[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]' +
+`\n
+\`\`\`bash
+npm install <packageName> --save-dev
+\`\`\``
+);
 
 // Insert "Usage" section
 readmeDoc = readmeDoc.replace('<usage>', `## Usage

diff --git a/experimental/postcss-gradient-stop-increments/README.md b/experimental/postcss-gradient-stop-increments/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-gradient-stop-increments-experimental.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]
 
+```bash
+npm install @csstools/postcss-gradient-stop-increments-experimental --save-dev
+```
+
 [PostCSS Gradient Stop Increments] lets you increment gradient stops following the [CSSWG 8616 proposal].
 
 ```pcss

diff --git a/plugin-packs/postcss-bundler/README.md b/plugin-packs/postcss-bundler/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-bundler.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]
 
+```bash
+npm install @csstools/postcss-bundler --save-dev
+```
+
 [PostCSS Bundler] bundles your CSS.
 
 This plugin pack contains :

diff --git a/plugins/css-blank-pseudo/README.md b/plugins/css-blank-pseudo/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/css-blank-pseudo.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/blank-pseudo-class.svg" height="20">][css-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]
 
+```bash
+npm install css-blank-pseudo --save-dev
+```
+
 [PostCSS Blank Pseudo] lets you style form elements when they are empty, following 
 the [Selectors Level 4] specification.
 

diff --git a/plugins/css-has-pseudo/README.md b/plugins/css-has-pseudo/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/css-has-pseudo.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/has-pseudo-class.svg" height="20">][css-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]
 
+```bash
+npm install css-has-pseudo --save-dev
+```
+
 [PostCSS Has Pseudo] lets you style elements relative to other elements in CSS, following the [Selectors Level 4] specification.
 
 To use this feature you need to do two things :

diff --git a/plugins/css-prefers-color-scheme/README.md b/plugins/css-prefers-color-scheme/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/css-prefers-color-scheme.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/prefers-color-scheme-query.svg" height="20">][css-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]
 
+```bash
+npm install css-prefers-color-scheme --save-dev
+```
+
 [Prefers Color Scheme] lets you use light and dark color schemes in all browsers, following the [Media Queries] specification.
 
 To use this feature you need to do two things :

diff --git a/plugins/postcss-attribute-case-insensitive/README.md b/plugins/postcss-attribute-case-insensitive/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/postcss-attribute-case-insensitive.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/case-insensitive-attributes.svg" height="20">][css-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]
 
+```bash
+npm install postcss-attribute-case-insensitive --save-dev
+```
+
 [PostCSS Attribute Case Insensitive] enables support for [Case Insensitive Attribute] matching in selectors.
 
 ```pcss

diff --git a/plugins/postcss-base-plugin/README.md b/plugins/postcss-base-plugin/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-base-plugin.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/TODO.svg" height="20">][css-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]
 
+```bash
+npm install @csstools/postcss-base-plugin --save-dev
+```
+
 [PostCSS Base Plugin] lets you easily create new plugins following some [CSS Specification].
 
 ```pcss

diff --git a/plugins/postcss-cascade-layers/README.md b/plugins/postcss-cascade-layers/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-cascade-layers.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/cascade-layers.svg" height="20">][css-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]
 
+```bash
+npm install @csstools/postcss-cascade-layers --save-dev
+```
+
 [PostCSS Cascade Layers] lets you use `@layer` following the [Cascade Layers Specification]. For more information on layers, checkout [A Complete Guide to CSS Cascade Layers] by Miriam Suzanne.
 
 ```pcss

diff --git a/plugins/postcss-color-function/README.md b/plugins/postcss-color-function/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-color-function.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/color-function.svg" height="20">][css-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]
 
+```bash
+npm install @csstools/postcss-color-function --save-dev
+```
+
 [PostCSS Color Function] lets you use the `color` function in
 CSS, following the [CSS Color] specification.
 

diff --git a/plugins/postcss-color-hex-alpha/README.md b/plugins/postcss-color-hex-alpha/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/postcss-color-hex-alpha.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/hexadecimal-alpha-notation.svg" height="20">][css-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]
 
+```bash
+npm install postcss-color-hex-alpha --save-dev
+```
+
 [PostCSS Color Hex Alpha] lets you use 4 & 8 character hex color notation in
 CSS, following the [CSS Color Module] specification.
 

diff --git a/plugins/postcss-color-mix-function/README.md b/plugins/postcss-color-mix-function/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-color-mix-function.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/color-mix.svg" height="20">][css-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]
 
+```bash
+npm install @csstools/postcss-color-mix-function --save-dev
+```
+
 [PostCSS Color Mix Function] lets you use the `color-mix()` function following the [CSS Color 5 Specification].
 
 ```pcss

diff --git a/plugins/postcss-color-rebeccapurple/README.md b/plugins/postcss-color-rebeccapurple/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/postcss-color-rebeccapurple.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/rebeccapurple-color.svg" height="20">][css-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]
 
+```bash
+npm install postcss-color-rebeccapurple --save-dev
+```
+
 [PostCSS RebeccaPurple] lets you use the `rebeccapurple` color keyword in CSS.
 
 ```pcss

diff --git a/plugins/postcss-conditional-values/README.md b/plugins/postcss-conditional-values/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-conditional-values.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]
 
+```bash
+npm install @csstools/postcss-conditional-values --save-dev
+```
+
 [PostCSS Conditional Values] lets you easily apply space toggle hacks with some syntactic sugar.
 
 This plugin adds a non-standard function : `csstools-if( else )` which acts as a ternary operator.

diff --git a/plugins/postcss-custom-media/README.md b/plugins/postcss-custom-media/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/postcss-custom-media.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/custom-media-queries.svg" height="20">][css-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]
 
+```bash
+npm install postcss-custom-media --save-dev
+```
+
 [PostCSS Custom Media] lets you define `@custom-media` in CSS following the [Custom Media Specification].
 
 ```pcss

diff --git a/plugins/postcss-custom-properties/README.md b/plugins/postcss-custom-properties/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/postcss-custom-properties.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/custom-properties.svg" height="20">][css-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]
 
+```bash
+npm install postcss-custom-properties --save-dev
+```
+
 [PostCSS Custom Properties] lets you use Custom Properties in CSS, following
 the [CSS Custom Properties] specification.
 

diff --git a/plugins/postcss-custom-selectors/README.md b/plugins/postcss-custom-selectors/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/postcss-custom-selectors.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/custom-selectors.svg" height="20">][css-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]
 
+```bash
+npm install postcss-custom-selectors --save-dev
+```
+
 [PostCSS Custom Selectors] lets you define `@custom-selector` in CSS following the [Custom Selectors Specification].
 
 ```pcss

diff --git a/plugins/postcss-debug-logger/README.md b/plugins/postcss-debug-logger/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-debug-logger.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]
 
+```bash
+npm install @csstools/postcss-debug-logger --save-dev
+```
+
 [PostCSS Debug Logger] logs the AST nodes PostCSS is processing.
 
 This is mainly useful to track down infinite loops in PostCSS plugins.

diff --git a/plugins/postcss-design-tokens/README.md b/plugins/postcss-design-tokens/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-design-tokens.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]
 
+```bash
+npm install @csstools/postcss-design-tokens --save-dev
+```
+
 [PostCSS Design Tokens] lets you use design tokens in your CSS source files.
 
 ```json

diff --git a/plugins/postcss-dir-pseudo-class/README.md b/plugins/postcss-dir-pseudo-class/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/postcss-dir-pseudo-class.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/dir-pseudo-class.svg" height="20">][css-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]
 
+```bash
+npm install postcss-dir-pseudo-class --save-dev
+```
+
 [PostCSS Dir Pseudo Class] lets you style by directionality using the `:dir()`
 pseudo-class in CSS, following the [Selectors] specification.
 

diff --git a/plugins/postcss-exponential-functions/README.md b/plugins/postcss-exponential-functions/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-exponential-functions.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/exponential-functions.svg" height="20">][css-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]
 
+```bash
+npm install @csstools/postcss-exponential-functions --save-dev
+```
+
 [PostCSS Exponential Functions] lets you use the `pow()`, `sqrt()`, `hypot()`, `log()`, `exp()` functions following the [CSS Values 4 Specification].
 
 ```pcss

diff --git a/plugins/postcss-extract/README.md b/plugins/postcss-extract/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-extract.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]
 
+```bash
+npm install @csstools/postcss-extract --save-dev
+```
+
 [PostCSS Extract] lets you easily export parts of your CSS source files to JavaScript objects.
 
 your query :

diff --git a/plugins/postcss-focus-visible/README.md b/plugins/postcss-focus-visible/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/postcss-focus-visible.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/focus-visible-pseudo-class.svg" height="20">][css-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]
 
+```bash
+npm install postcss-focus-visible --save-dev
+```
+
 [PostCSS Focus Visible] lets you use the `:focus-visible` pseudo-class in CSS, 
 following the [Selectors Level 4 specification].
 

diff --git a/plugins/postcss-focus-within/README.md b/plugins/postcss-focus-within/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/postcss-focus-within.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/focus-within-pseudo-class.svg" height="20">][css-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]
 
+```bash
+npm install postcss-focus-within --save-dev
+```
+
 [PostCSS Focus Within] lets you use the `:focus-within` pseudo-class in CSS, 
 following the [Selectors Level 4 specification].
 

diff --git a/plugins/postcss-gap-properties/README.md b/plugins/postcss-gap-properties/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/postcss-gap-properties.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/gap-properties.svg" height="20">][css-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]
 
+```bash
+npm install postcss-gap-properties --save-dev
+```
+
 [PostCSS Gap Properties] lets you use the `gap`, `column-gap`, and `row-gap`
 shorthand properties in CSS, following the [CSS Grid Layout] specification.
 

diff --git a/plugins/postcss-global-data/README.md b/plugins/postcss-global-data/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-global-data.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]
 
+```bash
+npm install @csstools/postcss-global-data --save-dev
+```
+
 [PostCSS Global Data] lets you inject CSS that is removed again before the final output. This is useful for  plugins that use global CSS as data.
 
 For example, in the case of CSS Modules with [PostCSS Custom Media](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media), rules are usually not imported by every single file, so PostCSS Custom Media cannot generate fallbacks.

diff --git a/plugins/postcss-gradients-interpolation-method/README.md b/plugins/postcss-gradients-interpolation-method/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-gradients-interpolation-method.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/gradients-interpolation-method.svg" height="20">][css-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]
 
+```bash
+npm install @csstools/postcss-gradients-interpolation-method --save-dev
+```
+
 [PostCSS Gradients Interpolation Method] lets you use different interpolation methods in CSS gradient functions following [CSS Images Module 4].
 
 ```pcss

diff --git a/plugins/postcss-logical-float-and-clear/README.md b/plugins/postcss-logical-float-and-clear/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-logical-float-and-clear.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/float-clear-logical-values.svg" height="20">][css-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]
 
+```bash
+npm install @csstools/postcss-logical-float-and-clear --save-dev
+```
+
 [PostCSS Logical Float And Clear] lets you use logical, rather than physical, direction and dimension mappings in CSS, following the [CSS Logical Properties and Values] specification.
 
 ```pcss

diff --git a/plugins/postcss-logical-resize/README.md b/plugins/postcss-logical-resize/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-logical-resize.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/logical-resize.svg" height="20">][css-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]
 
+```bash
+npm install @csstools/postcss-logical-resize --save-dev
+```
+
 [PostCSS Logical Resize] lets you use logical, rather than physical, values for `resize`, following the [CSS Logical Properties and Values] specification.
 
 ```pcss

diff --git a/plugins/postcss-logical-viewport-units/README.md b/plugins/postcss-logical-viewport-units/README.md
@@ -2,6 +2,10 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-logical-viewport-units.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/logical-viewport-units.svg" height="20">][css-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]
 
+```bash
+npm install @csstools/postcss-logical-viewport-units --save-dev
+```
+
 [PostCSS Logical Viewport Units] lets you easily use `vb` and `vi` length units following the [CSS-Values-4 Specification].
 
 ```pcss
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,10 @@ @@
     [<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-gradient-stop-increments-experimental.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]
+    ```bash
+    npm install @csstools/postcss-gradient-stop-increments-experimental --save-dev
+    ```
     [PostCSS Gradient Stop Increments] lets you increment gradient stops following the [CSSWG 8616 proposal].
     ```pcss
@@ Expand Down @@