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.

Inlined chunks of css in styled-component template literal gets joined to next line

See original GitHub issue

Prettier 1.14.3 Playground link

Input:

const secondary = `
  font-size: 12px;
`;
const foo = styled.div`
  ${secondary}
  flex: 0 0 auto;
`;

Output:

const secondary = `
  font-size: 12px;
`;
const foo = styled.div`
  ${secondary} flex: 0 0 auto;
`;

Expected behavior: Since a ${} expression can be anything, don’t join subsequent lines to it. It’s not likely to ever be the correct thing to do.

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:8 (4 by maintainers)

Top GitHub Comments

5reactions

alexander-akaitcommented, Oct 5, 2018

In theory to avoid this issue we should keep line break if he exists, because it is hard to detect should we add newline or not

1reaction

scotttrinhcommented, Sep 29, 2018

@lydell

Yeah, true, but there-in lies the flexibility, right? 😄

I couldn’t find a way, but is it possible to just turn off parsing of template literal content somewhere?

Top Results From Across the Web

Styled-Components and Template Literals - Stack Overflow

Is this valid JS ?? and what does it mean? This is a code snippet from styled-components Library? const Button = styled.a` /* ......

Getting Sassy with styled-components | by Adam Gruber

Progressively migrating your app from Sass to styled-components seems daunting, but with a couple of quick tips and the right tooling it's a...

Working with Styled-components in React - Section.io

Styled -components are based on tagged template literals, meaning actual CSS code is written between backticks when styling your components.

Template Literals | CSS-Tricks

The Template Literal, introduced in ES6, is a new way to create a string. With it comes new features that allow us more...

FAQs - styled-components

In general, always use the css helper when composing styling partials to be interpolated into a styled component.. import styled, { keyframes } ......