# @csstools/media-query-list-parser

> Parse CSS media query lists.

Latest version **5.0.0** (published 2026-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @csstools/media-query-list-parser
pnpm add @csstools/media-query-list-parser
yarn add @csstools/media-query-list-parser
bun add @csstools/media-query-list-parser
```

## Health

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

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

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2026-01-14 |
| First published | 2022-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | >=20.19.0 |
| Dependencies | 0 |
| Unpacked size | 69.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1052 |
| Maintainers | jonathantneal, alaguna, romainmenke |
| Keywords | css, media query, parser |

## Links

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

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 5.0.0 (latest) — 2026-01-14
- 4.0.3 — 2025-05-27
- 4.0.2 — 2024-11-01
- 4.0.1 — 2024-10-23
- 4.0.0 — 2024-10-10
- 3.0.1 — 2024-08-18
- 3.0.0 — 2024-08-03
- 2.1.13 — 2024-07-06
- 2.1.12 — 2024-06-29
- 2.1.11 — 2024-05-04
- 2.1.10 — 2024-05-04
- 2.1.9 — 2024-03-13
- 2.1.8 — 2024-02-19
- 2.1.7 — 2023-12-31
- 2.1.6 — 2023-12-15
- … 12 more at https://npm.io/package/@csstools/media-query-list-parser/versions

## README

# Media Query List Parser <img src="https://cssdb.org/images/css.svg" alt="for CSS" width="90" height="90" align="right">

[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/media-query-list-parser.svg" height="20">][npm-url]
[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/actions/workflows/test.yml/badge.svg?branch=main" height="20">][cli-url]
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]

Implemented from : https://www.w3.org/TR/mediaqueries-5/

## Usage

Add [Media Query List Parser] to your project:

```bash
npm install @csstools/media-query-list-parser @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
```

[Media Query List Parser] depends on our CSS tokenizer and parser algorithms.
It must be used together with `@csstools/css-tokenizer` and `@csstools/css-parser-algorithms`.

```ts
import { parse } from '@csstools/media-query-list-parser';

export function parseCustomMedia() {
	const mediaQueryList = parse('screen and (min-width: 300px), (50px < height < 30vw)');

	mediaQueryList.forEach((mediaQuery) => {
		mediaQuery.walk((entry, index) => {
			// Index of the current Node in `parent`.
			console.log(index);
			// Type of `parent`.
			console.log(entry.parent.type);

			// Type of `node`
			{
				// Sometimes nodes can be arrays.
				if (Array.isArray(entry.node)) {
					entry.node.forEach((item) => {
						console.log(item.type);
					});
				}

				if ('type' in entry.node) {
					console.log(entry.node.type);
				}
			}

			// stringified version of the current node.
			console.log(entry.node.toString());

			// Return `false` to stop the walker.
			return false;
		});
	});
}
```

[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
[discord]: https://discord.gg/bUadyRwkJS
[npm-url]: https://www.npmjs.com/package/@csstools/media-query-list-parser

[Media Query List Parser]: https://github.com/csstools/postcss-plugins/tree/main/packages/media-query-list-parser

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