Cannot resolve #{$var} correctly

[whidy]

I have tried many times to resolve code like this below correctly,

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

But, it never works well, precss 2.0.0 would throw an error:

    ERROR in ./node_modules/css-loader?{"importLoaders":1}!./node_modules/postcss-loader/lib!./src/style.css
    Module build failed: Unknown word (7:28)

       5 |     background-color: #FFF;
       6 |   }
    >  7 |   .component__card:hover #{.component__card}__name
         |                            ^
       8 |       color: #BADA55;
       9 |     }
      10 |   .component__name {

Then I tried upgrade precss 3.1.0, it works, but not well.

Which I expect result should be like this:

.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;
}

You can also try that sass code compile online http://sass.js.org/.

But truely result is below:

.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;
  }

Is it a bug? And how to solute the problem?

[quadrifoliumclover]

@whidy while there is no fix for this bug, you can try to set the variable's value to a component selector like:

.component {
  $c: .component;
  &__card {
    &:hover $(c)__name {
        ...
    }
  }
}

or

$c: .component;

$(c) {
  &__card {
    &:hover $(c)__name {
        ...
    }
  }
}

[diverent2]

To quote the postcss advanced variables readme:

*Note: To use #{$var-name} without issues, you will need to include the PostCSS SCSS Syntax.

Meaning you will have to add PostCSS SCSS Syntax to your pipeline for this to work properly.

If your issue persists it likely belongs to postcss-advanced-variables or /postcss-scss instead. :)