Sandbox: https://codesandbox.io/s/reshadow-cra-g02zb?file=/src/index.js:820-835
There are two examples: with :global and :not
:global(.foo) {
background: red;
section & {
background: lime;
}
}
Button {
border-width: 100px;
:not(whatever) & {
border-width: 5px;
}
}
Both these cases doesn't work correctly, but if we'd add starsm then they work:
*:global(.foo) {
background: red;
section & {
background: lime;
}
}
Button {
border-width: 100px;
*:not(whatever) & {
border-width: 5px;
}
}
This could probably be reproduced with other selectors as well.