nested element type selector broken

[joernroeder]

I'm upgrading from emotion 10 to 11 (which bumped stylis up) and experiencing some changes in how my "button" selector works which I apply to button and a elements.

.button {
    color: blue

    &:hover, &:focus, &.is-active {
        &:enabled, a& {
            color: red
        }
    }
}

This previously generated the following css

/* for :enabled for <button> elements */
.button:hover:enabled,
.button:focus:enabled,
.button.is-active:enabled,

/* <a> elements styled as buttons */
a.button:hover,
a.button:focus,
a.button.is-active {
    color: red
}

but appends the "tag" selector wrongly

/* for :enabled for <button> elements, all good here */
.button:hover:enabled,
.button:focus:enabled,
.button.is-active:enabled,

/* the <a> element selector gets wrongly appended */
.button:hovera,
.button:focusa,
.button.is-activea {
    color: red
}

[Andarist]

Testing it on the https://stylis.js.org/ it seems like it works as expected. This might be an issue with Emotion - could you create a full runnable repro case of the problem?

[joernroeder]

This is the output I am seeing on stylis.js.org which differs but is is not correct either.

Will provide a runnable example later this weekend.

[joernroeder]

added runnable examples in the issue raised at emotion ☝️

[Andarist]

Thank you! As to the correct output - remember that on the Stylis docs page everything is implicitly wrapped in [namespace] { /* your css */ } and with that in mind this output looks correct to me:

[namespace] .button {
  color: blue;
}

[namespace] .button:hover:enabled,
[namespace] .button:focus:enabled,
[namespace] .button.is-active:enabled,
a[namespace] .button:hover,
a[namespace] .button:focus,
a[namespace] .button.is-active {
  color: red;
}

I've tried comparing with Sass but it turns out that this is not even a valid Sass because I get this error:

Error: "&" may only used at the beginning of a compound selector

If I just remove the .button wrapping and assume that [namespace] should be where you have used it then we get this:

[namespace] {
  color: blue;
}

[namespace]:hover:enabled,
[namespace]:focus:enabled,
[namespace].is-active:enabled,
a[namespace]:hover,
a[namespace]:focus,
a[namespace].is-active {
  color: red;
}

then this looks exactly the same as your expected output. Could you confirm that? Maybe I'm missing something here.

[joernroeder]

Hey @Andarist, thanks for looking into it and you're right the following looks like correct. It seems to be a change in emotion which caused my issue then 🤔

[Andarist]

Thank you for confirming! Gonna close this issue here then - let's continue looking into it in the issue created for Emotion.

[joernroeder]

thanks @Andarist for your work!