@extend within placeholder

[rtsao]

It appears @extend within a placeholder is currently unsupported, for example:

Input:

%foo {
  background: pink;
}

%bar {
  @extend: foo;
  font-size: 12px;
}

.baz {
  @extend %bar;
  color: orange;
}

Desired output:

.baz {
  background: pink;
  font-size: 12px;
  color: orange;
}

Actual output:

.baz {
  @extend: foo;
  font-size: 12px;
}

.baz {
  color: orange
}

Any thoughts on this?

[travco]

Sorry for somewhat of a slow response, been off the grid this past week.

Main thing is that you have @extend: foo when you're actually trying to extend the placeholder %foo

You need to explicitly "call out" the placeholder, thus @extend %foo

As for having everything in one block like you desire you'll have to use a minifier plugin (or pack of plugins like postcss-nano)[https://github.com/ben-eb/cssnano]

[travco]

Have you tried @extend %foo; (without the colon)? It is an at-rule, not a declaration

[rtsao]

Doh! Thanks 👍