stylelint-group-selectors

stylelint plugin to identify the selectors can be grouped as they have same set of properties and values

Usage no npm install needed!

<script type="module">
  import stylelintGroupSelectors from 'https://cdn.skypack.dev/stylelint-group-selectors';
</script>

Identify the selectors, which can be grouped, as they have same set of properties and values.

  .a{ display: inline-block;width: 100px;}
  .b{display:inline-block;width:100px;}

Above selectors can be grouped like this

.a,.b{display:inline-block;width: 100px;}

npm install stylelint-group-selectors --save-dev

// .stylelintrc
{
  "plugins": [
    "stylelint-group-selectors"
  ],
  "rules": {
    "plugin/stylelint-group-selectors": true,
  }
}

The following patterns are considered violations:

.b{display:inline-block;color:#111;}
.a{display:inline-block;color:#111;}

.a,.b{display: inline-block;color:#111; }