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;
}
}
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;
}
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 ^&
.
See also postcss-nesting, which implements Tab Atkin's proposed syntax (requires the &
and introduces @nest
).
There is also postcss-nested-props for nested properties like font-size
.
postcss([ require('postcss-nested') ])
See PostCSS docs for examples for your environment.
By default, plugin will unwrap only @media
, @supports
and @document
at-rules. You can add your custom at-rules to this list by bubble
option:
postcss([ require('postcss-nested')({ bubble: ['phone'] }) ]