# @csstools/postcss-media-minmax

> Use the range notation in CSS media queries

Latest version **3.0.5** (published 2026-09-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @csstools/postcss-media-minmax
pnpm add @csstools/postcss-media-minmax
yarn add @csstools/postcss-media-minmax
bun add @csstools/postcss-media-minmax
```

## Health

**Score 60/100 (C)** — status: active.

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

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 3.0.5 |
| Published | 2026-09-13 |
| First published | 2023-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | >=20.19.0 |
| Dependencies | 4 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1053 |
| Maintainers | jonathantneal, alaguna, romainmenke |
| Keywords | media queries, postcss-plugin, range |

## Links

- npm: https://www.npmjs.com/package/@csstools/postcss-media-minmax
- Repository: https://github.com/csstools/postcss-plugins
- Homepage: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax#readme
- Issues: https://github.com/csstools/postcss-plugins/issues
- Funding: https://github.com/sponsors/csstools
- npm.io page: https://npm.io/package/@csstools/postcss-media-minmax

## Dependencies (4)

- [@csstools/css-calc](https://npm.io/package/@csstools/css-calc.md) ^3.4.0
- [@csstools/css-tokenizer](https://npm.io/package/@csstools/css-tokenizer.md) ^4.0.0
- [@csstools/css-parser-algorithms](https://npm.io/package/@csstools/css-parser-algorithms.md) ^4.0.0
- [@csstools/media-query-list-parser](https://npm.io/package/@csstools/media-query-list-parser.md) ^5.0.0

## Recent versions

- 3.0.5 (latest) — 2026-09-13
- 3.0.4 — 2026-07-22
- 3.0.3 — 2026-05-13
- 3.0.2 — 2026-04-12
- 3.0.1 — 2026-02-21
- 3.0.0 — 2026-01-14
- 2.0.9 — 2025-05-27
- 2.0.8 — 2025-04-19
- 2.0.7 — 2025-02-23
- 2.0.6 — 2024-12-27
- 2.0.5 — 2024-11-11
- 2.0.4 — 2024-11-01
- 2.0.3 — 2024-10-23
- 2.0.2 — 2024-10-10
- 2.0.1 — 2024-08-18
- … 18 more at https://npm.io/package/@csstools/postcss-media-minmax/versions

## README

# PostCSS Media MinMax [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]

`npm install @csstools/postcss-media-minmax --save-dev`

[PostCSS Media MinMax] lets you use the range notation in media queries following the [Media Queries 4 Specification].

```css
@media screen and (width >=500px) and (width <=1200px) {
	.bar {
		display: block;
	}
}

/* becomes */

@media screen and (min-width:500px) and (max-width:1200px) {
	.bar {
		display: block;
	}
}
```

## Usage

Add [PostCSS Media MinMax] to your project:

```bash
npm install postcss @csstools/postcss-media-minmax --save-dev
```

Use it as a [PostCSS] plugin:

```js
const postcss = require('postcss');
const postcssMediaMinMax = require('@csstools/postcss-media-minmax');

postcss([
	postcssMediaMinMax(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```



_See prior work by [yisibl](https://github.com/yisibl) here [postcss-media-minmax](https://github.com/postcss/postcss-media-minmax)
To ensure long term maintenance and to provide the needed features this plugin was recreated based on yisibl's work._

[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
[css-url]: https://cssdb.org/#media-query-ranges
[discord]: https://discord.gg/bUadyRwkJS
[npm-url]: https://www.npmjs.com/package/@csstools/postcss-media-minmax

[PostCSS]: https://github.com/postcss/postcss
[PostCSS Media MinMax]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax
[Media Queries 4 Specification]: https://www.w3.org/TR/mediaqueries-4/#mq-features

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