[V.2.0.1] Parent inheritance problem

Please check this: https://codesandbox.io/s/wplNXEN1J Check .modifier & { underneath.

This JSX:

<Container>
  <div className='modifier'>
    <div className='wrapper'>Hello World, this is my first styled component!</div>
  </Container>
</div>

const Container = styled.div`
  .wrapper {
    background-color: green;
    .modifier & {
      background-color: red;
    }
  }
`;

Renders this HTML:

<div class="sc-bdVaJa YJEIW">
  <div class="modifier">
    <div class="wrapper">Hello World, this is my first styled component!</div>
  </div>
</div>

The CSS is compiled as:

.sc-bdVaJa {}
.YJEIW .wrapper{background-color: green;}
.wrapper .modifier .YJEIW{background-color: red;}

I think the modifier should be: .YJEIW .modifier .wrapper

[ehtb]

Hi @philpl It is only to illustrate the issue, not to be a real world example.

[ehtb]

@thysultan Great, thanks for the fast fix!

@philpl Just did, can confirm that 2.0.1 with stylis 3.1.6 works. Awesome work!