Skip to content

Commit 388f585

Browse files
authored
improve docs (#1118)
1 parent fdb4436 commit 388f585

File tree

48 files changed

+194
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+194
-1
lines changed

.github/bin/generate-docs/readme.mjs

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,12 @@ readmeDoc = readmeDoc.replace('<header>', `# <humanReadableName> [<img src="http
5050
''
5151
}` +
5252
'[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] ' +
53-
'[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]');
53+
'[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]' +
54+
`\n
55+
\`\`\`bash
56+
npm install <packageName> --save-dev
57+
\`\`\``
58+
);
5459

5560
// Insert "Usage" section
5661
readmeDoc = readmeDoc.replace('<usage>', `## Usage

experimental/postcss-gradient-stop-increments/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-gradient-stop-increments-experimental --save-dev
7+
```
8+
59
[PostCSS Gradient Stop Increments] lets you increment gradient stops following the [CSSWG 8616 proposal].
610

711
```pcss

plugin-packs/postcss-bundler/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-bundler --save-dev
7+
```
8+
59
[PostCSS Bundler] bundles your CSS.
610

711
This plugin pack contains :

plugins/css-blank-pseudo/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install css-blank-pseudo --save-dev
7+
```
8+
59
[PostCSS Blank Pseudo] lets you style form elements when they are empty, following
610
the [Selectors Level 4] specification.
711

plugins/css-has-pseudo/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install css-has-pseudo --save-dev
7+
```
8+
59
[PostCSS Has Pseudo] lets you style elements relative to other elements in CSS, following the [Selectors Level 4] specification.
610

711
To use this feature you need to do two things :

plugins/css-prefers-color-scheme/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install css-prefers-color-scheme --save-dev
7+
```
8+
59
[Prefers Color Scheme] lets you use light and dark color schemes in all browsers, following the [Media Queries] specification.
610

711
To use this feature you need to do two things :

plugins/postcss-attribute-case-insensitive/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install postcss-attribute-case-insensitive --save-dev
7+
```
8+
59
[PostCSS Attribute Case Insensitive] enables support for [Case Insensitive Attribute] matching in selectors.
610

711
```pcss

plugins/postcss-base-plugin/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-base-plugin --save-dev
7+
```
8+
59
[PostCSS Base Plugin] lets you easily create new plugins following some [CSS Specification].
610

711
```pcss

plugins/postcss-cascade-layers/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-cascade-layers --save-dev
7+
```
8+
59
[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.
610

711
```pcss

plugins/postcss-color-function/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-color-function --save-dev
7+
```
8+
59
[PostCSS Color Function] lets you use the `color` function in
610
CSS, following the [CSS Color] specification.
711

plugins/postcss-color-hex-alpha/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install postcss-color-hex-alpha --save-dev
7+
```
8+
59
[PostCSS Color Hex Alpha] lets you use 4 & 8 character hex color notation in
610
CSS, following the [CSS Color Module] specification.
711

plugins/postcss-color-mix-function/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-color-mix-function --save-dev
7+
```
8+
59
[PostCSS Color Mix Function] lets you use the `color-mix()` function following the [CSS Color 5 Specification].
610

711
```pcss

plugins/postcss-color-rebeccapurple/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install postcss-color-rebeccapurple --save-dev
7+
```
8+
59
[PostCSS RebeccaPurple] lets you use the `rebeccapurple` color keyword in CSS.
610

711
```pcss

plugins/postcss-conditional-values/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-conditional-values --save-dev
7+
```
8+
59
[PostCSS Conditional Values] lets you easily apply space toggle hacks with some syntactic sugar.
610

711
This plugin adds a non-standard function : `csstools-if( else )` which acts as a ternary operator.

plugins/postcss-custom-media/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install postcss-custom-media --save-dev
7+
```
8+
59
[PostCSS Custom Media] lets you define `@custom-media` in CSS following the [Custom Media Specification].
610

711
```pcss

plugins/postcss-custom-properties/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install postcss-custom-properties --save-dev
7+
```
8+
59
[PostCSS Custom Properties] lets you use Custom Properties in CSS, following
610
the [CSS Custom Properties] specification.
711

plugins/postcss-custom-selectors/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install postcss-custom-selectors --save-dev
7+
```
8+
59
[PostCSS Custom Selectors] lets you define `@custom-selector` in CSS following the [Custom Selectors Specification].
610

711
```pcss

plugins/postcss-debug-logger/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-debug-logger --save-dev
7+
```
8+
59
[PostCSS Debug Logger] logs the AST nodes PostCSS is processing.
610

711
This is mainly useful to track down infinite loops in PostCSS plugins.

plugins/postcss-design-tokens/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-design-tokens --save-dev
7+
```
8+
59
[PostCSS Design Tokens] lets you use design tokens in your CSS source files.
610

711
```json

plugins/postcss-dir-pseudo-class/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install postcss-dir-pseudo-class --save-dev
7+
```
8+
59
[PostCSS Dir Pseudo Class] lets you style by directionality using the `:dir()`
610
pseudo-class in CSS, following the [Selectors] specification.
711

plugins/postcss-exponential-functions/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-exponential-functions --save-dev
7+
```
8+
59
[PostCSS Exponential Functions] lets you use the `pow()`, `sqrt()`, `hypot()`, `log()`, `exp()` functions following the [CSS Values 4 Specification].
610

711
```pcss

plugins/postcss-extract/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-extract --save-dev
7+
```
8+
59
[PostCSS Extract] lets you easily export parts of your CSS source files to JavaScript objects.
610

711
your query :

plugins/postcss-focus-visible/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install postcss-focus-visible --save-dev
7+
```
8+
59
[PostCSS Focus Visible] lets you use the `:focus-visible` pseudo-class in CSS,
610
following the [Selectors Level 4 specification].
711

plugins/postcss-focus-within/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install postcss-focus-within --save-dev
7+
```
8+
59
[PostCSS Focus Within] lets you use the `:focus-within` pseudo-class in CSS,
610
following the [Selectors Level 4 specification].
711

plugins/postcss-gap-properties/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install postcss-gap-properties --save-dev
7+
```
8+
59
[PostCSS Gap Properties] lets you use the `gap`, `column-gap`, and `row-gap`
610
shorthand properties in CSS, following the [CSS Grid Layout] specification.
711

plugins/postcss-global-data/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-global-data --save-dev
7+
```
8+
59
[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.
610

711
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.

plugins/postcss-gradients-interpolation-method/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-gradients-interpolation-method --save-dev
7+
```
8+
59
[PostCSS Gradients Interpolation Method] lets you use different interpolation methods in CSS gradient functions following [CSS Images Module 4].
610

711
```pcss

plugins/postcss-logical-float-and-clear/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-logical-float-and-clear --save-dev
7+
```
8+
59
[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.
610

711
```pcss

plugins/postcss-logical-resize/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-logical-resize --save-dev
7+
```
8+
59
[PostCSS Logical Resize] lets you use logical, rather than physical, values for `resize`, following the [CSS Logical Properties and Values] specification.
610

711
```pcss

plugins/postcss-logical-viewport-units/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
[<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]
44

5+
```bash
6+
npm install @csstools/postcss-logical-viewport-units --save-dev
7+
```
8+
59
[PostCSS Logical Viewport Units] lets you easily use `vb` and `vi` length units following the [CSS-Values-4 Specification].
610

711
```pcss

0 commit comments

Comments
 (0)