Down-Transpile Media Query Range Syntax to min- and max-?

[karlhorky]

Hi there, first of all, thanks for the continued work on Stylis! Very essential to the CSS-in-JS ecosystem.

Just learned about the Media Query Range Syntax, looks great:

/* This...
@media (min-width: 400px) {}
/* ...can now be replaced by this: */
@media (width >= 400px) {}

Since Chrome 104 and Firefox 63 have support for this, it would be nice to be able to use the new syntax out of the box with no plugins (eg. in Emotion) while still supporting older browsers.

Currently, Stylis leaves these media queries untouched, which means they will only work in these (limited) supporting browsers.

Maybe Stylis could parse these new type of media queries and emit the old min- and max- syntax?

Alternatives Considered

Leave it to the community to create a Stylis plugin for this (is there a centralized place where Stylis plugins can be found / requested? there wasn't much coming up in my searches...)

Prior art

The PostCSS ecosystem has a plugin for this over here: https://github.com/postcss/postcss-media-minmax

cc @Andarist

[Andarist]

Leave it to the community to create a Stylis plugin for this (is there a centralized place where Stylis plugins can be found / requested?

I don't think so. Writing plugins is also quite involved - although a simple plugin to replace one pattern like this with another wouldn't have to be that bad.