Formatting incorrect using styled-component component selector pattern

[marclemagne]

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.

[Jessidhia]

Pseudo-element selectors also break similarly:

-  ${media.smallDown}::before {
+  ${media.smallDown}: : before{

[marclemagne]

Thank you for addressing so quickly!

[marclemagne]

Upgraded today and it looks like a bunch of use-cases are covered now which is awesome. There are a couple of use-cases that I think are still not covered, though. Below are some examples (using the playground for PR #7842):

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

  ${Link}:nth-child (2) {
    fill: rebeccapurple;
  }
`;

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

  ${Link}:empty: before{
    fill: rebeccapurple;
  }
`;

And also:

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

  ${Link}:not (:first-child) {
    fill: rebeccapurple;
  }
`;

I know it was mentioned that this was a kind of "dirty" fix to address regressions--would these use-cases be able to be fixed similarly?

Thanks again for your time!

[thorn0]

@evilebottnawi As another quick and dirty solution, can we switch to the scss parser for embedded CSS? Seems like it doesn't have all these problems.

[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