Multiple class extension not working as expected - final styles generated in the wrong order

[Jerry John Jacob]

The order in which styles are generated seems to be incorrect when extending multiple styles. Consider the following case.

Here are my styles:

.decline {
    @extend .minus, .circle;
}

The extended styles simply add content to the before section of the icon.

And this is the HTML (just for reference):

<i class="decline icon"></i>

The target HTML I actually need is as follows:

<i class="minus circle icon"></i>

I cannot directly just add this since the decision of which styles to apply is governed by other logic. And so I used style extension to simplify this process.

The compiler however generates the following CSS:

i.icon.circle:before, i.icon.decline:before {
    content: "\f111";
}

i.icon.minus.circle:before, i.icon.decline:before {
    content: "\f056";
}

i.icon.minus:before, i.icon.decline:before {
    content: "\f068";
}

What I actually wanted was for the 2nd in the above generated list to be used. But it always ends up selecting the 3rd for the final style, regardless of any order in which I try to extend the styles. If I don't use SCSS and manually add the CSS styles after rearranging them so that the 2nd comes last in the ordering, I get what I need.

Is there something wrong with the way I'm doing it or is there an issue with extending multiple classes?

[Rafael Mendonça França]

This is a issue for the sass project.