Css variable in styled-components breaks because of the extra space in a template string.

[shermendev]

Prettier 1.19.1
Playground link

--parser babel

Input:

styled.div`color: var(--${color});`

Output:

styled.div`
  color: var(-- ${color});
`;

Expected behavior:
var(--${color}) to be without a space after -- as it breaks the css.

Any way to work around or disable it?

[fisker]

#6794 should be able to fix this

[thorn0]

fixed by #7883

[glandre]

Hi @thorn0 and @fisker, I am currently using 2.0.5 and this still happens...
What are the steps to fix this behaviour?

[thorn0]

@glandre The bug reported in this issue has been fixed. I'm not able to reproduce it with 2.0.5. If you can reproduce your problem on the Playground, please use the Report issue button there to open a new bug report.

[glandre]

@thorn0, thank you for your reply. Maybe there's something else in my configuration that is getting in the way...

One point to notice is that I'm using TypeScript.

Take a look at this Codesandbox: https://codesandbox.io/s/elastic-colden-kvyzm?file=/src/App.tsx
It has prettier by default.

Notice the extra space after -radius-

Let me know if it's just some missing configuration, or if I should go ahead and open a new issue.

Thank you again for your help.

[thorn0]

@glandre That's a different bug, fixed by #8255 but not yet released.

[glandre]

Great!
When is the next release to be expected?
thank you @thorn0!