Selectors within template literal CSS get newlined and cause parsing error

[kylemh]

Prettier 2.7.1
Playground link

--parser babel

Input:

const SomeStyledSpan = styled.span``;
const SomeStyledDiv = styled.div``;
const SomeStyledSection = styled.section``;

const SomeStyledComponent = styled.span`
   & ${SomeStyledSpan}:empty ~ ${SomeStyledDiv} ${SomeStyledSection},
   & ${SomeStyledSpan}:active ~ ${LabelContainer} ${SomeStyledSection} {
     transform: none;
   }
`;

Output:

const SomeStyledSpan = styled.span``;
const SomeStyledDiv = styled.div``;
const SomeStyledSection = styled.section``;

const SomeStyledComponent = styled.span`
  &
    ${SomeStyledSpan}:empty
    ~ ${SomeStyledDiv}
    ${SomeStyledSection},
    &
    ${SomeStyledSpan}:active
    ~ ${LabelContainer}
    ${SomeStyledSection} {
    transform: none;
  }
`;

Expected behavior:
When using styled-components strings can't wrap if they're part of a single selector otherwise we get a CSS parsing error.

[so1ve]

…What does the title mean

[kylemh]

😂 that is a GREAT question. Fixed the title @so1ve / @kachkaev

[kachkaev]

Thanks for updating the title @kylemh! I guess this bug is similar to #6392 and #5086

In the meantime, you can use // prettier-ignore as a workaround:

Prettier 2.8.8
Playground link

--parser babel

Input:

const SomeStyledSpan = styled.span``;
const SomeStyledDiv = styled.div``;
const SomeStyledSection = styled.section``;

// prettier-ignore
const SomeStyledComponent = styled.span`
   & ${SomeStyledSpan}:empty ~ ${SomeStyledDiv} ${SomeStyledSection},
   & ${SomeStyledSpan}:active ~ ${LabelContainer} ${SomeStyledSection} {
     transform: none;
   }
`;

Output:

const SomeStyledSpan = styled.span``;
const SomeStyledDiv = styled.div``;
const SomeStyledSection = styled.section``;

// prettier-ignore
const SomeStyledComponent = styled.span`
   & ${SomeStyledSpan}:empty ~ ${SomeStyledDiv} ${SomeStyledSection},
   & ${SomeStyledSpan}:active ~ ${LabelContainer} ${SomeStyledSection} {
     transform: none;
   }
`;

[kylemh]

Yep! I've been using // prettier-ignore to resolve or just abstracting the selector to a hoisted variable.

One big difference between the linked issues is that the formatting in this issue causes CSS parser errors. Prettier breaks other tools here.

The other two issues are just about subjective desires regarding when/how to do line breaks after comma separations. Prettier doesn't break other tools regardless of those issues being worked on or ignored.

In other words, I think this issue is a much bigger deal than #6392 or #5086