☂️ CSS support

[ematipico]

Description

We are going to use this issue to track the various work around CSS. We don't plan, for the time being, to support super languages, although we might think about preparing the infrastructure to be able to support them.

PREVIOUS DISCUSSIONS: https://github.com/rome/tools/issues/984

• [x] create a css.ungram file where we will slowly implement new grammars
• [x] create a rome_css_syntax crate, where we will have all things related to the CSS syntax, generated code too
• [x] expand the codegen of the grammar to include CSS too
• [ ] evaluate how to implement the parser, lexer, etc. (it will require a separate discussion)
• [ ] create a rome_css_formatter crate
• [x] make the rome_formatter generic
• [ ] prepare the Rome architecture to include CSS (file handlers, capabilities, etc.)
• [ ] add support for CSS inside the VSCode extension

[nstepien]

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!

[ematipico]

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

[nstepien]

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.

[ematipico]

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!