stylelint-selector-no-mergeable

1.0.4 • Public • Published

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.

Package Sidebar

Install

npm i stylelint-selector-no-mergeable

Weekly Downloads

2

Version

1.0.4

License

MIT

Last publish

Collaborators

  • timothyneiljohnson