fix self-referential behavior in combo selectors

[quantizor]

When a component refers to itself with the ampersand placeholder the behavior today is a bit inconsistent and won't work as intended if your component has dynamic styles.

For example:

const Comp = styled.div`
  color: ${p => p.color};

  & + & {
    margin-left: 10px;
  }
`;

<div>
  <Comp color="red">Hello</Comp>
  <Comp color="blue">World</Comp>
</div>

// renders
// <div>
//   <div class="sc-a a">Hello</div>
//   <div class="sc-a b">Hello</div>
// </div>

The second instance of Comp will not get the margin-left because a different className is generated due to the different color prop, and today ampersand refers to the current styling context className.

It effectively looks like this:

// Comp -> .sc-a
// color: red -> .a
// color: blue -> .b

.sc-a {}
.a { color: red }
.a + .a { margin-left: 10px }
.b { color: blue }
.b + .b { margin-left: 10px }

Note how the combo is .a + .a and .b + .b, so only two adjacent components with the exact same styling props would trigger a match. This is a surprising behavior and makes compositions more troublesome.

The solution is to treat the second & as a reference back to the component itself (.sc-a), not the style of the component.

Then the styles look like this:

// Comp -> .sc-a
// color: red -> .a
// color: blue -> .b

.sc-a {}
.a { color: red }
.a + .sc-a { margin-left: 10px }
.b { color: blue }
.b + .sc-a { margin-left: 10px }

And any Comp next to a Comp will receive the margin-left. Note that the reason the first ampersand isn't also switched to the static component class is that will break style isolation.

before:

& + & -> .b + .b
&[disabled] { & + & } -> .b[disabled] + .b[disabled]

after:

& + & -> .b + .sc-a
&[disabled] { & + & } -> .b[disabled] + .sc-a[disabled]

fixes #784

[imbhargav5]

Looks solid!

[quantizor]

styled-components@4.0.0-beta.10-4 if anyone wants to help test. Can also hack on the "after" sandbox in OP

[imbhargav5]

Perhaps we can add a snapshot test for a combination of ~ & + or something just to be sure and also for &&&. This is an example of what I had in mind. A lot of people like &&& haha. 😀. It's probably being covered somewhere, and is probably obvious to work, but think this will make it robust from breaking later.

const Wrapper = s.div`
  &&&{
    h2{
      background: red;
    }
  }
  & + & { 
    background : blue;
  }
  & + & ~ &{ 
    background : yellow;
  }
`;

[quantizor]

@imbhargav5 sure, can you add an example for me to your comment and I'll put it in the PR?

[imbhargav5]

@probablyup Just did

[quantizor]

@imbhargav5 done

[imbhargav5]

Awesome.

[mxstbr]

If it works I guess LGTM, but damn I'm afraid of that regex having unintended edge cases 😕

[quantizor]

@kitten any issues or tests I should add to the suite?

[kitten]

@probablyup looks solid to me; the only thing we could do differently is to actually add it as a stylis middleware, to its selector input transform function.