postcss-nested

postcss
popular js
postcss-nested JS library on GitHub postcss-nested JS library on npm Download postcss-nested JS library

PostCSS plugin to unwrap nested rules like how Sass does it

Version 7.0.2 License MIT Vulnerabilities 0
postcss-nested has no homepage
postcss-nested JS library on GitHub
postcss-nested JS library on npm
Download postcss-nested JS library
Keywords
postcsscsspostcss-pluginsassnested

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:

Sponsored by Evil Martians

Docs

Read full docs here.