Fixes issue when using an ampersand (&) to scope css to a parent selector alongside the new namespace feature

[marmite22]

The instructions on raising an issue said to consider making a PR with a failing test so here is one:

The issue this tests for is that when using an ampersand (&) to scope css to a parent selector and also using the new namespace feature added in the latest beta version, the resulting css has the parent selector before the namespace selector.

I took a stab at resolving this but while I was able to get the original issue solved, it breaks down with more complex use cases (as seen in the 2nd test)

[marmite22]

Is anyone (@probablyup ?) able to verify the output of my 2nd test please? I've, perhaps wrongly, assumed that the outputted CSS should target the sc-* class but if I replicate the same code I get different results in v4 vs. v5. In fact, v5 actually switches between the sc-* class and the other generated class.

Given the following styled component

const StyledComponent = styled.div`
  color: blue;
  .child &,
  .child2 & {
    color: green;
  }
`;

v4.4.1

.gMjrFY{color:blue;}
.child .gMjrFY,.child2 .gMjrFY{color:green;}

v5.3.6

.QcRiW{color:blue;}
.child .sc-bcXHqe,.child2 .QcRiW{color:green;}

So why does v5 target the sc-* class where v4 didn't? Is it correct? If it is correct then my fix for the issue is working and it is the test that is wrong.

[marmite22]

I can spend some time in my next sprint at work to look at this but I need to know the answer to my question above about the sc- classes.

I'll happily work more on this if anyone has any feedback?

[quantizor]

The relevant documentation is here: https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

[marmite22]

Looking at that documentation

I can see the same issue is present (the sc-* class is being targeted instead of the other one).

If you are happy that the generated css targets those classes then I will update the test to pass and this can then be merged I think.

In fact, I think I will raise a completely separate issue specifically about it.

[marmite22]

I have now fixed the tests I've added so they are passing and raised a separate issue here #3923

I think this PR now resolves #3909

[quantizor]

Thanks, looks good!