Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tbjgolden/media-query-parser
@ media (768px <= width) { /* parse any CSS media query */ }
https://github.com/tbjgolden/media-query-parser
media media-queries parser query typescript
Last synced: 27 days ago
JSON representation
@ media (768px <= width) { /* parse any CSS media query */ }
- Host: GitHub
- URL: https://github.com/tbjgolden/media-query-parser
- Owner: tbjgolden
- License: mit
- Created: 2021-04-05T19:15:04.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-29T09:58:32.000Z (11 months ago)
- Last Synced: 2024-12-09T18:47:19.667Z (about 1 month ago)
- Topics: media, media-queries, parser, query, typescript
- Language: TypeScript
- Homepage: https://tbjgolden.github.io/media-query-parser/
- Size: 1.85 MB
- Stars: 9
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `media-query-parser`
[](https://www.npmjs.com/package/media-query-parser)
[](#)
[](#)
[](https://www.npmjs.com/package/media-query-parser)
[](https://packagephobia.com/result?p=media-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**
[](https://tbjgolden.github.io/media-query-parser/playground/)
[Try it!](https://tbjgolden.github.io/media-query-parser/playground/)
## Why?
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 media queries that this library can parse:
```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 isn't a current browser feature 😿 (yet) */
/* see "Libraries that use this" at the bottom of this README */
}
```
These are unparseable media queries that this library can detect:
```css
@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 `not` */
@media (768px < = width < 1200px); /* cannot have a space between `<` and `=` */
```
## Install
This package is available from the `npm` registry.
```sh
npm install media-query-parser
```
## Usage
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")`.
### [**v3 (Current) Docs**](https://tbjgolden.github.io/media-query-parser/)
###### [_v2 API docs_](https://github.com/tbjgolden/media-query-parser/tree/v2.0.2/docs/api#functions)
## Libraries that use this
- [`media-query-solver`](https://github.com/tbjgolden/media-query-solver) - Solve media queries (and
detect useless ones!)
## Node versions
This source code of this library supports `node >=6.5.0` via `require()` and
`node >=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)
## Contributing
- 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
## Licence
MIT