v0.3.0 does not work with nested ampersand

[dparker2]

Hello, I'm not 100% sure if this is an issue or something I am doing wrong, but I noticed upgrading to v0.3.0 changed the css in some snapshots like so:

- #modal-root [aria-expanded='true'] .emotion-21::-webkit-input-placeholder {
-   color: #fff;
+ [aria-expanded='true'] #modal-root .emotion-21::-webkit-input-placeholder {
+   color: #fff;
}

I reproduced the issue here (note stylis is still v3 in this, I see v4 isn't supported yet): https://codesandbox.io/s/elated-satoshi-85mlt

Reproduction code in case sandbox becomes inaccessible for some reason:

const stylis = new Stylis();
stylis.use(extraScopePlugin("#my-scope"));

const rules = stylis(
  ".emotion-1",
  `
  [aria-expanded='true'] & {
    color: blue;
  }
`
);

Resulting rules:

• v0.3.0: [aria-expanded='true'] #my-scope .emotion-1{color:blue;} ❌
• v0.2.1: #my-scope [aria-expanded='true'] .emotion-1{color:blue;} ✅

[marmite22]

Did you manage to fix this @dparker2 ? I'm hitting the same issue.

[marmite22]

I created a code sandbox showing the issue when used with Styled Components.

https://codesandbox.io/s/stylis-plugin-extra-scope-forked-sq5pk4?file=/src/App.js