Style Order Bug When Using Breakpoints And atRules

[dtcblyth]

I think I may have found a bug when using breakpoints and atRules in the PHP style rendering. For example...

Imagine we have a title element named myTitle which has the class my_title. The title element uses the Font settings group. Imagine also that we have set a different color for the title element at each breakpoint (ie. desktop, tablet, phone).

When printing styles for this element we might do something like this:

$elements->style([
  'attrName' => 'myTitle',
]),

CommonStyle::style([ // <-- Some other style.
  'selector' => $orderClass,
  'property' => 'background',
  'attr'     => ['phone' => ['value' => 'red']], // <-- Notice we’re using a breakpoint.
]),

In this example, we would expect to see the following styles, and we do:

@media only screen and (max-width: 767px) {
  .my_module_0 .my_title {
    color: #7cdb24;
  }
}
@media only screen and (max-width: 980px) {
  .my_module_0 .my_title {
    color: #e09900;
  }
}
.my_module_0 .my_title {
  color: #e0281f;
}

However, if we flip the order of our PHP styles, so that the CommonStyle is declared before the $elements->style([...]), like this:

CommonStyle::style([
  'selector' => $orderClass,
  'property' => 'background',
  'attr'     => ['phone' => ['value' => 'red']],
]),

$elements->style([
  'attrName' => 'myTitle',
]),

... the styles are no longer printed in the correct order. As shown below, the tablet styles are now printed last and therefore override the phone styles:

@media only screen and (max-width: 980px) {
  .my_module_0 .my_title {
    color: #e09900;
  }
}
@media only screen and (max-width: 767px) { /* <-- Should be printed last. */
  .my_module_0 .my_title {
    color: #7cdb24;
  }
}
.my_module_0 .my_title {
  color: #e0281f;
}

Please note, the same problem occurs when using atRules, like this:

[[
  'atRules'     => '@media only screen and (max-width: 767px)',
  'selector'    => $orderClass,
  'declaration' => 'background: red;',
]],

$elements->style([
  'attrName' => 'myTitle',
]),