PostCSS如何正確處理類似“#{$Interpolation}”這樣的SASS語法

我在PostCSS下編譯一段這樣的css時，未能達到預期的結果，首先是css代碼：

.component {
  $c: &;
  padding: 2vw;
  &__card {
    background-color: #fff;
    &:hover #{$c}__name {
      color: #bada55;
    }
  }
  &__name {
    color: #000;
  }
  &__button {
    background-color: blue;
    color: #fff;
  }
}

我這里使用的是SCSS解析，用了PreCSS插件，但是編譯的結果如下：

.component {
  padding: 2vw;
}
  .component__card {
    background-color: #fff;
  }
  .component__card:hover .component__card__name {
      color: #bada55;
    }
  .component__name {
    color: #000;
  }
  .component__button {
    background-color: blue;
    color: #fff;
  }

顯然在帶有偽類:hover的那一處是錯誤的。正確的結果應該是：

.component {
  padding: 2vw;
}

.component__card {
  background-color: #fff;
}

.component__card:hover .component__name {
  color: #bada55;
}

.component__name {
  color: #000;
}

.component__button {
  background-color: blue;
  color: #fff;
}

可以通過這個在線SASS編譯http://sass.js.org/測試。

那么如何才能在PostCSS下得到正確的結果呢，是否有其他插件可以實現(xiàn)，難道只能避免使用這樣的SASS寫法了嗎？