noAstroConflictingSetDirectives (HTML)

Summary

Rule available since: v2.5.15
Diagnostic Category: lint/nursery/noAstroConflictingSetDirectives
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- astro
Sources:
- Same as astro/no-conflict-set-directives

How to configure

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

Description

Disallow conflicting content sources on Astro elements.

The set:html and set:text directives replace an element’s child content. Combining either directive with another content source makes it unclear which content should be rendered.

Examples

Invalid

1
<div set:html={content}>Fallback content</div>

code-block.astro:1:6 lint/nursery/noAstroConflictingSetDirectives ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The set:html directive conflicts with another content source.
  
  > 1 │ <div set:html={content}>Fallback content</div>
      │      ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Child content defines the element content here.
  
  > 1 │ <div set:html={content}>Fallback content</div>
      │                         ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The set:html and set:text directives replace child content, so conflicting content sources may be ignored.
  
  ℹ Choose only one content source for this element.
  
  ℹ 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 set:html={html} set:text={text}></div>

code-block.astro:1:6 lint/nursery/noAstroConflictingSetDirectives ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The set:html directive conflicts with another content source.
  
  > 1 │ <div set:html={html} set:text={text}></div>
      │      ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The set:text directive defines the element content here.
  
  > 1 │ <div set:html={html} set:text={text}></div>
      │                      ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The set:html and set:text directives replace child content, so conflicting content sources may be ignored.
  
  ℹ Choose only one content source for this element.
  
  ℹ 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 set:html={content}></div>
2
<div>Fallback content</div>

References

Astro template directives