Can't seem to reference other components in SASS?

[IntusFacultas]

Hi there, I was wondering if support for this feature in React styled-components will be implemented soon. In particular:

export const StyledButton = styled('button', props)`
  /** some styling here */
`;

export const ButtonGroup = styled.div`
  display: flex;
  ${StyledButton} + ${StyledButton} {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -2px;
  }
`;

Currently, doing this results in the following CSS being produced after compile for ButtonGroup:

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    ): ;
    return resolvedAttrs: ;

which isn't valid. I know I can technically do

export const ButtonGroup = styled.div`
  display: flex;
  button + button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-left: -2px;
  }
`;

But ideally I'd like to use the components so that the rendered css references a css rule both by element and the compiled hashed class name.

[IntusFacultas]

Hi, I've realized this is a clone of #97 so I'm going to close this.