Formatting incorrect using styled-component component selector pattern

Prettier 2.0.1 Playground link

--parser babel

Input:

const Icon = styled.div`
  flex: none;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;

  ${Link}:hover {
    fill: rebeccapurple;
  }
`;

Output:

const Icon = styled.div`
  flex: none;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;

  ${Link}: hover{
    fill: rebeccapurple;
  }
`;

Expected behavior:

const Icon = styled.div`
  flex: none;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;

  ${Link}:hover {
    fill: rebeccapurple;
  }
`;

When using the component selector pattern from styled-components, I am seeing an issue with the formatting of the output CSS. This above is a slightly modified example from the documentation. Note that if I included an & to the selector (before the curly brace) it will format correctly (e.g., ${Link}:hover &).

The examples I am seeing in my own application are being formatted:

${DataCell}: empty: before{
${Tab}: first-child{
${Tab}:nth-child (2) {

All of which I would expect to break styling behavior.

Love the new update, though! The Prettier team must have worked incredibly hard to make so many impressive improvements.

Thank you for your time.

[marclemagne]

Thank you for addressing so quickly!

[alexander-akait]

@thorn0 yes, I think it will save the situation, that’s why I didn’t want to update postcss-less, as a contributor stylelint I have already raised more than once the question of forking a project and rewriting, maybe we should rush it