Closed stevepiron closed 4 years ago
Hi @stevepiron
thanks for reporting this issue!
The problem is I've only considered rules within @media
and not atRules (such as @supports
).
Seems my addToAtRules
method needs some rework. I'll try to do this on the weekend.
p.s.
would be awesome if you gave the plugin a github star 😉
Brief update: as this requires a rework of how the CSS is internally saved I'm going to move the @supports
support to the next major release (2.0.0)
Alright, thanks!
Meanwhile, a workaround is to have @media
wrapped by @supports
instead of the other way around. Like so:
@supports (display: grid) {
@media screen only and (min-width: 50em) {
grid-template-columns: 2fr repeat(3, 1fr);
}
}
@media screen only and (min-width: 50em) {
@supports (display: grid) {
grid-template-columns: 2fr repeat(3, 1fr);
}
}
Documenting an additional scenario that breaks the CSS output as well:
/**
* 1. Fallback
* 2. Firefox
* 3. Other browsers that support env() and max()
*/
.o-wrapper {
padding: 0 2rem; /* [1] */
@supports (padding:calc(constant(safe-area-inset-left))) { /* [2] */
padding-left: calc(2rem + constant(safe-area-inset-left));
padding-right: calc(2rem + constant(safe-area-inset-right));
}
@supports (padding:calc(max(0px))) { /* [3] */
padding-left: calc(max(2rem, env(safe-area-inset-left)));
padding-right: calc(max(2rem, env(safe-area-inset-right)));
}
@media screen only and (min-width: 50em) { /* [1] */
padding-left: 5rem;
padding-right: 5rem;
}
@supports (padding:calc(constant(safe-area-inset-left))) { /* [2] */
@media screen only and (min-width: 50em) {
padding-left: calc(5rem + constant(safe-area-inset-left));
padding-right: calc(5rem + constant(safe-area-inset-right));
}
}
@supports (padding:calc(max(0px))) { /* [3] */
@media screen only and (min-width: 50em) {
padding-left: calc(max(5rem, env(safe-area-inset-left)));
padding-right: calc(max(5rem, env(safe-area-inset-right)));
}
}
}
The idea here is to introduce safe-area-inset-left
and safe-area-inset-right
for gutters when browsing a site in landscape mode on a device featuring a notch (example: iPhone X).
I've tried the "workaround" I found and wrote about in my previous comment which is wrapping the media query with @supports
(instead of doing it the other way around) but it doesn't seem to work when multiple @supports
are used within the same file.
With such an input, here's the output I get:
.o-wrapper {
padding: 0 2rem;
padding-left: calc(max(2rem, env(safe-area-inset-left)));
padding-right: calc(max(2rem, env(safe-area-inset-right)));
}
@media only screen and (min-width: 50em) {
.o-wrapper {
padding-left: 5rem;
padding-right: 5rem
}
.o-wrapper {
padding-left: calc(5rem + constant(safe-area-inset-left));
padding-right: calc(5rem + constant(safe-area-inset-right))
}
.o-wrapper {
padding-left: calc(max(5rem,env(safe-area-inset-left)));
padding-right: calc(max(5rem,env(safe-area-inset-right)))
}
}
☝️@supports
are removed.
With a regular CSS input, I still don't get a good result:
/**
* 1. Fallback
* 2. Firefox
* 3. Other browsers that support env() and max()
*/
.o-wrapper {
padding: 0 2rem; /* [1] */
}
@supports (padding:calc(constant(safe-area-inset-left))) { /* [2] */
.o-wrapper {
padding-left: calc(2rem + constant(safe-area-inset-left));
padding-right: calc(2rem + constant(safe-area-inset-right));
}
}
@supports (padding:calc(max(0px))) { /* [3] */
.o-wrapper {
padding-left: calc(max(2rem, env(safe-area-inset-left)));
padding-right: calc(max(2rem, env(safe-area-inset-right)));
}
}
@media only screen and (min-width: 50em) { /* [1] */
.o-wrapper {
padding-left: 5rem;
padding-right: 5rem;
}
}
@supports (padding:calc(constant(safe-area-inset-left))) { /* [2] */
@media only screen and (min-width: 50em) {
.o-wrapper {
padding-left: calc(5rem + constant(safe-area-inset-left));
padding-right: calc(5rem + constant(safe-area-inset-right));
}
}
}
@supports (padding:calc(max(0px))) { /* [3] */
@media only screen and (min-width: 50em) {
.o-wrapper {
padding-left: calc(max(5rem, env(safe-area-inset-left)));
padding-right: calc(max(5rem, env(safe-area-inset-right)));
}
}
}
.o-wrapper {
padding: 0 2rem;
/* [1] */
}
@supports (padding: calc(constant(safe-area-inset-left))) {
/* [2] */
.o-wrapper {
padding-left: calc(2rem + constant(safe-area-inset-left));
padding-right: calc(2rem + constant(safe-area-inset-right));
}
}
@supports (padding: calc(max(0px))) {
/* [3] */
.o-wrapper {
padding-left: calc(max(2rem, env(safe-area-inset-left)));
padding-right: calc(max(2rem, env(safe-area-inset-right)));
}
}
@supports (padding: calc(constant(safe-area-inset-left))) {
/* [2] */
}
@supports (padding: calc(max(0px))) {
/* [3] */
}
@media only screen and (min-width: 50em) {
.o-wrapper {
padding-left: 5rem;
padding-right: 5rem
}
.o-wrapper {
padding-left: calc(5rem + constant(safe-area-inset-left));
padding-right: calc(5rem + constant(safe-area-inset-right))
}
.o-wrapper {
padding-left: calc(max(5rem,env(safe-area-inset-left)));
padding-right: calc(max(5rem,env(safe-area-inset-right)))
}
}
@stevepiron it has taken a while... but now it should work for you (when you place @supports
in @media
)
@SassNinja I've received a bunch of notifications about it 😄 Thank you for fixing that!
Hi,
@supports
queries in with@media
queries are not found in the output.If using
@supports
queries only (for the mobile stylesheet) the output is fine, but combined with@media
queries, they disappear.Could you please have a look at that?