@at-root, and & selector works in Dart, but not scssphp

[EffakT]

Given the following code.

.material-design_wrapper {
  @at-root {
    #{str-replace(unquote("#{selector_append(&)}"), "_wrapper", "")} {
      &.gform_confirmation_wrapper {
        background-color: red;
        width: 200px;
        height: 50px;
      }
    }
  }
  .gform_confirmation_wrapper {
    background-color: red;
    width: 200px;
    height: 50px;
  }
}

This will successfully compile in Dart, but will return an error in scssphp
"$selector: expected more input, invalid selector.:

Current workaround works:

.material-design_wrapper {
  $c: #{&}
  @at-root {
    #{str-replace(unquote("#{selector_append($c)}"), "_wrapper", "")} {
      &.gform_confirmation_wrapper {
        background-color: red;
        width: 200px;
        height: 50px;
      }
    }
  }
  .gform_confirmation_wrapper {
    background-color: red;
    width: 200px;
    height: 50px;
  }
}

Should output:

.material-design.gform_confirmation_wrapper {
  background-color: red;
  width: 200px;
  height: 50px;
}
.material-design_wrapper .gform_confirmation_wrapper {
  background-color: red;
  width: 200px;
  height: 50px;
}

[stof]

This is kinda related to #512

This is part of our spec compliance issues that are very hard to fix in 1.x due to our weird handling of selectors. So I'm adding this to the 2.0 milestone.