Class Peek

A small VSCode extension that lets you ⌘-click (or Ctrl-click on Windows/Linux) any class name in a JSX/TSX file and jump straight to where it's defined — even when the class is buried inside a clsx / cn / classnames / cva / tv wrapper. Or just hover for an inline preview without leaving the line.

Currently shipping on the VS Code Marketplace as aritoton.class-peek.

Why it exists

The existing CSS Peek is great, but its issue #82 ("add support for clsx/classnames") has been open since July 2020. That's the painpoint — every project I touch at work uses one of those helpers, so peek-definition silently stops working the moment the class moves out of a plain string literal.

What ships today

• AST traversal through helpers — works the same whether you write className="p-4" or className={cn("p-4", isActive && "bg-accent")}. Configurable helper list so your codebase's custom wrapper joins the party.
• Tailwind v4 @theme reverse lookup — bg-accent resolves to --color-accent; text-lg to --text-lg. Spacing utilities fall back to the bare --spacing calc base when no specific value is defined. Hyphenated sub-prefixes (gap-x-4, space-y-2) and negative utilities (-mt-4) all resolve to the right token.
• @apply chain peek — ⌘-click btn and you see both the .btn rule itself and every rule that composes it via @apply, in one peek panel.
• Hover preview (v0.2) — hover any class to see the resolved CSS inline: rule body for plain classes, the @theme declaration for Tailwind tokens, the composing rules for @apply hits. No jump required.

Why small on purpose

One hotkey, one job. If it can't replace CSS Peek for the cases CSS Peek already handles, that's fine — the wedge is the cases it doesn't. Things still deliberately out of scope: find-references, rename, SCSS &-nesting, styled-components, monorepo path resolution. Each of those is its own project.