feat: Added the no-unused-class-name rule

[marekdedic]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: 426ca67

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
eslint-plugin-svelte	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[marekdedic]

Well, this is going to be interesting... :D
@ota-meshi if I understand it correctly, svelte-eslint-parser doesn't actually parse the styles - SvelteStyleElement.children is just a SvelteText with the raw CSS - this isn't gonna be enough for this rule. Any plans to parse the CSS the same way as JS in svelte-eslint-parser? (And yes, it's going to need to support languages like SCSS and preprocessors as well - like it supports TS).

[ota-meshi]

I currently have no plans to allow svelte-eslint-parser to parse <style>. Converting many CSS flavors into an AST that ESLint understands is difficult.

To implement the no-unused-class-name rule, I think we need to extract the CSS of the <style> tag and parse it with postcss. Next, I think it is necessary to extract the selector from the postcss AST and parse it with postcss-selector-parser.

If you want to support CSS preprocessors, please refer to the code around the following link.
https://github.com/ota-meshi/eslint-plugin-svelte/blob/09b01ad1ce208c6dbbf8357914d3aadb71c57a4e/src/shared/svelte-compile-warns/index.ts#L24

[baseballyama]

Why do we need this rule?
Already Svelte compiler itself has this feature.

[ota-meshi]

The purpose of this rule is to detect classes specified on elements that were not used in CSS. #401.
It does not detect unused selectors (classes) in CSS.
I think this rule can be useful if your project doesn't use classes outside of *.svelte CSS.

[baseballyama]

Got it!

[marekdedic]

Waiting for sveltejs/svelte-eslint-parser#318

[marekdedic]

Obsoleted by #489