[discussion] Prettier plugin

[oliviertassinari]

Summary

I hate how the sx prop wraps in my UI, creating large scrollbars:

I would rather see:

It feels so much better. But as soon as I run prettier, it gets back to the previous default.

Instead, this issue proposes the creation of a prettier plugin https://prettier.io/docs/en/plugins.html, to get the same behavior as in Tailwind CSS: it doesn't wrap

Examples

• https://twitter.com/dan_abramov/status/1452329435777191941 (account deleted since)

• Tailwind CSS

Also https://twitter.com/reinink/status/1795907080139743709

Motivation

1. It feels like a better use of the horizontal and vertical space.
2. Tools like jscodeshift provide no control over the output format, leasing to problems like https://github.com/mui/material-ui/pull/42475#discussion_r1623261410

Search keywords: -

[brijeshb42]

In case of tailwind, it makes sense because it's a huge string. But in case of sx, it's an object. I guess this is subjective and we can give an option to users if they want to see a line by line object or a single wrapped line.

[oliviertassinari]

I have added the waiting for upvotes label. I'm curious if this ask will gather more user traction. Time will tell.

Personally, I would solve my biggest pain with the sx prop left since we can do <div sx={.

[oliviertassinari]

I have heard @developedbyed in https://youtu.be/98v05b-u2OE?si=Pv6Z5j2NmDmARuD4&t=521 mentioning how this CSS takes a large part of the file, so makes it harder to navigate. So, to be able to have more CSS inside the markup, it feels like this issue is the only way to make it happen at scale.

[o-alexandrov]

You can also auto-fold a certain prop, for example sx. There are VSCode plugins for that.