consistent-selector-style: What to do with dynamic class/ID names?

[marekdedic]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

9

What version of eslint-plugin-svelte are you using?

3.0.2

What did you do?

<script lang="ts">
  interface Props {
    level: 1 | 2 | 3;
  }

  let { level }: Props = $props();
</script>

<a class={`level-${level}`}>Click me</a>

<style>
  .level-1 {
    margin-left: 10px;
  }

  .level-2 {
    margin-left: 20px;
  }

  .level-3 {
    margin-left: 30px;
  }
</style

What did you expect to happen?

I am honestly not sure what should happen. We can't parse dynamic class names, so at this point probably the only thing you can do is give up on checking any class names? (Same thing would happen with IDs). At best, we could try to parse some prefix/suffix from the dynamic class name and only ignore those? @ota-meshi @baseballyama What do you think?

I can imagine adding a rule flag that would switch between giving up and the current behaviour, but I don't really think the current behaviour is useful in many ways (it essentially bans dynamic class/ID names, just in a more stupid way)...

What actually happened?

3 errors saying I should use a type selector instead

Link to GitHub Repo with Minimal Reproducible Example

N/A, will make a PR instead once agreed on a solution.

Additional comments

No response

[ota-meshi]

Thank you for posting this issue.

At best, we could try to parse some prefix/suffix from the dynamic class name and only ignore those?

This approach might be relatively difficult to implement, but I think it makes sense 👍