Resolve ampersand to component-specific class, not instance-specific class

In the bellow example, one would expect the margin-left rule to apply to the button themed with the admin palette. But this is not the case : the ampersand is resolved to the instance class.

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';

const normalPalette = {
   background: 'black',
   foreground: 'white'
}

const adminPalette = {
   background: 'white',
   foreground: 'black'
}

// Create a <Button> react component which background and foreground rules
// are theme-dependant, but the sibling rule with left margin should be transversal
// Unfortunately, it doesn't work because the two sibling button instances have
// different class names.
const Button = styled.button`
  ${({ theme }) => `
    background-color: ${theme.background};
    color: ${theme.foreground};
  `}
  &+& {
    margin-left: 10px;
  }
`;

export default () => {
  return (
    <div>
      <ThemeProvider theme={normalPalette}>
        <Button> normal button </Button>
      </ThemeProvider>
      <ThemeProvider theme={adminPalette}>
        <Button> admin button </Button>
      </ThemeProvider>
    </div>
  );
}

The workaround now is to use a direct reference to the component, as in such example. However, this is counter-intuitive, cumbersome and ugly ! Plus, in my use-case, I declare components and their styles in two steps since I am implementing a rich featured theme engine. In such circumstances, I cannot refer to react components classes.

Feature request (breaking change)

& should now be resolved to the component static class selector.

Alternative (non-breaking)

Offer a specific pseudo class that will be resolved to the static class selector, such as :sc.

[kitten]

We already had an issue here regarding this but I think we mistakenly closed it: https://github.com/styled-components/styled-components/issues/774

In v3 we might have more tools to solve this, since we’ll be able to reliable detect this selector and resolve it differently.

Edit: @mxstbr It’s not a good idea to resolve the parent (ampersand) selector to the component class by default, since then when interpolations are used inside the rule, this rule will apply to all components, which is even more confusing.

Instead all references with two styled components (& + &, & > &, & &) should resolve the second parent selector to the component specific class.

[probablyup]

This is done in v4