Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Add support for CSS linting with @eslint/css #713

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
marekdedic opened this issue May 7, 2025 · 5 comments
Open

Add support for CSS linting with @eslint/css #713

marekdedic opened this issue May 7, 2025 · 5 comments
Labels
enhancement New feature or request

Comments

@marekdedic
Copy link
Contributor

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?

@marekdedic marekdedic added the enhancement New feature or request label May 7, 2025
@JounQin
Copy link
Collaborator

JounQin commented May 7, 2025

@marekdedic
Copy link
Contributor Author

marekdedic commented May 7, 2025

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
Copy link
Member

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
Copy link
Member

ota-meshi commented May 8, 2025

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
Copy link
Collaborator

JounQin commented May 8, 2025

I love eslint-plugin-css by the way.

The users can choose their own preferred namespace anyway.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants