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-current-selectorafter this plugin if you want
to use current selector in properties or variables values. - Use
postcss-nested-ancestorsbefore this plugin if you want
to reference any ancestor element directly in your selectors with^&.
Alternatives:
- See also
postcss-nesting, which implements CSSWG draft
(requires the&and introduces@nest). postcss-nested-propsfor nested properties likefont-size.
Usage
postcss([ require('postcss-nested') ])
See PostCSS docs for examples for your environment.
Options
bubble
By default, plugin will bubble only @media and @supports at-rules.
You can add your custom at-rules to this list by bubble option:
postcss([ require('postcss-nested')({ bubble: ['phone'] }) ])
/* input */
a {
color: white;
@phone {
color: black;
}
}
/* output */
a {
color: white;
}
@phone {
a {
color: black;
}
}
unwrap
By default, plugin will unwrap only @font-face, @keyframes and @document
at-rules. You can add your custom at-rules to this list by unwrap option:
postcss([ require('postcss-nested')({ unwrap: ['phone'] }) ])
/* input */
a {
color: white;
@phone {
color: black;
}
}
/* output */
a {
color: white;
}
@phone {
color: black;
}
preserveEmpty
By default, plugin will strip out any empty selector generated by intermediate
nesting levels. You can set preserveEmpty to true to preserve them.
.a {
.b {
color: black;
}
}
Will be compiled to:
.a { }
.a .b {
color: black;
}
This is especially useful if you want to export the empty classes with postcss-modules.