FM / postcss-nested

/opt/canhelp/node_modules/postcss-nested/

/opt/canhelp/node_modules/postcss-nested

Name	Size	Mode	Actions
index.d.ts	1161	0644	edit dl rm
index.js	9058	0644	edit dl rm
LICENSE	1095	0644	edit dl rm
package.json	695	0644	edit dl rm
README.md	1953	0644	edit dl rm

Edit: /opt/canhelp/node_modules/postcss-nested/README.md (1953B)

# 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`.

[`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)**.

cmd: