noSvelteClassDirective (HTML)

Language HTML

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noSvelteClassDirective
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- svelte

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noSvelteClassDirective": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow Svelte’s class: directive.

The class: directive adds one class to an element when a condition is true. Since Svelte 5.16, the class attribute accepts objects and arrays, which can do the same. Svelte recommends the class attribute, because an object or an array can add several classes with one condition, and can be combined with other class values, such as the classes that a component receives from its parent.

Objects and arrays in the class attribute need Svelte 5.16 or later. This rule doesn’t check which Svelte version your project uses, so turn it off if your project uses an older version.

Examples

Invalid

1
<div class:active={isActive}></div>

code-block.svelte:1:6 lint/nursery/noSvelteClassDirective ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This class: directive can be replaced with the class attribute.
  
  > 1 │ <div class:active={isActive}></div>
      │      ^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Since Svelte 5.16, the class attribute accepts objects and arrays. Unlike the directive, they can add several classes with one condition and can be combined with other class values.
  
  ℹ Move the class into the element's class attribute, using an object such as class={{ active: isActive }}.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<div class:active></div>

code-block.svelte:1:6 lint/nursery/noSvelteClassDirective ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This class: directive can be replaced with the class attribute.
  
  > 1 │ <div class:active></div>
      │      ^^^^^^^^^^^^
    2 │ 
  
  ℹ Since Svelte 5.16, the class attribute accepts objects and arrays. Unlike the directive, they can add several classes with one condition and can be combined with other class values.
  
  ℹ Move the class into the element's class attribute, using an object such as class={{ active: isActive }}.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<div class={{ active: isActive }}></div>
2
<div class={{ active }}></div>
3
<div class={["button", isActive && "active"]}></div>
4
<div class={isActive ? "active" : "inactive"}></div>

References

Svelte class documentation