Overriding styles with css prop breaks adjacent sibling selector

[sqal]

• emotion version:

@emotion/babel-preset-css-prop: 10.0.9
@emotion/core: 10.0.10
@emotion/styled: 10.0.10

• react version: 16.8.6

Relevant code:

const base = {
  background: '#000',
  color: '#fff',
  border: 0,

  '& + &': {
    background: 'red',
  },
};

const Button = ({ children, ...props }) => (
  <button css={base} {...props} type="button">{children}</button>
);

function SomeComponent() {
  return (
    <div>
      <Button>button 1</Button>
      <Button>button 2</Button>
      <Button css={{ fontSize: '20px' }}>button 3</Button>
    </div>
  );
}

Problem description:

As you can see above i have pretty simple Button component with some basic styling and I also use adjacent sibling selector to add some styles if next component is also a Button component. But as you can see on the image below, & + & selector does not work when the next Button component also uses css prop. In my example buttons 2 and 3 should have red background color, but third button doesn't have it because it has its own css prop;

[piotrblasiak]

I have also failed to find a good solution to this problem. How about if emotion detected if className that is passed to the JSX function is a emotion class and uses that to merge with the css prop?

[coljung]

Haven't found a solution yet?
I'm trying to reach adjacent siblings, but haven't been able to get the styling to work using jsx.

[gkcgautam]

Some workarounds for this have been discussed in #743

[Andarist]

This is unsolvable because of the reasons mentioned in #1417 . You just think that & is something different than it actually is. A selector such as this in your emotion styles is thus unsafe.