# media-query-nesting

> SCSS media query mixins nesting

Latest version **1.1.5** (published 2022-09-01) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install media-query-nesting
pnpm add media-query-nesting
yarn add media-query-nesting
bun add media-query-nesting
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2022-09-01 |
| First published | 2022-02-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | kiforks |
| Keywords | code, quality, style, lint, linter, stylelint, validate, code style, strict, check, checker, verify, enforce, hint, media, media query, nest, nesting, nested |

## Links

- npm: https://www.npmjs.com/package/media-query-nesting
- Repository: https://github.com/kiforks/media-query-nesting
- Homepage: https://github.com/kiforks/media-query-nesting#readme
- Issues: https://github.com/kiforks/media-query-nesting/issues
- npm.io page: https://npm.io/package/media-query-nesting

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 1.1.5 (latest) — 2022-09-01
- 1.1.1 — 2022-02-21
- 1.1.0 — 2022-02-21
- 1.0.8 — 2022-02-21
- 1.0.7 — 2022-02-21
- 1.0.6 — 2022-02-21
- 1.0.5 — 2022-02-21
- 1.0.4 — 2022-02-21
- 1.0.3 — 2022-02-21
- 1.0.2 — 2022-02-21
- 1.0.1 — 2022-02-21
- 1.0.0 — 2022-02-21

## README

# kiforks/media-query-nesting
The rule due to which only style properties can be inside the media query

## Installation

```bash
npm install kiforks/media-query-nesting --save-dev
```

## Usage

If your project does not already have stylelint, then in the root of the project create the file `.stylelintrc`, or with the extension `.stylelintrc.js` so that the code editor can highlight the syntax.

Then add `kiforks/media-query-nesting` to the `.stylelintrc` config file.

_.stylelintrc_
```json
{
    "plugins": [
      "kiforks/media-query-nesting"
    ],
    "rules": {
	    "kiforks/media-query-nesting": true
    }
}
```

**ATTENTION!** This config is for media [mixins](https://gist.github.com/kifork/0c449aace117fb4db7695aea34b63925) instead of **media queries**:
```scss
/* BAD */
@include media-min(xs) {
  .block {
	  width: 300px;
  }
}

/* GOOD */
.block {
	@include media-min(xs) {
		width: 300px;
    }
}
```

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