Css variable in styled-components breaks because of the extra space in a template string.
See original GitHub issuePrettier 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:
- Created 4 years ago
- Reactions:2
- Comments:7 (4 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@glandre That’s a different bug, fixed by #8255 but not yet released.
Great! When is the next release to be expected? thank you @thorn0!