Extended selectors wont compile correctly (with both regular and silent selectors)

[lmartins]

When you have something like:

%btn-style-default{
  background: green;
  &:hover{
    background: black;
  }
}

and extend this selector with:

button{
  @extend %btn-style-default;
}

should compile to:

button{
   background: green;
}
button:hover{
   backgroud: black
}

but instead it compiles to invalid (and obviously non-functional) css:

button {
  background: green; }
  %btn-style-default:hover {
    background: black; }

Any news on this?

[lmartins]

The only way I can get something similar is by using mixins, but that's far from ideal.

[HamptonMakes]

Just added a spec test for this example...
sass/sass-spec@8a6a1c3

[akhleung]

Referencing #80. This feature is difficult to implement completely, so I can't give an ETA yet.

[lmartins]

@akhleung Sure, I get it. Thanks for all the hard work, wish I was able to help here.

[lmartins]

Just to add to this issue, i've noticed that even regular selectors wont extend correctly:

.f-row--defaults{

  margin-bottom: 1.5em;

  &:last-child{
    margin-bottom: 0;
    border: 1px solid red;
  }

}

and then extend any selector with:
@extend .f-row--defaults;

It will only inerhit the base rule margin-bottom but not the child selector also declared on the selector used as extender.

[lmartins]

Sorry to ping this, but is there any estimation on when will this be available?

[mshwery]

+1. Really really incredibly important to the usefulness of sass.

[emagnier]

+1. Same for me.

[JohnONolan]

+1 this is a must-have

[akhleung]

We know this is an important feature and we're bumping up the priority on it ... it is, however, a very difficult feature to get completely right, but I'm hoping to consult with @nex3 in the near future to figure out how he did it in Ruby Sass.

[lmartins]

You guys are doing an awesome job. Thank your for that and for tolerating our impatience.
I just can't use Ruby Sass now.

[benfrain]

Just to echo everything Luis said :)

[benfrain]

I've just added a bounty for this. I like to think it will buy those involved a beer/hot beverage/cocktail of choice whenever this gets finished. https://www.bountysource.com/issues/1057456-extend-classes-wont-compile-correctly-with-both-regular-and-silent-selectors/bounties

[emagnier]

I also added a bounty for this one. Hope this will help :)

[akhleung]

Working on the feature right now. 100% compatibility with Ruby Sass's @extend implementation is a monumental task, but I think I can at least address the specific use-cases in these tickets before the holidays.

[emagnier]

Cool, that's great news! Thanks for all the hard work!

[dansowter]

Really appreciate the hard work on this, guys. I'm porting over https://github.com/net-engine/trove to use libsass, and this seems to be one of the last issues.

[akhleung]

Okay, the two examples given are now working correctly on the @extend branch, which I'll try to merge in a couple of days.

This is not to say that the feature is done -- far from it! I'm just trying to get it working one chunk at a time.

[jrabbe]

@akhleung is there a branch I can try to see if it works with our Sass?

[akhleung]

The new code is in the @extend branch. It's a bit messy, but it you should be able to build it with the default makefile (I haven't updated the automake stuff yet).

[lmartins]

Sorry to introduce some noise to the ticket comments but I just wanted to give thanks to @akhleung for the hard work.

[icasteleyn]

Just wanted to add another example where @extends doesn't work properly.
".Sub.myInherit" should be ".myInherit.Sub"

Scss

.myBase { 
    text-decoration: none; 
}

.myInherit{
    @extend .myBase;
    line-height: 1.6;
}

.myBase.Sub{
    color: #123456;
}

SassLib

.myBase, .myInherit {
  text-decoration: none; }

.myInherit {
  line-height: 1.6; }

.myBase.Sub, .Sub.myInherit {
  color: #123456; }

Ruby Sass

.myBase, .myInherit {
  text-decoration: none; }

.myInherit {
  line-height: 1.6; }

.myBase.Sub, .myInherit.Sub {
  color: #123456; }

[akhleung]

Interesting; I'll look into why the order gets mixed up. (At least the output is still semantically correct, if I'm not mistaken.)

[akhleung]

Oh, also, I should mention that I've merged what I have so far into master, so @extend should work a little better than before.

[jory]

I'd like to add: WOOOOOOOOOOOOOO!

[michaek]

@deezahyn There are now 35 extend tests that fail/error, but they're all rare edge cases, with the exception of 090_test_comma_extendee. That's the syntax that allows @extend a, b; as a shorthand for @extend a; @extend b;.

And please open new issues for those failing tests that turn out to be dealbreakers for you!

[bonfish]

Great news! Looking forward for the new version out, making it possible for me to move back from Ruby SASS.

One thing I gon't quite get. @uberska who earned all the praise as a developer - is not part of the Libsass team? And...

And big ups to @DealerDotCom who sponsored @uberska's development time on the project.

... means that this huge task was backed not only by one of the Top three biggest bounties on Bountysource?

[sintaxi]

This is wonderful. Thanks to all who helped make this happen.

+1 to EOL the Ruby implementation.

[jschulte]

@bonfish Good questions! @DealerDotCom sponsored the development work on this (devoted full time employees to work on it for weeks!) because it is valuable for our development process efficiency. @uberska and @jaddessi had a lot of prior C++ experience, so they did the lion's share of the development work. @michaek and I helped with writing tests, fixing a few bugs and validating their work. It was a really fun project to work on and we're thrilled that it's available for others to enjoy!

[bonfish]

@jschulte that sounds very inspiring! Thank you so much for your work!

One more question, if I may: is there a list of tests somewhere in the public, that at-extend is still uncapable of passing? Just to get the view of what constructs to evade in advance.

[renaudleo]

<3

[antoinelyset]

🎉

[dilrajahdan]

Excellent Work!

[pkyeck]

thanks for the hard work. 🎉

@hcatlin which commit closed this issue? I'm still getting wrong output from node-sass although they updated their dependencies some days ago ...

[michaek]

The node-sass project will be doing a release once libsass has its 3.0.0 release. In the meantime, it is possible to build node-sass (and thus use it) following the instructions here: https://github.com/sass/node-sass#rebuilding-binaries That said, it's not exactly for the faint of heart!

[michaek]

These are not all relevant to everyone, but the work on this issue has now been released where most consumers can "just use it":

libsass 3.0.0 is released
node-sass 1.0.0 is released
grunt-sass 0.16.0 is released
gulp-sass 1.2.0 is released

[paulirish]

Impressed with the coordination across projects such they all release the same day! Nice work to @hcatlin and all the maintainers for making this nice for all users. :D

[sandstrom]

Awesome!! ⛵

[gorilas]

It has been amazing what happened!!!! Thanks to everyone. Hurra y Viva!!!!

[jbeja]

Omg, I can't believe this is finally solve. Thanks to everyone from the bottom of my heart <3.

[ldexterldesign]

Apologies for the noise folks, but hoping someone will more knowledge can help me?:
sindresorhus/grunt-sass#162

Yours hopefully,

[dreamyguy]

Just had to say my thanks to this fix! Life-saver, just in time! ❤️