question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
thorn0commented, Jul 2, 2020

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

0reactions
glandrecommented, Jul 4, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

String interpolation in Styled components breaks linter
interpolating "theme" variables or any sort of string interoplation in styled components breaks the linter flow and I can format the css anymore ......
Read more >
Wrapping and breaking text - CSS: Cascading Style Sheets
It will cause a break-even if placing the word onto a new line would allow it to display without breaking. In this next...
Read more >
Advanced Usage - styled-components
To illustrate this, let's create our Button component, but this time we'll pass some variables down as a theme. // Define our button,...
Read more >
A Complete Guide to Custom Properties | CSS-Tricks
Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as "CSS Variables" but that's not ......
Read more >
Everything you need to know about CSS Variables
Project 1: Creating Component Variations using CSS Variables ... It's even more annoying if the error was due to a simple typo.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found