A possible bug (or a misunderstanding of the API)

I just started using this lib and I’m a little bit confused by the API. The docs give two examples with the md breakpoint and the up and down functions respectively. The first example seems clear to me: ${up('md')} translates to @media (min-width: 768px). But in the second example, ${down('md')} translates to @media (max-width: 991.98px) whereas I would have expected @media (max-width: 767.98px) (also see the screenshot below). On a given viewport width of 800px, both useBreakpoint(up('md')) and useBreakpoint(down('md')) return true at the same time. Maybe I’m understanding the API wrong, but shouldn’t they be mutually exclusive? I’d expect the latter to be false. Merry Christmas and thank you in advance for your help 🙏

[pierreburel]

Hey, i’m afraid i have to agree with @SyFlo: the API for down feels weird, especially since it’s not how Bootstrap works.

bootstrap:

@include media-breakpoint-down(md) = @media (max-width: 767.98px) (= down("sm")) @include media-breakpoint-up(md) = @media (min-width: 768px)

styled-breakpoints:

down("md") = @media (max-width: 991.98px) (= @include media-breakpoint-down(lg)) up("md") = @media (min-width: 768px)

Here’s a (crude) demo showing the differences: https://codesandbox.io/s/angry-boyd-vfn1k

There’s also a difference with between.

bootstrap: @include media-breakpoint-between(sm, md) = @media (min-width: 576px) and (max-width: 767.98px)
styled-breakpoints: between("sm", "md") = @media (min-width: 576px) and (max-width: 991.98px)

But tbh i don’t really know how you could possibly align with Bootstrap without breaking changes… or maybe by providing alternative downInclusive and betweenInclusive methods (sorry i’m not good at naming things)?

[SyFlo]

@mg901 Thank you for your answer and sorry for the delay, I’ve been away from keyboard over the last few days. Sure, I can work with that.