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?

[ghost]

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

[sidolov]

Hi @damiandawber. Thank you for your report.
The issue has been fixed in #16959 by @tejash-wagento in 2.2-develop branch
Related commit(s):

• 9a95c6645d5cad32b8315084df86d832132a5a95

The fix will be available with the upcoming 2.2.6 release.

[sidolov]

Hi @damiandawber. Thank you for your report.
The issue has been fixed in #17240 by @tiagosampaio in 2.1-develop branch
Related commit(s):

• b957e32368fc27b804b4bcc3dc2c283d0aeb14b5

The fix will be available with the upcoming 2.1.15 release.

[magento-engcom-team]

Hi @damiandawber. Thank you for your report.
The issue has been fixed in #17209 by @torhoehn in 2.3-develop branch
Related commit(s):

• 647f2fa5c3e55d84d494fe7ffc7442c04cdae3c1

The fix will be available with the upcoming 2.3.0 release.