In regular CSS you can use a comma to separate two or more media query rules:
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
But doing the same with modules-values causes a break:
@value desktopQuery from "styles/variables/breakpoints.css";
@value tabletQuery from "styles/variables/breakpoints.css";
@media desktopQuery, tabletQuery { ... }
Looking at the compiled CSS, only the last value is properly inserted into the document:
@media i__const_desktopQuery_50, (min-width: 769px) and (max-width: 1024px) { ... }
Is there some syntax that I'm missing. I realize that it is not possible to set multiple values on a single line but is there some workaround for this use case?
In regular CSS you can use a comma to separate two or more media query rules:
But doing the same with modules-values causes a break:
Looking at the compiled CSS, only the last value is properly inserted into the document:
Is there some syntax that I'm missing. I realize that it is not possible to set multiple values on a single line but is there some workaround for this use case?