Class Name Helper

Provides a code action for fast class name refactorings for Svelte + React, speeding up your Tailwind / utility-CSS workflows.

Shows up as a code action (bulb icon / Alt+Enter), no explicit command needed.
Wrap and unwrap, with configurable helper functions like cn or clsx.

No more class={cn(…)} hand-typing 😌

• Example: class="px-4" → class={cn("px-4", <cursor>)}
• Example: class={fooClasses} → class={cn(fooClasses, <cursor>)}

• Example: class={cn("px-4")} → class="px-4"
• Example: class={cn(fooClasses)} → class={fooClasses}

Features

• Usable via code action (Alt+Enter targeting caret) or the command palette command.
• Works in Svelte (class) and React / TSX (className).
• Configurable wrapper function name (cn, cx, clsx, …).
  • Config property: cnHelper.functionName (default: cn).

Install

• Not published to the Marketplace yet (still dogfooding). Install via VSIX for now.

• Pre-build VSIX: Download the .vsix from a GitHub Release

  • Install via VS Code: Extensions → … → Install from VSIX …

• Built the VSIX yourself: pnpm install → pnpm run install:local

• More details: DEVELOPMENT.md

Wait, what is cn? 🤔

cn is a class composition helper you might define in your web frontend project:

• It turns “anything” into a class string (via clsx).
• Then de-dupes / resolves conflicting Tailwind classes (via twMerge from tailwind-merge).
• Think: “Compose my classes — but don’t leave me with p-2 p-4” duplicates.
• Useful in cases where you don't want to use tailwind-variants.

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

Minimal example:

<span
    class={cn(
        "px-2 py-1 text-sm",
        active ? "text-white" : "text-zinc-400",
        disabled && "text-zinc-600",
        className /* allow overrides → composition */
    )}
>
    {label}
</span>

Extension footprint

• Adds one code action / refactor command for supported files.
• Activates only for svelte, javascriptreact, and typescriptreact files.
• Does not scan the project, index files, or run background analysis.
• Work is local to the current line at the caret (small regex-based match / replace).
• Expected performance impact: no noticeable impact in normal use.

Limits (Intentional)

• Complex expressions inside {…} are left unchanged
• Multi-argument calls are not unwrapped

Development

Developer setup / local packaging docs: see DEVELOPMENT.md.