https://github.com/csstools/stylelint-use-nesting
Enforce nesting when it is possible in CSS
https://github.com/csstools/stylelint-use-nesting
Last synced: 5 months ago
JSON representation
Enforce nesting when it is possible in CSS
- Host: GitHub
- URL: https://github.com/csstools/stylelint-use-nesting
- Owner: csstools
- License: cc0-1.0
- Created: 2018-11-26T02:20:59.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-12-27T18:26:18.000Z (about 1 year ago)
- Last Synced: 2025-10-11T00:24:30.989Z (5 months ago)
- Language: JavaScript
- Size: 95.7 KB
- Stars: 47
- Watchers: 4
- Forks: 9
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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
### 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:
```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;
}
}
```
### 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.
```js
{
"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.
```js
{
"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`.
```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