max-nesting-depth
Limit the depth of nesting.
a { & > b { top: 0; } }/** ↑ * This nesting */This rule works by checking rules' and at-rules' actual "nesting depth" against your specified max. Here's how nesting depths works:
a { & b { /* nesting depth 1 */ & .foo { /* nesting depth 2 */ @media print { /* nesting depth 3 */ & .baz { /* nesting depth 4 */ color: pink; } } } }}Note that root-level at-rules will not be included in the nesting depth calculation, because most users would take for granted that root-level at-rules are "free" (because necessary). So both of the following .foo rules have a nesting depth of 2, and will therefore pass if your max is less than or equal to 2:
a { b { /* 1 */ .foo {} /* 2 */ }}
@media print { /* ignored */ a { b { /* 1 */ .foo {} /* 2 */ } }}This rule integrates into Stylelint's core the functionality of the (now deprecated) plugin stylelint-statement-max-nesting-depth.
Options#
int: Maximum nesting depth allowed.
For example, with 2:
The following patterns are considered problems:
a { & .foo { /* 1 */ &__foo { /* 2 */ & > .bar {} /* 3 */ } }}a { @media print { /* 1 */ & .foo { /* 2 */ & .bar {} /* 3 */ } }}The following patterns are not considered problems:
a { & .foo { /* 1 */ &__foo {} /* 2 */ }}
a .foo__foo .bar .baz {}@media print { a { & .foo { /* 1 */ &__foo {} /* 2 */ } }}Optional secondary options#
ignore: ["blockless-at-rules"]#
Ignore at-rules that only wrap other rules, and do not themselves have declaration blocks.
For example, with 1:
The following patterns are considered problems:
As the at-rules have a declarations blocks.
a { &:hover { /* 1 */ @media (min-width: 500px) { color: pink; } /* 2 */ }}a { @nest > b { /* 1 */ .foo { color: pink; } /* 2 */ }}The following patterns are not considered problems:
As all of the following .foo rules would have a nesting depth of just 1.
a { .foo { color: pink; } /* 1 */}@media print { /* ignored regardless of options */ a { .foo { color: pink; } /* 1 */ }}a { @media print { /* ignored because it's an at-rule without a declaration block of its own */ .foo { color: pink; } /* 1 */ }}ignore: ["pseudo-classes"]#
Ignore rules where the first selector in each selector list item is a pseudo-class
For example, with 1:
The following patterns are considered problems:
.a { .b { /* 1 */ .c { /* 2 */ top: 0; } }}.a { &:hover { /* ignored */ .b { /* 1 */ .c { /* 2 */ top: 0; } } }}.a { .b { /* 1 */ &::selection { /* 2 */ color: #64FFDA; } }}.a { .b { /* 1 */ &:hover, .c { /* 2 */ top: 0; } }}The following patterns are not considered problems:
As all of the following pseudoclasses rules would have a nesting depth of just 1.
.a { .b { /* 1 */ &:hover { /* ignored */ top: 0; } }}.a { .b { /* 1 */ &:nest { &:nest-lvl2 { /* ignored */ top: 0; } } }}.a { &:hover { /* ignored */ .b { /* 1 */ top: 0; } }}.a { &:nest { /* ignored */ &:nest-lvl2 { /* ignored */ top: 0; .b { /* 1 */ bottom: 0; } } }}.a { .b { /* 1 */ &:hover, &:focus { /* ignored */ top: 0; } }}ignoreAtRules: ["/regex/", /regex/, "string"]#
Ignore the specified at-rules.
For example, with 1 and given:
["/^--my-/", "media"]The following patterns are not considered problems:
a { @media print { /* 1 */ b { /* 2 */ c { top: 0; } /* 3 */ } }}a { b { /* 1 */ @media print { /* 2 */ c { top: 0; } /* 3 */ } }}a { @--my-at-rule print { /* 1 */ b { /* 2 */ c { top: 0; } /* 3 */ } }}a { @--my-other-at-rule print { /* 1 */ b { /* 2 */ c { top: 0; } /* 3 */ } }}The following patterns are considered problems:
a { @import print { /* 1 */ b { top: 0; } /* 2 */ }}a { @--not-my-at-rule print { /* 1 */ b { top: 0; } /* 2 */ }}