I was planning on enabling the Rome formatter with its next release to replace prettier in one of our repos, but I realized that CSS formatting, specifically css-in-js, isn't supported yet.

Very much looking forward to Rome having CSS formatting support!

CSS-in-JS is still JavaScript, right? If so, then I believe that that the JS formatter should do that

CSS-in-JS is still JavaScript, right?

It depends on the css-in-js lib, in our case we use linaria so it looks like this:

const myClass = css`
  color: red;
`;

which is plain CSS (without the topmost selector) in a template string.
I believe #2572 is related.

With some other libs like vanilla-extract it may be

const myClass = style({
  color: 'red'
});

which is indeed plain js.

CSS-in-JS is still JavaScript, right?

It depends on the css-in-js lib, in our case we use linaria so it looks like this:

const myClass = css`
  color: red;
`;

which is plain CSS (without the topmost selector) in a template string. I believe #2572 is related.

I did a quick search, I think prettier call these cases "embedded" languages:
https://github.com/prettier/prettier/blob/d13feed42b6478710bebbcd3225ab6f203a914c1/src/language-js/embed/css.js

And yes, they use a different parser/formatter inside these instances. Thank you for pointing it out!

Could we leverage Lightning CSS (and by extension cssparser) to achieve this?

Could we leverage Lightning CSS (and by extension cssparser) to achieve this?

We explored cssparser a bit. While it's a good starting point, unfortunately it doesn't fit very well our CST. I haven't done a lot of exploration work, but it seemed that retrieving trivia is not an easy task.

Any updates on this?

I've started to implement a lexer for a css parser.