🐛 Formatting going beyond 80 char width

[dougg0k]

What happened?

Hi,

I have a front-end project that I've been trying to move from Prettier to Rome, but in one of the formatted files, this happened.

Before, with prettier, it was like this. Properly formatted.

export default styled("div")`
	margin-left: ${(props: { hasItems: boolean }) =>
		props.hasItems ? 100 : 0}px;
	position: relative;
`;

It's a react component created using a styling library called gooberjs. After formatting with rome, it went to.

export default styled("div")`
	margin-left: ${(props: { hasItems: boolean }) => (props.hasItems ? 100 : 0)}px;
	position: relative;
`;

That margin-left are 82 char long. While the rome config are set to 80.

Expected result

It should be max 80 as set in the config.

Every other component in the project seems to be fine though. It was not reformatted.

Code of Conduct

• [X] I agree to follow Rome's Code of Conduct

[ematipico]

Hi @dougg0k , it would be great if you could provide the information of the rome rage command, as suggested by our issue template.

I can't reproduce the issue in the playground.

Would it be possible to share a playground link where we're able to reproduce the issue? Or even a repository

[dougg0k]

> pnpm rome format .
./src/components/formHelpers/RightSideContainer.tsx format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Formatter would have printed the following content:
  
    2 2 │   
    3 3 │   export default styled("div")`
    4   │ - → margin-left:·${(props:·{·hasItems:·boolean·})·=>·
    5   │ - → → → → → props.hasItems·?·100·:·0}px;
      4 │ + → margin-left:·${(props:·{·hasItems:·boolean·})·=>·(props.hasItems·?·100·:·0)}px;
    6 5 │   	position: relative;
    7 6 │   `;
  

Compared 291 file(s) in 10ms

> pnpm rome rage .
CLI:
  Version:              11.0.0
  Color support:        true

Platform:
  CPU Architecture:     x86_64
  OS:                   linux

Environment:
  ROME_LOG_DIR:         unset
  NO_COLOR:             unset
  TERM:                 "xterm-256color"

Rome Configuration:
  Status:               loaded
  Formatter disabled:   false
  Linter disabled:      true

Workspace:
  Open Documents:       0

Discovering running Rome servers...

Incompatible Rome Server: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ℹ Rage discovered this running server using an incompatible version of Rome.

Server:
  Version:              <=10.0.0

"rome": "11.0.0",

[dougg0k]

I see why, rome adds both ( and ) and that causes to go over 80 width by 2. It seems to do after the formatting. So, maybe that's a bug. If is going to add, it should add and then check for the linewidth.

[github-actions[bot]]

👋 @rome/staff please triage this issue by adding one of the following labels: S-Bug: confirmed, S-Planned , S-Wishlist or umbrella