PostCSS plugin changing the Stylus-compatible irregular container queries syntax to the regular one.
npm install postcss-normalize-stylus-compatible-container-query-syntaxcontainer media type to regular container queries.
@media container and (/ ... /)@media container and (/ ... /), container and (/ ... /)container media type, but it is the workaround for Stylus pre-processor which
bash
npm install postcss postcss-normalize-stylus-compatible-container-query-syntax
`
Examples
$3
`css
/ Stylus-compatible workaround /
@media container and (min-width: 600px) {
.a { display: grid; }
}
.card { padding: 1rem; }
@media container and (min-width: 30rem) {
.b { color: rebeccapurple; }
}
`
Will be transformed to:
`css
@container (min-width: 600px) {
.a { display: grid; }
}
.card { padding: 1rem; }
@container (min-width: 30rem) {
.b { color: rebeccapurple; }
}
`
$3
Sometimes you may need to express an OR relationship between container conditions while staying Stylus-compatible. If you write a comma-separated media query that repeats the container "type" and uses and for the second part, the plugin will convert it into a single @container rule joined with or.
`css
/ Stylus-compatible workaround producing an OR between two container queries /
@media container and (max-width: 99.98px), container and (max-height: 99.98px) {
.box { color: green; }
}
`
Will be transformed to:
`css
@container (max-width: 99.98px) or (max-height: 99.98px) {
.box { color: green; }
}
``