travco/postcss-extend

Pseudo-classes problem

komlev opened this issue · 2 comments

There could be only one pseudo class:

.foo:before {
  color: #111;
}

.bar:before {
  @extend .foo;
}

Will produce:

.foo:before, .bar:before:before {
  color: #111;
}

I guess it has to omit one of the pseudo classes.

Sorry for the late response.

I'll consider adding an exception for obvious cases like :before:before but this is functioning as intended. If you want to have something extend a pseudo-class, you either want to leave-off the pseudo-class on the -extending- statement
like:
.bar { @extend .foo; }
to get:
.foo:before, .bar:before { color: #111; }

OR you can explicitly call out the selector and pseudo-class in your extend like
.bar:before { @extend .foo:before; }
to get:
.foo:before, .bar:before { color: #111; }

If I'm missing something here and there's a case where fixing it either of these ways is problematic, please reply and I'll be happy to reopen it.

Yes, I see the point.
I encountered this problem while converting old code from sass. In sass the extra pseudo-class is stripped away I guess just in case developer was careless enough to get in this situation. I got around that problem already. And don't have strong opinion on that problem. I'd say it is up to you.