Breaks CSS pseudo-class inside a template literal

[brody4hire]

prettier/prettier#11400:

Prettier 2.3.2
Playground link

--parser babel

Input:

const focus = true ? 'focus-visible' : 'focus';
const styles = css`
  /* A space is inserted after the ':' which breaks the pseudoclass */
  .content:${focus} {
    border-color: red;
  }
`;

Output:

const focus = true ? "focus-visible" : "focus";
const styles = css`
  /* A space is inserted after the ':' which breaks the pseudoclass */
  .content: ${focus} {
    border-color: red;
  }
`;

---

ugly workaround from @brodybits:

Prettier 2.3.2
Playground link

--parser babel

Input:

const focus = true ? 'focus-visible' : 'focus';
const styles = css`
  ${`.content:${focus}`} {
    border-color: red;
  }
`;

Output:

const focus = true ? "focus-visible" : "focus";
const styles = css`
  ${`.content:${focus}`} {
    border-color: red;
  }
`;