useQwikClasslist

JSX and TSX

Summary

Rule available since: v2.1.4
Diagnostic Category: lint/nursery/useQwikClasslist
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- qwik
Sources:
- Same as qwik/prefer-classlist

Description

Prefer using the class prop as a classlist over the classnames helper.

This rule encourages the use of class prop which natively supports strings, objects, and arrays, enabling fine-grained reactivity and optimal performance. Using utilities like classnames can interfere with Qwik’s reactivity model and prevent the framework from optimizing component updates. Prefer using the built-in class prop for best results.

For more information, see: Qwik documentation on class bindings

Examples

Invalid

1
<div class={classnames({ active: true, disabled: false })} />

code-block.jsx:1:6 lint/nursery/useQwikClasslist ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Avoid third-party classnames utilities with Qwik components
  
  > 1 │ <div class={classnames({ active: true, disabled: false })} />
      │      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Qwik’s built-in class prop handles:
    - Conditional classes via objects: class={{ active: isActive }}
    - Dynamic string concatenation
    - Array combinations
    
    External utilities break Qwik’s:
    - Fine-grained reactivity tracking
    - Resumability optimizations
  
  ℹ Use native Qwik class binding as shown in Qwik Rendering: Class Bindings (Official Docs).

Valid

1
<div class={{ active: true, disabled: false }} />

How to configure

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