summaryrefslogtreecommitdiff
path: root/node_modules/postcss-nesting/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/postcss-nesting/README.md
parent1368909b3cd552dbb0d12d5863c597f5be46177d (diff)
updated node_modules
Diffstat (limited to 'node_modules/postcss-nesting/README.md')
-rw-r--r--node_modules/postcss-nesting/README.md112
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