If we have multiple styled components interpolated and separated by comma, the expected newline after the comma is missing.

Styled Components allow interpolation of nested styled components, see here for the syntax.

Prettier will put css selectors separated by , on new lines, introduced here: #2047. This works in styled components using regular css selectors, see second block in the playground link. It only fails when we try to use interpolated styled components.

Prettier 1.18.2
Playground link

--parser babel

Input:

const A = styled(_A)`
  ${B}, ${C} {
    style: value;
  }
`

const A = styled(_A)`
  .classA, .classB {
    style: value;
  }
`

Output:

const A = styled(_A)`
  ${B}, ${C} {
    style: value;
  }
`;

const A = styled(_A)`
  .classA,
  .classB {
    style: value;
  }
`;

Expected behavior:

const A = styled(_A)`
  ${B},
  ${C} {
    style: value;
  }
`;

const A = styled(_A)`
  .classA,
  .classB {
    style: value;
  }
`;