nested css selector element& broken in emotion 11

I’m upgrading from emotion 10 to 11 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 correct css

/* for :enabled <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
}

as shown and isolated in https://codesandbox.io/s/modest-lederberg-db4bt?file=/src/App.js

After upgrading to emotion 11 the following css is generated which breaks it.

.button:hover:enabled,
.button:focus:enabled,
.button:hover a&,
.button:focus a&{
    background:blue
}

To reproduce:

See the sandbox which isolates the issue. https://codesandbox.io/s/relaxed-shamir-yleem?file=/src/App.js Its the same as above, I just swapped out the dependencies.

Expected behavior:

Generated CSS should be the same as previously in emotion 10.

• react version: 17.0.2 (also seen with 16.14)
• @emotion/react version: 11.4.1

As also the stylis version changed I already raised an issue over there at https://github.com/thysultan/stylis.js/issues/274

[Andarist]

Not yet - being busy at the moment, hope to get back to this later this week but no promises.

[joernroeder]

@Andarist Wow, thank you so much for looking into this and your hard work ❤️