Stylus(0.47.3)で@extendする時に変なはまり方をした。

.foo:before
  content '\f101'

このような擬似要素のあるセレクターを以下のように@extendするとコンパイルエラーになる。

.bar
  @extend .foo

// こうコンパイルされてほしい
// .foo:before,
// .bar:before {
//   content: '\f101';
// }

実行するとFailed to @extend ".foo"と言われる。回避方法は

.foo
  &:before
    content '\f101'

のように:beforeをネストすること。反対にかっこわるいがネストしていないセレクターの表記をそのまま使うこともできる。

.bar:before
  @extend .foo:before

つまりStylusでは@extendする際に元のセレクターと同じ表記で指定する必要がある。バグのような気がする。この現象はSassでは起こらず、問題なく解釈してくれる。