Multiple @extend rules in the same block don't process the second @extend correctly

[jzarzeckis]

%foo {
  right: 0;
}

%bar {
  left: 0;
}

.baz {
  @extend %foo;
  @extend %bar;
}

Worked in 2.0.0, but doesn't generate correctly on 3.0.0.

[gnimmelf]

No nagging, but I had a go at this, and it's way above my head =/ so I hope someone else sees the need for this in the near future and has a go at it.

Cheers!

Edit: I made a pull request and now my wife is not happy for me spending the evening at it.

[kongxiangyan]

@jzarzeckis @gnimmelf Just use @extend like this:

%foo {
  right: 0;
}

%bar {
  left: 0;
}

.baz {
  @extend %foo, %bar;
}

And by the way, you can only use @extend at your first line of rules, following is not allowed:

%foo {
  right: 0;
}

%bar {
  left: 0;
}

.baz {
  top: 0;
  @extend %foo, %bar;
}

[gnimmelf]

@kongxiangyan where were you a week ago? Anyway, much appreciated, so thanks.

@jonathantneal The @extend draft is still a bit lacking, so I'll leave the PR for you to decide.

[hitendra-ap]

Hello @gnimmelf , @kongxiangyan, @jonathantneal

Thanks for the discussion above. It was really helpful.

But do you know @extend rule does not work for child classes.

For example :-

%foo {
  right: 0;
}

%bar {
  left: 0;
}

.baz {
    .child {
        @extend %foo, %bar;
    }
}

.baz > .child css class does not have foo and bar css props

[hitendra-ap]

Ah, after spending time on debugging. I found that the above issue^ is fixed in 4.0.0v. Thanks