hugoWebsite/node_modules/postcss-nested
Jeremy Nusser 0ab675d92b Initial commit... 🎉🎉🎉 2022-10-28 17:20:35 -05:00
..
LICENSE Initial commit... 🎉🎉🎉 2022-10-28 17:20:35 -05:00
README.md Initial commit... 🎉🎉🎉 2022-10-28 17:20:35 -05:00
index.d.ts Initial commit... 🎉🎉🎉 2022-10-28 17:20:35 -05:00
index.js Initial commit... 🎉🎉🎉 2022-10-28 17:20:35 -05:00
package.json Initial commit... 🎉🎉🎉 2022-10-28 17:20:35 -05:00

README.md

PostCSS Nested

PostCSS plugin to unwrap nested rules like how Sass does it.

.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-atroot for @at-root at-rule to move nested child to the CSS root.
  • 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 on GitHub.