From b1e2c8fd5cb5dfa46bc440a12eafaf56cd844b1c Mon Sep 17 00:00:00 2001 From: Philipp Tanlak Date: Mon, 24 Nov 2025 20:54:57 +0100 Subject: Docs --- node_modules/postcss-nested/README.md | 86 +++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 node_modules/postcss-nested/README.md (limited to 'node_modules/postcss-nested/README.md') diff --git a/node_modules/postcss-nested/README.md b/node_modules/postcss-nested/README.md new file mode 100644 index 0000000..7e78ec8 --- /dev/null +++ b/node_modules/postcss-nested/README.md @@ -0,0 +1,86 @@ +# PostCSS Nested + + + +[PostCSS] plugin to unwrap nested rules closer to Sass syntax. + +```css +.phone { + &_title { + width: 500px; + @media (max-width: 500px) { + width: auto; + } + body.is_dark & { + color: white; + } + } + img { + display: block; + } +} + +.title { + font-size: var(--font); + + @at-root html { + --font: 16px + } +} +``` + +will be processed to: + +```css +.phone_title { + width: 500px; +} +@media (max-width: 500px) { + .phone_title { + width: auto; + } +} +body.is_dark .phone_title { + color: white; +} +.phone img { + display: block; +} + +.title { + font-size: var(--font); +} +html { + --font: 16px +} +``` + +Related plugins: + +* Use [`postcss-current-selector`] **after** this plugin if you want + to use current selector in properties or variables values. +* Use [`postcss-nested-ancestors`] **before** this plugin if you want + to reference any ancestor element directly in your selectors with `^&`. + +Alternatives: + +* See also [`postcss-nesting`], which implements [CSSWG draft]. +* [`postcss-nested-props`] for nested properties like `font-size`. + + + Sponsored by Evil Martians + + +[`postcss-current-selector`]: https://github.com/komlev/postcss-current-selector +[`postcss-nested-ancestors`]: https://github.com/toomuchdesign/postcss-nested-ancestors +[`postcss-nested-props`]: https://github.com/jedmao/postcss-nested-props +[`postcss-nesting`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting +[CSSWG draft]: https://drafts.csswg.org/css-nesting-1/ +[PostCSS]: https://github.com/postcss/postcss + + +## Docs +Read full docs **[here](https://github.com/postcss/postcss-nested#readme)**. -- cgit v1.2.3