PostCSS Nested

PostCSS plugin to unwrap nested rules closer to Sass syntax.

1.phone {
2  &_title {
3    width: 500px;
4    @media (max-width: 500px) {
5      width: auto;
6    }
7    body.is_dark & {
8      color: white;
9    }
10  }
11  img {
12    display: block;
13  }
14}
15
16.title {
17  font-size: var(--font);
18
19  @at-root html {
20    --font: 16px;
21  }
22}

will be processed to:

1.phone_title {
2  width: 500px;
3}
4@media (max-width: 500px) {
5  .phone_title {
6    width: auto;
7  }
8}
9body.is_dark .phone_title {
10  color: white;
11}
12.phone img {
13  display: block;
14}
15
16.title {
17  font-size: var(--font);
18}
19html {
20  --font: 16px;
21}

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.

Docs

Read full docs here.