Skip to content
A stylelint custom rule to limit nesting depth
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
package.json

README.md

stylelint-statement-max-nesting-depth

Build Status

Deprecated: use stylelint's max-nesting-depth rule instead.

A stylelint custom rule to limit nesting depth.

This rule will cause stylelint to warn you whenever a nested rule or at-rule exceeds your specified depth.

Installation

npm install stylelint-statement-max-nesting-depth

v2+ is compatible with stylelint v3+. For older versions of stylelint, use older versions of this plugin.

Details

Preprocessers like Sass, Less, and Stylus have nesting. Nesting can be enabled via PostCSS with postcss-nested or postcss-nesting.

Here's how it works:

a {
  b { /* nesting level 1 */
    .foo { /* nesting level 2 */
      .bar { /* nesting level 3 */
        .baz { /* nesting level 4 */
          color: pink;
        }
      }
    }
  }
}

Nesting depth ignores root-level at-rules

Just like the heading said: root-level at-rules will not be included in the nesting depth calculation.

So both of the following .foo rules have a nesting depth of 2, and will therefore pass if you max is less than or equal to 2:

a {
  b {
    .foo {}
  }
}

@media print {
  a {
    b {
      .foo {}
    }
  }
}

Why? Because I think that's how most users would want this thing to work. If you disagree, file an issue.

Options

countAtRules

Type Boolean; Default true

If false no at-rules (root-level or nested) will affect the calculation of a statement's nesting depth.

Both of the following .foo rules would have a nesting depth of 1.

a {
  .foo {}
}

a {
  @media print {
    .foo {}
  }
}

countNestedAtRules

Type Boolean; Default true

If false, nested at-rules will not affect the calculation of a statement's nesting depth.

None of the following would involve a nesting depth greater than 1.

a {
  .foo {}
}

a {
  @media print {
    .foo {}
  }
}

a {
  .foo {
    @media print {
      color: pink;
    }
  }
}

Usage

Add it to your stylelint config plugins array, then add 'statement-max-nesting-depth' to your rules, specifying a max nesting depth as the primary option.

Like so:

{
  "plugins": [
    "stylelint-statement-max-nesting-depth"
  ],
  "rules": {
    // ...
    // The following settings = max nesting depth of 1,
    // with the option `countAtRules` set to `false`
    "statement-max-nesting-depth": [1, { countAtRules: false }],
    // ...
  },
};
You can’t perform that action at this time.