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-4/
• 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 (monochrome))

Quickfire examples

import { compileQuery, matches } from "media-query-fns";
const query = compileQuery(`@media (max-width: 1200px)`);
const env = (widthPx: number) => ({
  widthPx,
  heightPx: 800,
  dppx: 2,
  deviceWidthPx: 1280,
  deviceHeightPx: 800,
});
console.log(matches(query, env(1280) }));
// false
console.log(matches(query, env(900) }));
// true

Considerations & Caveats

This library:

• converts units to a base unit (px for lengths, dppx for resolution, hz for frequency)
  • there's currently no way to pass in how special units like rem and vw should be converted to px
• doesn't support calc - following the spec
  • many browsers do support calc, but they probably shouldn't - not just because of the spec but because it opens up a Pandora's box of nasty edge cases

Finally, this behavior is currently not supported in matches:

If a media feature references a concept which does not exist on the device where the UA is running (for example, speech UAs do not have a concept of “width”), the media feature must always evaluate to false.

Installation

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

License

MIT