stylelint-selector-no-mergeable

A custom stylelint rule to catch mergeable selectors.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
stylelint-selector-no-mergeable
121.0.47 years ago7 years agoMinified + gzip package size for stylelint-selector-no-mergeable in KB

Readme

stylelint-selector-no-mergeable
Build Status
A stylelint to catch mergeable selectors.
This rule will cause stylelint to warn when you either forget to nest or nest unnecessarily.

Installation

npm install stylelint-selector-no-mergeable

This plugin is compatible with v5.0.1+.

Details

There are two major pieces to this plugin. Catching missed opportunities to nest rules (under-nesting), and catching over-usage of nesting (over-nesting).
Here are some examples of 'under-nesting':
/* Not OK */
a .class1 {
  margin: 0
}
a .class2 {
  margin: 8px
}

/* OK */
a {
  .class1 {
    margin: 0
  }
  .class2 {
    margin: 8px
  }
}
/* Not OK */
&.class a {
  margin: 0
}
&.class b {
  margin: 8px
}

/* OK */
&.class {
  a {
    margin: 0
  }
  b {
    margin: 8px
  }
}

Here is an example of 'over-nesting':
a { /* Not OK */
  .class {
    margin: 0
  }
}

a .class { /* OK */
  margin: 0
}

If you would like to disable these 'over-nesting' errors, you can set the following option: allowVanityNesting
For allowVanityNesting: true:
a { /* OK */
  .class {
    margin: 0
  }
}

Usage

Add "stylelint-selector-no-mergeable" to your stylelint config plugins array, then add selector-no-mergeable to your rules, with your desired options.
Example:
{
  "plugins": [
    "stylelint-selector-no-mergeable"
  ],
  "rules": {
    "selector-no-mergeable": [ true, { "allowVanityNesting": true|false } ]
  }
};

NOTE: This plugins currently finds mergeable PARENT selectors:
a .class1
a .class2
It does NOT, unfortunately, detect mergeable chained selectors:
a.class1
a.class2
This will hopefully come in a newer release, but will require quite a bit of testing.