Hi team!

I'm not sure that the following examples of formatting are bugs, intentional decisions or just corner cases that were skipped during development. So I just want to share them with you and get some feedback.

I understand the rationale behind prettier, so if these are not bugs but intentional, it is okay, i'd just want to know this :)

1) When css rule is one line, it is collapsed

This one is the minor one, but still not very convenient. I'm extending some component and start with one simple rule. I'll probably add more after this initial one and I don't want even one-liners to collapse. If you look at some examples in styled-components , you can see that this is a common pattern for many styled components to leave template literal multiline.

2) Template literal expressions collapsed with next line

This one is a real pain. If you have an expression that takes full line in template literal and there is no semicolon at the end of the line, newline is removed and the next line is collapsed with it. This could quickly became a total mess if you have several lines of expressions like that.

3. Semicolon is inserted at the end of template literal if it ends with expression

This just looks like a bug.

Example:

const RedBlock = styled.div`
  display: block;
  background-color: red;
  ${props => props.rounded && 'border-radius: 5px;'}
`;

// After formatting --->

const RedBlock = styled.div`                        
  display: block;
  background-color: red;
  ${props => props.rounded && 'border-radius: 5px;'}; // <-- notice this semicolon
`;