Parse CSS media queries (spec-compliant)
npm install media-query-parsermedia-query-parser




- Create a JS object from a CSS media queries
- Create a CSS media query from a JS object
- Returns a ParserError for invalid CSS media queries
- Spec-compliant - https://www.w3.org/TR/mediaqueries-5/
- **All valid queries parsed
e.g. (100px < width < 200px)**
- Zero-dependencies
- Well tested - every single line
- TypeScript friendly

Try it!
Other CSS parsers (e.g. css-tree and postcss) do not support all media query syntax out of the box.
Further, the only other media query parser that I'm aware of is postcss-media-query-parser - which
is specific to postcss and doesn't parse newer syntax like range expressions (i.e.(width >= 768px)).
This package is a spec-compliant media query parser that can be used in Node/Deno/etc, or on the
client that precisely matches the spec right down to the quirks.
These are valid media queries that this library supports:
``css`
@media (768px <= width < 1200px);
@media only print and (color);
@media not (not (not (((hover) or ((not (color)))))));
@media (🐈: 😸 / if cat happy /) {
/ this query has valid syntax, but is clearly not a real feature 😿 /
/ For extensions to this project, check out "Libraries that use this" at the bottom of this README /
}
These are invalid media queries that this library will detect:
`cssnot
@media (color) or (hover); / or cannot be at top level /
@media (min-width: calc(50vw + 10px)); / functions aren't valid values /
@media not((color)); / whitespace must follow /<
@media (768px < = width < 1200px); / cannot have a space between and = /`
This package is available from the npm registry.
`sh`
npm install media-query-parser
Supports JavaScript + TypeScript:
`ts
import { parseMediaQuery } from "media-query-parser";
const mediaQuery = parseMediaQuery("screen and (min-width: 768px)");
if (!isParserError(mediaQuery)) {
console.log(mediaQuery);
// {
// _t: "query",
// type: "screen",
// condition: {
// _t: "condition",
// op: "and",
// nodes: [
// {
// _t: "in-parens",
// node: {
// _t: "feature",
// context: "value",
// feature: "min-width",
// value: {
// _t: "dimension",
// value: 768,
// unit: "px",
// },
// },
// },
// ],
// },
// }
// // start/end omitted for brevity
console.log(stringify(mediaQuery.condition));
// "(min-width: 768px)"
}
`
Can also be imported via require("media-query-parser").
###### _v2 API docs_
- (See GitHub for dynamically updated list)
This source code of this library supports node >=6.5.0 via require() andnode >=16.0.0 || ^14.13.1` via import. (Below v6.5.0 is possible but you'd need to transpile the
CommonJS code from ES6 yourself)
- PRs welcome and accepted, simply fork and create
- Issues also very welcome
- Treat others with common courtesy and respect 🤝
Dev environment (for contributing) requires:
- node >= 16.14.0
- npm >= 6.8.0
- git >= 2.11
MIT