prettier: Removes linebreaks from styled-components tagged template literals in an odd way

Using prettier 1.5.0.

before

const Direction = styled.span`
  ${({ up }) => up && `color: ${color.positive};`}
  ${({ down }) => down && `color: ${color.negative};`}
`;

after

const Direction = styled.span`
  ${({ up }) => up && `color: ${color.positive};`} ${({ down }) =>
       down && `color: ${color.negative};`};
`;

I’d expect it to preserve the existing linebreak.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 24
Comments: 24 (14 by maintainers)

Most upvoted comments

Another styled-components thing:

const Dropdown = styled.div`
  position: relative;
`;

becomes

const Dropdown = styled.div`position: relative;`;

which causes: “block-closing-brace-space-after”: “always-single-line”, “block-closing-brace-space-before”: “always-single-line”, “block-opening-brace-space-after”: “always-single-line”, “block-opening-brace-space-before”: “always-single-line”,

stylelint rules to fail. We’d prefer always line-breaking.

+28

dgcoffman on Jun 27, 2017

I know I’m wondering wether anyone could give me some pointers towards where it would need to be fixed.

MrLoh on Sep 21, 2017

That’s cool – I can add semicolons. You’ll likely hear about this a bit since this pattern is common when using styled-components.

dgcoffman on Jun 27, 2017

Thanks, i’ll look into fixing it 😃

vjeux on Jun 27, 2017

Happy to report that the linebreaking bug has been fixed (tested 1.7.4).

dgcoffman on Oct 16, 2017

Is there any way to help get the second issue of the one line formatting of short templates to stop. I have //prettier ignore in front of some styles all over my codebase 🙁

MrLoh on Sep 20, 2017

@dgcoffman a temporarily workaround for this is to add a comment

const Dropdown = styled.div`
  /* A comment to avoid the prettier issue: https://github.com/prettier/prettier/issues/2291 */
  position: relative;
`;

NameFILIP on Aug 2, 2017

I think this is already fixed

fisker on Nov 19, 2019

@azz

Sorry for being unclear (and reporting two bugs in a single issue).

If you add semicolons, the line-breaks will work as expected in your example.

I was saying that

const Single = styled.div`
  color: red;
`;

will now remain formatted as such.

dgcoffman on Oct 16, 2017