Formatting styled component for nth-child() is wrong #5961
Description
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.