# stylelint-use-nesting

> Enforce nesting when it is possible in CSS

Latest version **6.0.2** (published 2026-02-19) · CC0-1.0 license · 0 weekly downloads

## Install

```sh
npm install stylelint-use-nesting
pnpm add stylelint-use-nesting
yarn add stylelint-use-nesting
bun add stylelint-use-nesting
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 6.0.2 |
| Published | 2026-02-19 |
| First published | 2018-11-26 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=20.0.0 |
| Dependencies | 1 |
| Unpacked size | 21 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 50 |
| Author | Jonathan Neal |
| Maintainers | jonathantneal, alaguna, romainmenke |
| Keywords | stylelint, stylelint-plugin, css, prefer, nesting |

## Links

- npm: https://www.npmjs.com/package/stylelint-use-nesting
- Repository: https://github.com/csstools/stylelint-use-nesting
- Homepage: https://github.com/csstools/stylelint-use-nesting#readme
- Issues: https://github.com/csstools/stylelint-use-nesting/issues
- npm.io page: https://npm.io/package/stylelint-use-nesting

## Dependencies (1)

- [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^7.1.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 6.0.2 (latest) — 2026-02-19
- 6.0.1 — 2025-12-06
- 6.0.0 — 2024-09-06
- 5.1.2 — 2024-07-28
- 5.1.1 — 2024-03-06
- 5.1.0 — 2024-03-03
- 5.0.0 — 2024-03-03
- 4.1.0 — 2023-03-08
- 4.0.0 — 2022-07-29
- 3.0.0 — 2020-05-12
- 2.0.0 — 2020-02-03
- 1.2.1 — 2019-02-27
- 1.2.0 — 2019-02-26
- 1.1.0 — 2018-11-27
- 1.0.0 — 2018-11-26

## README

# Stylelint Use Nesting [<img src="https://jonneal.dev/stylelint-logo.svg" alt="stylelint" width="90" height="90" align="right">][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

---
_Source: https://npm.io/package/stylelint-use-nesting · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._