Extending in a child selector

[maaravi]

Hey,

This snippet:

.my-util-class {
  color: red;
}

.my-top-level-class {
  .my-child-class {
    font-size: 14px;

    @extend .my-util-class;
  }
}

Resolves into the following CSS:

.my-util-class, .my-child-class {
  color: red;
}

The resulting CSS completely disregard the fact that the extend was in a child selector.
Is this a bug or intended behavior?

Thanks

[maaravi]

On the other hand, this snippet:

.my-util-class {
  color: red;
}

.my-top-level-class {
  .my-child-class {
    font-size: 14px;
  }
}

.my-top-level-class .my-child-class {
  @extend .my-util-class;
}

Produces the expected result:

.my-util-class, .my-top-level-class .my-child-class {
  color: red;
}

Can I infer that using @extend within nested classes is not supported?

[travco]

You can infer (or read any of the four previous issues #25, #23, #21, #14)
Extend was not written with the intention of supporting nesting, it's only coded to evaluate rules at or near root scope.
If your using postcss-nesting (or a similar plugin), as mentioned in both the readme at https://github.com/travco/postcss-extend#installation and the previous issues, try putting postcss-nesting before extend in the run order - it fixes most problems, though as blindmikey noted in #25, not all of them.

There's enough recursion and syntax handling in this plugin as it is without trying to handle nested rules. I hope this helps.