media-query-fns

media-query-fns

Functions to read media queries from a string/ast and:

• Check if a media query is true for a custom environment
  • Backed up by hundreds of unit tests
• Converts a media query to a human friendly description

Based on media-query-parser which means:

• parses any correct CSS media queries
• spec-compliant everything - https://www.w3.org/TR/mediaqueries-5/ (as of 2022-12-04)
• TypeScript friendly
• all valid queries parsed and interpreted, even newer syntax like @media (100px < width < 200px) or complex ones like @media not screen and ((not (update: none)) and (prefers-reduced-motion: reduce))

Quickfire examples

import { compileQuery, matches, toEnglishString } from "media-query-fns";

// returns data that can be used to interpret the query
const maxWidthQuery = compileQuery(`@media (max-width: 1200px)`);
// (throws if invalid query syntax)

const testEnv = (widthPx = 1280, heightPx = 800) => ({
  widthPx,
  heightPx,
  deviceWidthPx: widthPx,
  deviceHeightPx: heightPx,
  dppx: 2,
});
console.log(matches(maxWidthQuery, testEnv(1280))); // false
console.log(matches(maxWidthQuery, testEnv(1000))); // true

const complexQuery = compileQuery(
  `@media screen and (monochrome) and (orientation)`
);
console.log(matches(complexQuery, testEnv()));
// true

console.log(toEnglishString(maxWidthQuery));
// 'if width ≤ 1200px'
console.log(toEnglishString(complexQuery));
// 'if (is screen AND monochrome)'
// note: (orientation) without "landscape" or "portrait" is always true, so it's removed for brevity

Considerations & Caveats

This library doesn't support calc because it follows the spec.

Many browsers do support calc to some extent, but they probably shouldn't as it opens up a Pandora's box of nasty edge cases that would lead to browser inconsistencies (without a spec to unify them, anyway).

Installation

npm install media-query-fns --save
# yarn add media-query-fns

License

MIT