.config/coc/extensions/node_modules/coc-prettier/node_modules/stylelint/lib/rules/max-nesting-depth/README.md

   1 # max-nesting-depth
   2
   3 Limit the allowed nesting depth.
   4
   5 ```css
   6 a { & > b { top: 0; } }
   7 /** ↑
   8  * This nesting */
   9 ```
  10
  11 This rule works by checking rules' and at-rules' actual "nesting depth" against your specified max. Here's how nesting depths works:
  12
  13 ```css
  14 a {
  15   & b { /* nesting depth 1 */
  16     & .foo { /* nesting depth 2 */
  17       @media print { /* nesting depth 3 */
  18         & .baz { /* nesting depth 4 */
  19           color: pink;
  20         }
  21       }
  22     }
  23   }
  24 }
  25 ```
  26
  27 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:
  28
  29 ```css
  30 a {
  31   b { /* 1 */
  32     .foo {} /* 2 */
  33   }
  34 }
  35
  36 @media print { /* ignored */
  37   a {
  38     b { /* 1 */
  39       .foo {} /* 2 */
  40     }
  41   }
  42 }
  43 ```
  44
  45 This rule integrates into stylelint's core the functionality of the (now deprecated) plugin [`stylelint-statement-max-nesting-depth`](https://github.com/davidtheclark/stylelint-statement-max-nesting-depth).
  46
  47 ## Options
  48
  49 `int`: Maximum nesting depth allowed.
  50
  51 For example, with `2`:
  52
  53 The following patterns are considered violations:
  54
  55 ```css
  56 a {
  57   & .foo { /* 1 */
  58     &__foo { /* 2 */
  59       & > .bar {} /* 3 */
  60     }
  61   }
  62 }
  63 ```
  64
  65 ```css
  66 a {
  67   @media print { /* 1 */
  68     & .foo { /* 2 */
  69       & .bar {} /* 3 */
  70     }
  71   }
  72 }
  73 ```
  74
  75 The following patterns are *not* considered violations:
  76
  77 ```css
  78 a {
  79   & .foo { /* 1 */
  80     &__foo {} /* 2 */
  81   }
  82 }
  83
  84 a .foo__foo .bar .baz {}
  85 ```
  86
  87 ```css
  88 @media print {
  89   a {
  90     & .foo { /* 1 */
  91       &__foo {} /* 2 */
  92     }
  93   }
  94 }
  95 ```
  96
  97 ## Optional secondary options
  98
  99 ### `ignore: ["blockless-at-rules"]`
 100
 101 Ignore at-rules that only wrap other rules, and do not themselves have declaration blocks.
 102
 103 For example, with `1`:
 104
 105 The following patterns are considered violations:
 106
 107 As the at-rules have a declarations blocks.
 108
 109 ```css
 110 a {
 111   &:hover { /* 1 */
 112     @media (min-width: 500px) { color: pink; } /* 2 */
 113   }
 114 }
 115 ```
 116
 117 ```css
 118 a {
 119   @nest > b { /* 1 */
 120     .foo { color: pink; } /* 2 */
 121   }
 122 }
 123 ```
 124
 125 The following patterns are *not* considered violations:
 126
 127 As all of the following `.foo` rules would have a nesting depth of just 1.
 128
 129 ```css
 130 a {
 131   .foo { color: pink; } /* 1 */
 132 }
 133 ```
 134
 135 ```css
 136 @media print { /* ignored regardless of options */
 137   a {
 138     .foo { color: pink; } /* 1 */
 139   }
 140 }
 141 ```
 142
 143 ```css
 144 a {
 145   @media print { /* ignored because it's an at-rule without a declaration block of its own */
 146     .foo { color: pink; } /* 1 */
 147   }
 148 }
 149 ```
 150
 151 ### `ignoreAtRules: ["/regex/", "string"]`
 152
 153 Ignore the specified at-rules.
 154
 155 For example, with `1` and given:
 156
 157 ```js
 158 ["/^my-/", "media"]
 159 ```
 160
 161 The following patterns are *not* considered violations:
 162
 163 ```css
 164 a {
 165   @media print {      /* 1 */
 166     b {               /* 2 */
 167       c { top: 0; }   /* 3 */
 168     }
 169   }
 170 }
 171 ```
 172
 173 ```css
 174 a {
 175   b {                 /* 1 */
 176     @media print {    /* 2 */
 177       c { top: 0; }   /* 3 */
 178     }
 179   }
 180 }
 181 ```
 182
 183 ```css
 184 a {
 185   @my-at-rule print {  /* 1 */
 186     b {                /* 2 */
 187       c { top: 0; }    /* 3 */
 188     }
 189   }
 190 }
 191 ```
 192
 193 ```css
 194 a {
 195   @my-other-at-rule print {  /* 1 */
 196     b {                      /* 2 */
 197       c { top: 0; }          /* 3 */
 198     }
 199   }
 200 }
 201 ```
 202
 203 The following patterns are considered violations:
 204
 205 ```css
 206 a {
 207   @import print {       /* 1 */
 208     b { top: 0; }       /* 2 */
 209   }
 210 }
 211 ```
 212
 213 ```css
 214 a {
 215   @not-my-at-rule print {   /* 1 */
 216     b { top: 0; }       /* 2 */
 217   }
 218 }
 219 ```