no-unused-class-name.md

pageClass	sidebarDepth	title	description	since
rule-details	0	svelte/no-unused-class-name	disallow the use of a class in the template without a corresponding style	v2.31.0

svelte/no-unused-class-name

disallow the use of a class in the template without a corresponding style

📖 Rule Details

This rule is aimed at reducing unused classes in the HTML template. While svelte-check will produce the css-unused-selector if your <style> block includes any classes that aren't used in the template, this rule works the other way around - it reports cases wehre the template contains classes that aren't referred to in the <style> block.

<script lang="ts">
  /* eslint svelte/no-unused-class-name: "error" */
</scrip>

<!-- ✓ GOOD -->
<div class="first-class">Hello</div>
<div class="second-class">Hello</div>
<div class="third-class fourth-class">Hello</div>

<!-- ✗ BAD -->
<div class="fifth-class">Hello</div>
<div class="sixth-class first-class">Hello</div>

<style>
 .first-class {
  color: red;
 }

 .second-class,
 .third-class {
  color: blue;
 }

 .fourth-class {
  color: green;
 }
</style>

🔧 Options

{
  "svelte/no-unused-class-name": [
    "error",
    {
      "allowedClassNames": ["class-name-one", "class-name-two"]
    }
  ]
}

• allowedClassNames ... A list of class names that shouldn't be reported by this rule. Default [].

🚀 Version

This rule was introduced in eslint-plugin-svelte v2.31.0

🔍 Implementation

• Rule source
• Test source