Add support for CSS linting with @eslint/css

[marekdedic]

Description

When I implemented CSS parsing, I used PostCSS to do it. Now it seems that eslint itself is steering towards using CSSTree and implements (so far quite limited) CSS linting in @eslint/css.

I think we should aim to:

1. Enable using @eslint/css rules in Svelte files
2. Keep existing eslint-plugin-svelte rules working

To that end, we'd need to:

1. Migrate everything from PostCSS to CSSTree
2. Probably parse the CSS all the time, not just on-demand like we currently do
3. Implement SCSS (and other preprocessors) ourselves, since CSSTree explicitly doesn't aim to support them

Open Questions:

1. Does Eslint even support multiple languages in one file? Eslint is going the way of multi-language support, but so far it seems like only one language at time is supported (not sure, but see Bug: Cannon use processor and recommended configs together eslint/markdown#353)
2. How do we go about preprocessors?

I am willing to do some work on this eventually, but I think some discussion is needed first... Thoughts?

[JounQin]

Actually @ota-meshi maintains https://github.com/ota-meshi/eslint-plugin-css

[marekdedic]

Oh, didn't realize that :) That plugin seems to be base on a mix of postcss and custom logic, not CSSTree which seems to be where eslint itself is heading :(

[ota-meshi]

I use Stylelint for <style> and style="..." linting so I'm not too interested in @eslint/css, but I wouldn't be opposed to someone adding that feature to this plugin.

Implement SCSS (and other preprocessors) ourselves, since CSSTree explicitly doesn't aim to support them

That's an interesting feature, but it would be better to create something like eslint-plugin-scss first 😄
By the way, Stylelint can also check SCSS if you add a plugin.

1. Does Eslint even support multiple languages in one file? Eslint is going the way of multi-language support, but so far it seems like only one language at time is supported (not sure, but see Bug: Cannon use processor and recommended configs together eslint/markdown#353)
2. How do we go about preprocessors?

I don't know much about it, but it might be relevant.
eslint/rfcs#105
eslint/css#65

[ota-meshi]

eslint-plugin-css is intended to check the style defined in a JavaScript object.
However, later @eslint/css was released and the namespace conflicted, so I think the name will be changed in the future 😓

Some people say that the name eslint-plugin-css is misleading because it is a plugin that can check CSS files. However, at the time, ESLint did not have the concept of language plugins, and I thought that ESlint-plugin-CSS meant a plugin that checks CSS defined in JS(ES).

[JounQin]

I love eslint-plugin-css by the way.

The users can choose their own preferred namespace anyway.