Stylelint Use Nesting [][stylelint]

[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]

[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.

``shell
npm install stylelint stylelint-use-nesting --save-dev
`

Add [Stylelint Use Nesting] to your [stylelint configuration].

`js
{
"plugins": [
"stylelint-use-nesting"
],
"rules": {
"csstools/use-nesting": "always" || "ignore"
}
}
`

Options

$3

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:

`pcss
.example {
color: blue;

&:hover {
color: rebeccapurple;
}
}
`

`pcss
.example {
color: blue;

@media (min-width: 640px) {
color: rebeccapurple;
}
}
`

While the following patterns are considered violations:

`pcss
.example {
color: blue;
}

.example:hover {
color: rebeccapurple;
}
`

`pcss
.example {
color: blue;
}

@media (min-width: 640px) {
.example {
color: rebeccapurple;
}
}
`

$3

If the first option is "ignore" or null, then [Stylelint Use Nesting] does
nothing.

Secondary Options

$3

The except option ignores reporting or autofixing rules where the potentially
nesting portion of the selector matches a case-insensitive string or regular
expression.

`js
{
"rules": {
"csstools/use-nesting": ["always", { "except": [':selection', /^:dir/i] }]
}
}
`

$3

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.

`js
{
"rules": {
"csstools/use-nesting": ["always", { "only": ['.js', /^:(hover|focus)/i] }]
}
}
`

$3

The syntax option allows you to specify the syntax of the source files being processed. For SCSS syntax set the value to scss.

`js
{
"rules": {
"csstools/use-nesting": ["always", { "syntax": "scss" }]
}
}
``

[cli-img]: https://img.shields.io/travis/csstools/stylelint-use-nesting/main.svg
[cli-url]: https://travis-ci.org/csstools/stylelint-use-nesting
[git-img]: https://img.shields.io/badge/support-chat-blue.svg
[git-url]: https://gitter.im/stylelint/stylelint
[npm-img]: https://img.shields.io/npm/v/stylelint-use-nesting.svg
[npm-url]: https://www.npmjs.com/package/stylelint-use-nesting

[stylelint]: https://github.com/stylelint/stylelint
[stylelint configuration]: https://github.com/stylelint/stylelint/blob/main/docs/user-guide/configuration.md#readme
[Stylelint Use Nesting]: https://github.com/csstools/stylelint-use-nesting