{"id":23501499,"url":"https://github.com/tbjgolden/media-query-parser","last_synced_at":"2025-04-15T19:42:29.830Z","repository":{"id":57293922,"uuid":"354945138","full_name":"tbjgolden/media-query-parser","owner":"tbjgolden","description":"@ media (768px \u003c= width) { /* parse any CSS media query */ }","archived":false,"fork":false,"pushed_at":"2024-02-29T09:58:32.000Z","size":1944,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-29T00:23:47.539Z","etag":null,"topics":["media","media-queries","parser","query","typescript"],"latest_commit_sha":null,"homepage":"https://tbjgolden.github.io/media-query-parser/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tbjgolden.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-05T19:15:04.000Z","updated_at":"2024-04-28T15:22:04.000Z","dependencies_parsed_at":"2024-06-18T20:08:45.744Z","dependency_job_id":"7994a89b-2582-4964-956b-656301cdc03e","html_url":"https://github.com/tbjgolden/media-query-parser","commit_stats":{"total_commits":39,"total_committers":1,"mean_commits":39.0,"dds":0.0,"last_synced_commit":"b5e85d3bbfd217ac376669835b84ef7d58f1a676"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbjgolden%2Fmedia-query-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbjgolden%2Fmedia-query-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbjgolden%2Fmedia-query-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbjgolden%2Fmedia-query-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tbjgolden","download_url":"https://codeload.github.com/tbjgolden/media-query-parser/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248991537,"owners_count":21194894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["media","media-queries","parser","query","typescript"],"created_at":"2024-12-25T07:18:07.686Z","updated_at":"2025-04-15T19:42:29.804Z","avatar_url":"https://github.com/tbjgolden.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `media-query-parser`\n\n[![npm](https://img.shields.io/npm/v/media-query-parser)](https://www.npmjs.com/package/media-query-parser)\n[![npm type definitions](https://img.shields.io/npm/types/media-query-parser)](#)\n[![license](https://img.shields.io/npm/l/media-query-parser)](#)\n[![npm downloads](https://img.shields.io/npm/dw/media-query-parser)](https://www.npmjs.com/package/media-query-parser)\n[![install size](https://packagephobia.com/badge?p=media-query-parser)](https://packagephobia.com/result?p=media-query-parser)\n\n- **Create a JS object from a CSS media queries**\n- **Create a CSS media query from a JS object**\n- **Returns a ParserError for invalid CSS media queries**\n- **Spec-compliant** - https://www.w3.org/TR/mediaqueries-5/\n  - **All valid queries parsed  \n    e.g. `(100px \u003c width \u003c 200px)`**\n- **Zero-dependencies**\n- **Well tested** - every single line\n- **TypeScript friendly**\n\n[![demo](demo.png)](https://tbjgolden.github.io/media-query-parser/playground/)  \n[Try it!](https://tbjgolden.github.io/media-query-parser/playground/)\n\n## Why?\n\nOther CSS parsers (e.g. css-tree and postcss) do not support all media query syntax out of the box.\n\nFurther, the only other media query parser that I'm aware of is `postcss-media-query-parser` - which\nis specific to postcss and doesn't parse newer syntax like range expressions (i.e.\n`(width \u003e= 768px)`).\n\nThis package is a spec-compliant media query parser that can be used in Node/Deno/etc, or on the\nclient that precisely matches the spec right down to the quirks.\n\nThese are media queries that this library can parse:\n\n```css\n@media (768px \u003c= width \u003c 1200px);\n@media only print and (color);\n@media not (not (not (((hover) or ((not (color)))))));\n@media (🐈: 😸 /* if cat happy */) {\n  /* this query has valid syntax, but isn't a current browser feature 😿 (yet) */\n  /* see \"Libraries that use this\" at the bottom of this README */\n}\n```\n\nThese are unparseable media queries that this library can detect:\n\n```css\n@media (color) or (hover); /* or cannot be at top level */\n@media (min-width: calc(50vw + 10px)); /* functions aren't valid values */\n@media not((color)); /* whitespace must follow `not` */\n@media (768px \u003c = width \u003c 1200px); /* cannot have a space between `\u003c` and `=` */\n```\n\n## Install\n\nThis package is available from the `npm` registry.\n\n```sh\nnpm install media-query-parser\n```\n\n## Usage\n\nSupports JavaScript + TypeScript:\n\n```ts\nimport { parseMediaQuery } from \"media-query-parser\";\n\nconst mediaQuery = parseMediaQuery(\"screen and (min-width: 768px)\");\nif (!isParserError(mediaQuery)) {\n  console.log(mediaQuery);\n  // {\n  //   _t: \"query\",\n  //   type: \"screen\",\n  //   condition: {\n  //     _t: \"condition\",\n  //     op: \"and\",\n  //     nodes: [\n  //       {\n  //         _t: \"in-parens\",\n  //         node: {\n  //           _t: \"feature\",\n  //           context: \"value\",\n  //           feature: \"min-width\",\n  //           value: {\n  //             _t: \"dimension\",\n  //             value: 768,\n  //             unit: \"px\",\n  //           },\n  //         },\n  //       },\n  //     ],\n  //   },\n  // }\n  // // start/end omitted for brevity\n\n  console.log(stringify(mediaQuery.condition));\n  // \"(min-width: 768px)\"\n}\n```\n\nCan also be imported via `require(\"media-query-parser\")`.\n\n### [**v3 (Current) Docs**](https://tbjgolden.github.io/media-query-parser/)\n\n###### [_v2 API docs_](https://github.com/tbjgolden/media-query-parser/tree/v2.0.2/docs/api#functions)\n\n## Libraries that use this\n\n- [`media-query-solver`](https://github.com/tbjgolden/media-query-solver) - Solve media queries (and\n  detect useless ones!)\n\n## Node versions\n\nThis source code of this library supports `node \u003e=6.5.0` via `require()` and\n`node \u003e=16.0.0 || ^14.13.1` via import. (Below v6.5.0 is possible but you'd need to transpile the\nCommonJS code from ES6 yourself)\n\n## Contributing\n\n- PRs welcome and accepted, simply fork and create\n- Issues also very welcome\n- Treat others with common courtesy and respect 🤝\n\nDev environment (for contributing) requires:\n\n- node \u003e= 16.14.0\n- npm \u003e= 6.8.0\n- git \u003e= 2.11\n\n## Licence\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftbjgolden%2Fmedia-query-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftbjgolden%2Fmedia-query-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftbjgolden%2Fmedia-query-parser/lists"}