Skip to content

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

Closed
Bug
Closed
Inlined chunks of css in styled-component template literal gets joined to next line#5147
Bug
Labels
area:multiparserIssues with printing one language inside another, like CSS-in-JSlang:css/scss/lessIssues affecting CSS, Less or SCSSlang:javascriptIssues affecting JSlocked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.status:has prIssues with an accompanying pull request. These issues will probably be fixed soon!
@scotttrinh

Description

@scotttrinh
scotttrinh
opened on Sep 26, 2018

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:multiparserIssues with printing one language inside another, like CSS-in-JSlang:css/scss/lessIssues affecting CSS, Less or SCSSlang:javascriptIssues affecting JSlocked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.status:has prIssues with an accompanying pull request. These issues will probably be fixed soon!

    Type

    Bug

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions