max-nesting-depth
ネストの深さを制限します。
a { & > b { top: 0; } }
/** ↑
* This nesting */
このルールは、指定された最大値に対して、ルールと at-rule の実際の「ネストの深さ」をチェックすることで機能します。ネストの深さの仕組みは次のとおりです。
a {
& b { /* nesting depth 1 */
& .foo { /* nesting depth 2 */
@media print { /* nesting depth 3 */
& .baz { /* nesting depth 4 */
color: pink;
}
}
}
}
}
ルートレベルの at-rule は、ほとんどのユーザーがルートレベルの at-rule は「自由」（必要であるため）であると当然視するため、ネストの深さの計算には含まれません。したがって、次の両方の .foo ルールはネストの深さが 2 であるため、max が 2 以下の場合にはパスします。
a {
b { /* 1 */
.foo {} /* 2 */
}
}
@media print { /* ignored */
a {
b { /* 1 */
.foo {} /* 2 */
}
}
}
このルールは、(現在非推奨の) プラグイン stylelint-statement-max-nesting-depth の機能を Stylelint のコアに統合します。
message セカンダリオプションは、このルールの引数を受け入れることができます。
オプション
int: 許可される最大ネストの深さ。
たとえば、2 の場合
次のパターンは問題と見なされます
a {
& .foo { /* 1 */
&__foo { /* 2 */
& > .bar {} /* 3 */
}
}
}
a {
@media print { /* 1 */
& .foo { /* 2 */
& .bar {} /* 3 */
}
}
}
次のパターンは問題とは見なされません
a {
& .foo { /* 1 */
&__foo {} /* 2 */
}
}
a .foo__foo .bar .baz {}
@media print {
a {
& .foo { /* 1 */
&__foo {} /* 2 */
}
}
}
オプションのセカンダリオプション
ignore: ["blockless-at-rules"]
他のルールをラップするだけで、宣言ブロック自体を持たない at-rule を無視します。
たとえば、1 の場合
次のパターンは問題と見なされます
at-rule には宣言ブロックがあるためです。
a {
&:hover { /* 1 */
@media (min-width: 500px) { color: pink; } /* 2 */
}
}
a {
@nest > b { /* 1 */
.foo { color: pink; } /* 2 */
}
}
次のパターンは問題とは見なされません
次のすべての .foo ルールは、ネストの深さが 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"]
各セレクターリスト項目の最初のセレクターが疑似クラスであるルールを無視します。
たとえば、1 の場合
次のパターンは問題と見なされます
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;
}
}
}
次のパターンは問題とは見なされません
次のすべての疑似クラスルールは、ネストの深さが 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"]
指定された at-rule を無視します。
たとえば、1 の場合、次のようになります
["/^--my-/", "media"]
次のパターンは問題とは見なされません
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 */
}
}
}
次のパターンは問題と見なされます
a {
@import print { /* 1 */
b { top: 0; } /* 2 */
}
}
a {
@--not-my-at-rule print { /* 1 */
b { top: 0; } /* 2 */
}
}
ignorePseudoClasses: ["/regex/", /regex/, "string"]
指定された疑似クラスを無視します。
たとえば、1 の場合、次のようになります
["hover", "^focus-"]
次のパターンは問題とは見なされません
a {
&:hover { /* ignored */
b { /* 1 */
top: 0;
}
}
}
a {
&:hover, &:active { /* ignored */
b { /* 1 */
top: 0;
}
}
}
次のパターンは問題と見なされます
a {
&:visited { /* 1 */
b { /* 2 */
top: 0;
}
}
}
a {
&:hover, &:visited { /* 1 */
b { /* 2 */
top: 0;
}
}
}
ignoreRules: ["/regex/", /regex/, "string"]
指定されたセレクターに一致するルールを無視します。
たとえば、1 の場合、次のようになります
[".my-selector", "/^.ignored-sel/"]
次のパターンは問題とは見なされません
a {
.my-selector { /* ignored */
b { /* 1 */
top: 0;
}
}
}
a {
.my-selector, .ignored-selector { /* ignored */
b { /* 1 */
top: 0;
}
}
}
次のパターンは問題と見なされます
a {
.not-ignored-selector { /* 1 */
b { /* 2 */
top: 0;
}
}
}
a {
.my-selector, .not-ignored-selector { /* 1 */
b { /* 2 */
top: 0;
}
}
}