Extending placeholder selector with nested selector with &-suffix doesn't work

When using this placeholder selector (compare with mixin - https://gist.github.com/pepa-linha/43ffbce8e60d96e04c7bbe3d22923169)

%component {
  background: red;
  &-sub {
    background: orange;
  }
}

.Component {
    @extend %component;
}

I get this output

.Component {
    background: red;
}

but I would expect this output

.Component {
    background: red;
}

/* This selector is missing */
.Component-sub {
    background: orange;
}

[chriseppstein]

@thany First and foremost, you need to understand that the code that handles placeholders is the exact same code that handles all selectors because placeholders are a type of selector. Secondly, we have to consider use cases that are not built around component definitions using well defined naming systems like BEM, because the use of & and @extend are generic. So the feature request isn’t about placeholders, it’s actually about all selectors so what we have to ask is whether we expect the following to work as indicated:

#header {
   &-nav { } // #header-nav
}

#footer {
  @extend #header; // should this produce #footer-nav ? We have decided that it should not.
}

One of the reasons for this decision is that we expect @extend to have the exact same behavior across a nesting refactoring. That is, if you had originally written the code:

#header {}
#header-nav {}
#footer { @extend #header; }

and then later you refactored it to:

#header {
   &-nav { }
}
#footer { @extend #header; }

You should expect the exact same output. This “feature request” would violate this invariant and hence it would actually introduce a bug from another user’s perspective and use case.

Finally, It seems like some people have a mental model that @extend applies before resolving the parent selector, that it is like a search and replace. This is fundamentally a wrong way of thinking about @extend which creates a document level styling relationship between complex css selectors and can only be applied to full selectors and not to just parts of them.

[chriseppstein]

@pepa-linha the stylus behavior isn’t necessarily worse, it’s just a different concept (using the same syntax 🤔) – as long as the concepts are understood, people will know what to expect and behave accordingly. Their model is a simpler one, it’s easier to implement and arguably it’s easier to understand and know what output it will generate – but it lacks the document level guarantees that Sass makes 🤷‍♂️