merge libs?

[yocontra]

Hey there -

Your lib looks cool, I want to use it instead of some stuff I wrote for react-responsive

Here is my stuff:

https://github.com/wearefractal/react-responsive/blob/master/src/toQuery.js

I think negation might be the only missing feature from json2mq - want to have a look at the code and see if there are any other gaps?

[akiran]

Hey,

Its cool. Let us discuss to cleanup API.

The main difference between toQuery.js and json2mq now is
json2mq turns {type: 'screen' , maxWidth: 1200} -> 'screen and (max-width: 1200px)'
toQuery turns {screen: true, maxWidth: 1200} -> 'screen and (max-width: 1200px)'
Am I right ?

In addition to not keyword , media query also support only keyword . How should we handle it ?

I introduced type in json2mq because I am doubtful whether
{screen: true} should turn into'screen'or 'only screen'.

With type users can add not and only keywords in string format
{type: 'only screen'}
{type: 'screen and not (handheld)'} etc.

What do you think ?

[yocontra]

@akiran I think that only and not are details of the media query that the user shouldn't need to know about. The whole idea is to hide that ugliness away from the user so they can stick to what they already know, JSON - right?

[akiran]

@contra, I agree. It would be nice if every thing is in JSON.

API for not keyword is straight forward.
{handheld: false} turns into not (handheld)

API for only keyword is slightly tricky.
{screen: true} should it turn into 'screen' or 'only screen'
Any ideas for solving this ?

[yocontra]

@akiran What exactly does the only keyword do?

[akiran]

From this article

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles

From what I understand, only keyword is required for old browser support.
Can we ignore only for now and mention in the docs that json2mq supports only modern browsers ?

[yocontra]

@akiran So it doesn't actually change he behavior of a media query? That seems kind of silly...

[akiran]

Yes, at least that what I understood from that article.

[akiran]

from the css-tricks article

Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is

[yocontra]

@akiran I think we can ignore that, it doesn't seem like something in effect today

[akiran]

I will go ahead and make the changes .
API will be
{ screen: true, maxWidth: 1000} -> 'screen and (max-width: 1000px)'
{handheld: false, maxWidth: 1000} -> 'not handheld and (max-width: 1000px)'

[akiran]

@contra Made a 0.2.0 npm release
Checkout and let me know your feedback