Nested @media rules are not optimized in a spec compliant way #247
Description
We do use quite a lot of mixins to keep things consistent, most important generating CSS for different viewport sizes and font styles. For some reason this trips the SCSS compiler, yielding strange rules that do not break anything, but are simply useless.
input.scss
@mixin wcfFontSmall {
font-weight: 400;
@include screen-md-up {
font-size: 13px;
}
@include screen-sm-down {
font-size: 12px;
}
}
@mixin screen-sm-down {
@media screen and (max-width: 768px) {
@content;
}
}
@mixin screen-md-up {
@media screen and (min-width: 769px), print {
@content;
}
}
.someElement {
color: white;
}
.someElement {
.fancyElement {
@include screen-md-up {
background-color: lime;
@include wcfFontSmall;
}
@include screen-sm-down {
background-color: crimson;
}
}
}
Result
I have tested v1.1 and v1.3 and both versions yield the same strange result:
PS C:\inetpub\wwwroot\test\scssphp-1.3\bin> Get-Content .\input.scss | php .\pscss
.someElement {
color: white; }
@media screen and (min-width: 769px), print {
.someElement .fancyElement {
background-color: lime;
font-weight: 400; } }
@media screen and (min-width: 769px) and (min-width: 769px), print {
.someElement .fancyElement {
font-size: 13px; } }
@media screen and (min-width: 769px) and (max-width: 768px) {
.someElement .fancyElement {
font-size: 12px; } }
@media screen and (max-width: 768px) {
.someElement .fancyElement {
background-color: crimson; } }
Rule 2 is quite strange and should be (logically) merged with rule 1.
Rule 3 will never match.