Short syntax mediaquery utility?

There are various custom mediaquery syntaxes out there within container/element queries libs having syntaxes like 100px <= width < 500px and so on, but does anyone know of an utility that only focuses on expanding short custom media queries into full queries that can then be passed to matchMedia or be used together with Styled Components?

I tried to have a look at NPM, but didn't really find anything that would focus on this specific issue.

Comments

[Vesa Piittinen]

Okay, there hasn't been much activity here, but here is something I made last night.

You can write:

'width: >=500px <1000px'
-> '(min-width: 500px) and (max-width: 999px)'

And you can config it a lot so you can get something usable with Styled Components:

const breakpoints = { s: '360px', m: '480px', l: '640px', xl: '960px' }
// or: { s: 360, m: 480, l: 640, xl: 960 }
const screen = new compactMediaQuery({ breakpoints, prefix: '@media screen' })

screen('width: >=m <xl')
// '@media screen and (min-width: 480px) and (max-width: 959px)'

const Component = styled.div({
    [screen('width: >=m <xl')]: {
        // styles that work from M and above, but below XL
    }
})

This is just a thing I assumed would already be solved by someone, but so far breakpoint tools seem to mostly focus to doing traditional mobile-first where you have only min-width based queries, and if you have max-width then you have to write more code.