Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug in min-width and max-width matching with em values #17

Open
kimmobrunfeldt opened this issue Jan 9, 2019 · 2 comments
Open

Bug in min-width and max-width matching with em values #17

kimmobrunfeldt opened this issue Jan 9, 2019 · 2 comments

Comments

@kimmobrunfeldt
Copy link

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.

@kimmobrunfeldt
Copy link
Author

It seems to work when wrapping the whole expression with parentheses like this:

> css.match('(screen and (min-width: 48em))', { width: '48em' })
true

@kristerkari
Copy link

kristerkari commented Jan 26, 2019

Your example is not working because this library uses all as the default type:

> css.match('(min-width: 48em)', { width: '48em' })
true
>  css.match('all and (min-width: 48em)', { width: '48em' })
true

You can get your example to return true if you pass screen as the type:

> css.match('screen and (min-width: 48em)', { width: '48em', type: 'screen' })
true

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants