# css-mediaquery

> Parses and determines if a given CSS Media Query matches a set of values.

Latest version **0.1.2** (published 2014-01-21) · BSD license · 0 weekly downloads

## Install

```sh
npm install css-mediaquery
pnpm add css-mediaquery
yarn add css-mediaquery
bun add css-mediaquery
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2014-01-21 |
| First published | 2014-01-08 |
| Weekly downloads | 0 |
| License | BSD |
| TypeScript types | separate (@types/css-mediaquery) |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 116 |
| Author | Eric Ferraiuolo |
| Maintainers | ericf |
| Keywords | css, media, query, mediaquery, mobile, parse, match |

## Links

- npm: https://www.npmjs.com/package/css-mediaquery
- Repository: https://github.com/ericf/css-mediaquery
- Issues: https://github.com/ericf/css-mediaquery/issues
- npm.io page: https://npm.io/package/css-mediaquery

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2014-01-21
- 0.1.1 — 2014-01-09
- 0.1.0 — 2014-01-09
- 0.0.0 — 2014-01-08

## README

CSS Media Query
===============

[![Build Status](https://travis-ci.org/ericf/css-mediaquery.png?branch=master)](https://travis-ci.org/ericf/css-mediaquery)
[![Dependency Status](https://gemnasium.com/ericf/css-mediaquery.png)](https://gemnasium.com/ericf/css-mediaquery)
[![npm Version](https://badge.fury.io/js/css-mediaquery.png)](https://npmjs.org/package/css-mediaquery)

Parses and determines if a given CSS Media Query matches a set of values via
JavaScript.

Installation
------------

Install via npm:

```shell
$ npm install css-mediaquery
```

Usage
-----

This package has two exports: `parse()`, and `match()` which can parse CSS Media
Queries and determine if a media query matches a given set of values.

### Matching

The `match()` method lets you compare a media query expression with a JavaScript
object and determine if a media query matches a given set of values.

```javascript
var mediaQuery = require('css-mediaquery');

var isMatch = mediaQuery.match('screen and (min-width: 40em)', {
    type : 'screen',
    width: '1024px'
});

console.log(isMatch); // => true
```

The values specified to check a media query string against should be thought of
as if they are the current state of a device/browser. A `type` value _must_ be
specified, and it can _not_ be `"all"`.

### Parsing

Existing CSS Parsers don't do a great job at parsing the details of media
queries. That's where `css-mediaquery` shines. You can parse a media query
expression and get an AST back by using the `parse()` method.

```javascript
var mediaQuery = require('css-mediaquery'),
    ast        = mediaQuery.parse('screen and (min-width: 48em)');
```

The `ast` variable will have the following payload:

```javascript
[
    {
        inverse: false,
        type   : 'screen',

        expressions: [
            {
                modifier: 'min',
                feature : 'width',
                value   : '48em'
            }
        ]
    }
]
```

This package was written with care to following the W3C Recommendations for
[CSS3 Media Queries][w3c-mq] and [CSS3 Values and Units][w3c-vu]. It supports
all of the [Media Features][w3c-mq-features] and will properly convert values to
a common unit before comparing them.


[w3c-mq]: http://www.w3.org/TR/css3-mediaqueries/
[w3c-mq-features]: http://www.w3.org/TR/css3-mediaqueries/#media1
[w3c-vu]: http://www.w3.org/TR/css3-values/


License
-------

This software is free to use under the Yahoo! Inc. BSD license.
See the [LICENSE file][] for license text and copyright information.


[LICENSE file]: https://github.com/ericf/css-mediaquery/blob/master/LICENSE

---
_Source: https://npm.io/package/css-mediaquery · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._