[bug] Prettier formats contents of template string

Prettier 1.14.3

playground link

Input:

export const FlexBox = styled.div`
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: ${p => p.direction};

	${p => p.stackOnMobile ? `
		${media('<desktop')} {
			flex-direction: column;
		}
	` : ''}
	
	> * {
		width: ${p => (p.howManyPerRow ? `${100 / p.howManyPerRow}%` : 'auto')};
	}
`

output:

export const FlexBox = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: ${p => p.direction};

  ${p =>
    p.stackOnMobile
      ? `
		${media("<desktop")} {
			flex-direction: column;
		}
	`
      : ""} > * {
    width: ${p => (p.howManyPerRow ? `${100 / p.howManyPerRow}%` : "auto")};
  }
`;

Expected behavior:

Prettier should never format any part of a template string (at least not without some in-code option like some sort of comment).

[lydell]

Is the output formatting in the OP example not ugly to you?

There’s a lot of symbols, so my brain quickly zones out and I’m not sure what I’m looking at. Is there a specific part of it you don’t like?

Honestly I just want to disable this template string formatting, and have a way to opt-in only when I want to.

Could you say why you want this? Is it breaking your code? Or is it “just” a bit ugly? Wouldn’t you be more interested in fixing things rather than disabling things?

[trusktr]

Arguably Prettier is trying to do too much, and should thus make some things opt-in (or opt-out). The line between formatting code and formatting template strings isn’t fully clear.