Edge case: rules not applied in the right order

[ZeeCoder]

Consider the following CSS:

.Block {
  background: black;

  @condition (width >= 100px) {
    background: green;
  }

  &--blue {
    @condition (width >= 100px) {
      background: blue;
    }
  }
}

Assuming there's a .Block and .Block .Block--blue element, both buttons will switch to green if wider than 100px. This is because as the algorithm resolves the styles, it get's to the following query in the JSON:

{
    "selector": ".Block",
    "queries": [{
        "conditions": [
            [
                ["width", ">=", 100]
            ]
        ],
        "elements": [{
            "selector": ".Block",
            "styles": {
                "background": "green"
            }
        }]
    }{
        "conditions": [
            [
                ["width", ">=", 100]
            ]
        ],
        "elements": [{
            "selector": ".Block--blue",
            "styles": {
                "background": "blue"
            }
        }]
    }]
}

Since the algorithm resolves from back-to-front, it'll first apply .Block--blue's, then .Block's styles.

That's how the green background gets applied last.

[ZeeCoder]

It would also be beneficial if such conditions got grouped, instead of let separated like in the example. (Won't solve this issue, but at least saves some bytes.)