csstoolsStylelint Use Nesting 
Stylelint Use Nesting is a stylelint rule to enforce nesting when it is possible in CSS.
Usage
Add stylelint and Stylelint Use Nesting to your project.
npm install stylelint stylelint-use-nesting --save-devAdd Stylelint Use Nesting to your stylelint configuration.
{
"plugins": [
"stylelint-use-nesting"
],
"rules": {
"csstools/use-nesting": "always" || "ignore"
}
}Options
always
If the first option is "always" or true, then Stylelint Use Nesting
requires all nodes to be linted, and the following patterns are not
considered violations:
.example {
color: blue;
&:hover {
color: rebeccapurple;
}
}.example {
color: blue;
@media (min-width: 640px) {
color: rebeccapurple;
}
}While the following patterns are considered violations:
.example {
color: blue;
}
.example:hover {
color: rebeccapurple;
}.example {
color: blue;
}
@media (min-width: 640px) {
.example {
color: rebeccapurple;
}
}ignore
If the first option is "ignore" or null, then Stylelint Use Nesting does
nothing.
Secondary Options
except
The except option ignores reporting or autofixing rules where the potentially
nesting portion of the selector matches a case-insensitive string or regular
expression.
{
"rules": {
"csstools/use-nesting": ["always", { "except": [':selection', /^:dir/i] }]
}
}only
The except option limits reporting and autofixing to rules where the
potentially nesting portion of the selector matches a case-insensitive string
or regular expression.
{
"rules": {
"csstools/use-nesting": ["always", { "only": ['.js', /^:(hover|focus)/i] }]
}
}syntax
The syntax option allows you to specify the syntax of the source files being processed. For SCSS syntax set the value to scss.
{
"rules": {
"csstools/use-nesting": ["always", { "syntax": "scss" }]
}
}