noDuplicateClasses (JavaScript)

Summary

Rule available since: v2.4.0
Diagnostic Category: assist/source/noDuplicateClasses
Sources:
- Inspired from better-tailwindcss/no-duplicate-classes

How to enable in your editor

1
{
2
  "editor.codeActionsOnSave": {
3
    "source.action.noDuplicateClasses.biome": "explicit",
4
    "source.fixAll.biome": "explicit"
5
  }
6
}

1
{
2
  "code_actions_on_format": {
3
    "source.action.noDuplicateClasses.biome": true,
4
    "source.fixAll.biome": true
5
  }
6
}

Use the source action code source.action.noDuplicateClasses.biome

How to configure

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "noDuplicateClasses": "on"
6
      }
7
    }
8
  }
9
}

Description

Remove duplicate CSS classes.

Detects and removes duplicate CSS classes in JSX class and className attributes, as well as in utility function calls like clsx, cn, cva, etc.

Duplicate classes are redundant and can indicate copy-paste errors or merge conflicts.

Examples

1
<div class="flex flex" />;

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 │ <div·class="flex·flex"·/>;
      │                 -----

1
<div class="p-4 text-red-500 p-4 bg-white" />;

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 │ <div·class="p-4·text-red-500·p-4·bg-white"·/>;
      │                              ----

Options

Use the attributes option to specify additional JSX attributes to check. Use the functions option to specify utility functions to check (e.g., clsx, cn, cva).