Mobile device style groups incorrect order in _responsive.less

[damiandawber]

Style groups for mobile devices (max-width) are specified in the wrong order.

In lib/web/css/source/lib/_responsive.less the style groups run breakpoint-size ascending: 319px, 479px, 639px, 767px, which leads to outputting max-width media queries breakpoint-size ascending - the last-defined breakpoint overrides smaller screen size breakpoints...

Preconditions

Magento 2.2

Steps to reproduce

Specify styles referencing max media widths

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
        .logo {
            max-width: 165px;
        }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
        .logo {
            max-width: 140px;
        }
}

Expected result

CSS should be output as follows:

@media only screen and (max-width: 639px) {
  .logo {
    max-width: 165px;
  }
}
@media only screen and (max-width: 479px) {
  .logo {
    max-width: 140px;
  }
}

Actual result

CSS is output as follows:

@media only screen and (max-width: 479px) {
  .logo {
    max-width: 140px;
  }
}
@media only screen and (max-width: 639px) {
  .logo {
    max-width: 165px;
  }
}

The last-defined breakpoint takes precedence over the 479px breakpoint even at screen sizes <= 479px.

[pemann]

@magento-engcom-team Any progress on this one?

HI @damiandawber thank you for your report.
We've acknowledged the issue and added to our backlog.