ericf / css-mediaquery Goto Github PK

I get an incorrect AST when I enter a media query without any expressions (basically anything of this format):

media_query: [[only | not]? <media_type> 

For example:

console.log(mediaquery.parse('not screen'));

/*
logs out
[ { inverse: false, type: 'all', expressions: [] } ]
*/

This should really be:

[ { inverse: true, type: 'screen', expressions: [] } ]

var mq = require('css-mediaquery');
mq.parse('only screen and (min-width: 950px)')

[{  
    "inverse": false,
    "type": "screen",
    "expressions": [{  
        "modifier": "min",
        "feature": "width",
        "value": "950px"
    }]
}]

which means the 'only' clause is just ignored, so data is lost and mediaquery cannot be rebuilt (related to #13)

We want to be able to check to see if a media query has the only keyword. IE8 can use it to ignore certain MQs.

We noticed a strange behavior when trying to do matches. Issue demostrated below:

> const css = require('css-mediaquery')
undefined
> css.match('screen and (min-width: 48em)', { width: '48em' })
false
> css.match('screen and (max-width: 48em)', { width: '48em' })
false

I think these both should return true. That's how Chrome matchMedia()works when tested.

I'd love to see this library get updated, as it's in fairly regular use and hasn't been touched in 9 years. In particular, I'm trying to parse a media query using prefers-reduced-motion and hitting an error. I notice that there is an (archived) fork of the repo which handles this so it should be possible.

If you don't have the capacity to continue working on this, is it possible to consider transferring package ownership/publishing rights to somebody else who would be willing to take this on?

In contrast to other media features, color-gamut and any-pointer can match multiple values at the same time. For example, if the user display supports DCI-P3, the following expressions will match:

• (color-gamut: p3)
• (color-gamut: srgb) (because DCI-P3 includes sRGB, so if a monitor supports DCI-P3, it does support sRGB)

And the following won't:

• (color-gamut: rec2020)

In order to support this feature, the match function shall either take multiple values for a mocked property or have a built-in knowledge about these features (not applicable to any-pointer).

It will be handy if the library supports arbitrary media features. It will make it future proof (allow to use with forthcoming media features without updating).

The features at https://github.com/ericf/css-mediaquery/blob/master/index.js#L67-74
does not handle the following case (one or both expressions without an value) on the correct way:

mediaQuery.match('screen and (color)', {
  type : 'screen',
  color: 8
});

See http://www.w3.org/TR/css3-mediaqueries/#color

One possible approach might be this (@ericf, -1 and -1 returns true – but a specified cannot be negative, in general!?):

expValue = !isNaN(expValue) ? parseInt(expValue, 10) : value > 0 ? value : 1;
value = !isNaN(value) ? parseInt(value, 10) : expValue > 0 ? expValue : 0;

I am using css-mediaquey to manipulate a media query rule, so I need to parse and write back the query.

There is no serialize method included so far but I believe it could be in the scope of this library. If you are willing to include such functionality I'll happily provide a pull request. Let me know if there are any constraints on naming or scope.

Module has a wrong SPDX identifier as the "license" field in "package.json".
According to spdx list "BSD" is not a valid spdx identifier.

did you published the last version on npm?

When I run npm install css-mediaquery I get an old code. The package.json shows 0.1.2 version but the code is from 0.1.1.

For example, the commit d1413c5 is not present.

Two samples which fail to parse:

@media (-o-min-device-pixel-ratio: 3 / 2) {
    body { background: url('hd-background.png'); }
}

@media (-webkit-min-device-pixel-ratio: 1.5),
    (min--moz-device-pixel-ratio: 1.5),
    /* Opera Device Pixel ratio not supported by css-mediaquery 0.1.2 */
    /* (-o-min-device-pixel-ratio: 3 / 2), */
    (min-device-pixel-ratio: 1.5) {
    body { background: url('hd-background.png'); }
}

This works:

@media (min-device-pixel-ratio: 1.5) {
    body { background: url('hd-background.png'); }
}

(max-width: calc(100px - 1px)) throws an error on the v0.1.2

I believe that the unit multiplier is incorrect:

https://github.com/ericf/css-mediaquery/blob/master/index.js#L176

Currently, it's specified as 72, converting 72pts/in -> 96px/in, we get (4/3)px/pt

Did I goof up units?

i like your latest changes for strict parsing. do you plan a new npm release with this changes soon?