Add overlap between screens

[felipefialho]

Hi, first I would like to thank you for this project 😊

My issue is about overlap between screens, for now we have some problems about it, for example:

${media.lessThan("medium")`
  /* screen width is less than 768px (medium) */
  background: red;
`}

${media.greaterThan("medium")`
   /* screen width is greater than 768px (medium) */
  background: blue;
`}

The both examples will be happens if screen is exactly 768px.

Maybe a good ideia is use an approach like the Rupture.

Thanks!

[polarathene]

As this project does not seem to be actively maintained anymore(no new commit in over a year and PRs not being handled), you might want to try an alternative project like styled-breakpoints?

[felipefialho]

Thanks @polarathene

[morajabi]

@polarathene this project does its job well, thus no need for furthur changes, except for bug fixes like this one. I'd be happy to merge PRs or give anyone interested access to maintain.

@felipefialho Do you want to try fix it and PR? 😃

[polarathene]

@morajabi ah sorry, I thought from glancing over the project that it was no longer being maintained. I haven't looked over the source personally, your project also got archived on awesome styled-components due to the inactivity it seems.

As for the project itself, the API/syntax is perhaps not as appealing as some alternatives. They're using up/down for min/max width queries, and are meant to refer to the direction of the starting range. Then there is between for an "and" query of min/max width between two breakpoints. Lastly an only method covers the range of a breakpoint up until just before the next one, which avoids overlap(between does the same, at least for styled-breakpoints). Seems you opted for up/down alternatives that were more obvious/readable in functionality(albeit they're more of lte/gte than lt/gt).

Only placing the query in the template literal JS expression, is not as terse as this project, but tends to get better syntax highlighting for CSS?(issue on styled-media-helper has a screenshot showing that). I can see that this is not always an issue depending on plugin/extension support for enabling the highlighting.