@at-root, and & selector works in Dart, but not scssphp #634
Description
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;
}