Styled Components pseudo-selectors issue

[gochi-dot]

There is unexpected space after :not, which breaks the ts build.

Prettier 2.0.2
Playground link

--parser babel

Input:

export const Item = styled.div``;

export const List = styled.div`
    display: flex;
    flex-direction: column;
    ${Item}:not(:first-child) {
        margin-top: 10px;
    }
`;

Output:

export const Item = styled.div``;

export const List = styled.div`
  display: flex;
  flex-direction: column;
  ${Item}:not (:first-child) {
    margin-top: 10px;
  }
`;

Expected behavior:

export const Item = styled.div``;

export const List = styled.div`
  display: flex;
  flex-direction: column;
  ${Item}:not(:first-child) {
    margin-top: 10px;
  }
`;

[gochi-dot]

Same issue with:

    ${Item}:nth-of-type (2) {
        flex-grow: 1;
    }

[thorn0]

Duplicate of #7826