postcss-nested

PostCSS Nested

PostCSS plugin to unwrap nested rules closer to Sass syntax.

.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:

.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 Nested is built by Evil Martians, an American design and engineering consultancy for developer tools, AI, and cybersecurity startups.

Similar packages

Other packages similar to postcss-nested

sass

Sass is a mature, stable, and powerful professional grade CSS extension language. It provides similar nesting functionalities but with a broader feature set for styling. Compared to postcss-nested, Sass offers more features like variables, mixins, and functions for more dynamic styling.

less

Less is a backward-compatible language extension for CSS. It also supports nesting, along with variables, mixins, and functions, similar to Sass. Less and postcss-nested offer comparable nesting capabilities, but Less includes additional features that extend CSS more comprehensively.

stylus

Stylus is an expressive, dynamic, and robust CSS preprocessor that supports nested selectors, variables, mixins, and arithmetic operations. It provides a more flexible syntax compared to postcss-nested, allowing for both a concise and expressive way to write CSS.