Formatting styled component for nth-child() is wrong

[wooxudong]

Input:

const Steps = styled.div`
  @media (min-width: ${breakpoints.lg}) {
    ${Step} {
      margin-bottom: 90px;
    }

    ${Step}:nth-child(odd) {
      ${StepItemDescription} {
        grid-row: 1;
        grid-column: 3 / span 3;
      }
      ${Image} {
        grid-row: 1;
        grid-column: 7 / span 6;
      }
    }

    ${Step}:nth-child(even) {
      ${Image} {
        grid-row: 1;
        grid-column: 3 / span 6;
      }
      ${StepItemDescription} {
        grid-row: 1;
        grid-column: 10 / span 3;
      }
    }
  }
`;

Output:

const Steps = styled.div`
  @media (min-width: ${breakpoints.lg}) {
    ${Step} {
      margin-bottom: 90px;
    }

    ${Step}:nth-child (odd) {
      ${StepItemDescription} {
        grid-row: 1;
        grid-column: 3 / span 3;
      }
      ${Image} {
        grid-row: 1;
        grid-column: 7 / span 6;
      }
    }

    ${Step}:nth-child (even) {
      ${Image} {
        grid-row: 1;
        grid-column: 3 / span 6;
      }
      ${StepItemDescription} {
        grid-row: 1;
        grid-column: 10 / span 3;
      }
    }
  }
`;

Expected behavior:
Notice the space added between the nth-child (odd), this would not make the nth-child selector work. I am not sure how I can use prettier but still make this work.

[fisker]

minimum reproduction

Prettier 1.18.2
Playground link

--parser babel

Input:

const Steps = styled.div`
  @media (min-width: 1px) {
    ${Step}:nth-child(odd) {}
  }
`;

Output:

const Steps = styled.div`
  @media (min-width: 1px) {
    ${Step}:nth-child (odd) {
    }
  }
`;

[thorn0]

Fixed by #7883. Needs tests.