@at-root with #{&} inside a comma-separated selector generates wrong code

Tested versions: v3.3.6 via node-sass (sorry, I can’t run/test it against the ruby implementation directly)

Given the following input:

.class-a {
    .class-b,
    .class-c {
        color: yellow;

        @at-root .something-at-root#{&} {
            color: pink;
        }
    }
}

You’ll get the following output:

.class-a .class-b,
.class-a .class-c {
    color: yellow;
}

.something-at-root.class-a .class-b,
.class-a .class-c {
    color: pink;
}

The problem here is that #{&}, which I used here in this example to prepend some selector (.something-at-root) right at the beginning, which causes the compiler to generate wrong output.

I’d expect the following output for the second block:

.class-a .class-b,
.class-a .class-c {
    color: yellow;
}

.something-at-root.class-a .class-b,
.something-at-root.class-a .class-c {
    color: pink;
}

Clearly one could argue that I’ve abused #{} and & here though I couldn’t find another way to achieve the same result (apart from the potential bug). I’ve just expected that the compiler would treat string interpolation with the same rules as the rest.

To me it looks like the entire string is just pasted into its destination without honoring the ,.

[SalimBensiali]

@richgcook See docs for selector-append. What you are looking for is selector_nest

[richgcook]

@chriseppstein This actually doesn’t work as it doesn’t create a space between the root selector and the child selector.

a, a:active, a:focus, a:hover {
	color: $color--primary;
	outline: none;
	text-decoration: none;
	@at-root #{selector-append("body.is--reversed", &)} {
		color: $color--bg;
	}
}

This compiles to

body.is--reverseda,
body.is--reverseda:active,
body.is--reverseda:focus,
body.is--reverseda:hover {
    color:#fcfbf6
}