Multiple referenced styled-components selectors break highlighting for the rest of the file

[bostrom]

Referencing multiple child styled-components on the same row breaks syntax highlighting for the rest of the file.

Example:

const StyledSection = styled.div`
  background-color: ${({ theme }) => theme.colors.primary};
  text-align: center;
  ${P}, ${H2}, ${H3} {
    color: ${({ theme }) => theme.colors.white};
  }
`;
const HeaderIcon = styled.div`
  display: block;
  align-items: center;
  ${H3} {
    @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) {
      font-size: 1.1rem;
    }
    @media (min-width: ${({ theme }) => theme.breakpoints.desktop}) {
      font-size: 1.5rem;
    }
    font-size: 1.6875rem;
    margin: 0;
  }
`;

[bostrom]

Apparently the same applies for using +.

const StyledP = styled.p`
  text-align: center;
  + ${P} {
    color: ${({ theme }) => theme.colors.white};
  }
`;

[joshuapaling]

Related issue with styled components and specific nesting issues: