diff options
Diffstat (limited to 'node_modules/postcss-nesting/README.md')
| -rw-r--r-- | node_modules/postcss-nesting/README.md | 112 |
1 files changed, 111 insertions, 1 deletions
diff --git a/node_modules/postcss-nesting/README.md b/node_modules/postcss-nesting/README.md index 9efe88e7..e867f554 100644 --- a/node_modules/postcss-nesting/README.md +++ b/node_modules/postcss-nesting/README.md @@ -1,6 +1,6 @@ # PostCSS Nesting [<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/postcss-nesting.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/nesting-rules.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] +[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-nesting.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/nesting-rules.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/nesting-rules.svg" height="20">][css-url] ```bash npm install postcss-nesting --save-dev @@ -26,12 +26,16 @@ you might want to use [PostCSS Nested] instead. @media (prefers-color-scheme: dark) { color: cyan; } + + color: pink; } /* becomes */ .foo { color: red; + + color: pink; } .foo:hover { color: green; @@ -100,6 +104,112 @@ postcssNesting({ ## Options +### edition + +The default behavior is to transpile CSS following an older version of the CSS nesting specification. + +If you want to already use the latest version you can set the `edition` option to `2024-02`. + +```js +postcssNesting({ + edition: '2024-02' +}) +``` + +#### `2021` (default) + +This version is a continuation of what existed before CSS nesting was implemented in browsers. +It made a few non-invasive changes to keep up with implementations but it is falling behind. + +In a future version of this plugin this will no longer be the default. + +```pcss +.foo { + color: red; + + &:hover { + color: green; + } + + > .bar { + color: blue; + } + + @media (prefers-color-scheme: dark) { + color: cyan; + } + + color: pink; +} + +/* becomes */ + +.foo { + color: red; + + color: pink; +} +.foo:hover { + color: green; + } +.foo > .bar { + color: blue; + } +@media (prefers-color-scheme: dark) { + .foo { + color: cyan; +} + } +``` + +#### `2024-02` + +- usage of `:is()` pseudo-class is no longer optional +- at rules are not combined with the `and` keyword +- `@nest` is removed from the specification +- declarations and nested rules/at-rules are no longer re-ordered + +```pcss +.foo { + color: red; + + &:hover { + color: green; + } + + > .bar { + color: blue; + } + + @media (prefers-color-scheme: dark) { + color: cyan; + } + + color: pink; +} + +/* becomes */ + +.foo { + color: red; +} +.foo:hover { + color: green; + } +.foo > .bar { + color: blue; + } +@media (prefers-color-scheme: dark) { + .foo { + color: cyan; +} + } +.foo { + + color: pink; +} +``` + ### noIsPseudoSelector #### Specificity |
