CVA Devtools Vue

Inline previews, rich hovers, an edit panel, workspace diagnostics, and refactor support for class-variance-authority configs referenced from Vue and TypeScript files.

Install

Search for CVA Devtools Vue in the Extensions view, or from the CLI:

code --install-extension RhodriJonesUpmind.cva-devtools-vue

The pattern it targets

A useStyles(paths, meta, config) helper with co-located CVA configs:

// card.config.ts
import { cva } from "class-variance-authority";
export default {
  card: {
    root: cva("rounded-lg border p-4", {
      variants: { variant: { flat: "bg-white", minimal: "bg-transparent" } },
    }),
  },
};

<!-- Card.vue -->
<script setup lang="ts">
import { useStyles } from "./useStyles";
import config from "./card.config";
const styles = useStyles(["card"], { variant: props.variant }, config);
</script>

<template>
  <div :class="styles.card.root">...</div>
</template>

Features

Inline class previews. Every styles.x.y.z reference shows its resolved base classes inline as ghost text, with suffix counts for variants / compoundVariants / issues.

Rich hover info. Hover a reference to see the config path, Tailwind-highlighted base classes, every variant with its option classes, and every compound variant with its conditions.

Editor panel. Click the ✎ CodeLens above any reference to open a full editor — edit base / variant / compound class strings, delete variants or options, add a class: field to a compound, and commit changes atomically back to the config file. Detected issues are surfaced inline and as a summary at the top of the panel.

Workspace diagnostics. Scans every *.config.ts and every .vue / .ts / .tsx file on activation and surfaces issues in the Problems panel:

Unused CVA definitions (no consumer references)
Unresolved styles.x.y.z references (dead call sites)
Empty variant options never matched by a compound
Compound variants that do nothing (no class, empty class, or no conditions)
Compound variants referencing unknown variants or option values
Variant groups whose every option is empty and that no compound references

Unused-definition diagnostics include a 💡 quickfix — Delete unused CVA — that removes the entire cva() property and prunes empty parent objects.

Go to Definition. F12 or Cmd+click on a reference jumps to the cva() call. An arrow (→) CodeLens above each reference provides a plain-click alternative.

Rename (F2). Rename any segment of a reference — not just the last. Updates the config key and every matching reference across every workspace file bound to that config, atomically.

Variant preview. Click the 👁 CVA Preview status-bar button to open a preview panel. Pick values for any variant used in the current file; inline decorations for matching refs switch to show the resolved classes for that combination (prefixed with 👁). Non-matching refs stay in normal mode.

Requirements

VS Code 1.80+
A Vue 3 project (single-file components with .vue files)
class-variance-authority installed, and a useStyles(paths, meta, config) helper pattern for consuming configs.

Commands

All available from the command palette:

CVA Devtools Vue: Open editor panel — open the edit panel at the cursor's reference.
CVA Devtools Vue: Preview variants for current file — open the preview panel.
CVA Devtools Vue: Scan workspace for issues — re-run the workspace diagnostic scan.

Settings

Setting	Default	Description
`cvaDevtoolsVue.configFilePattern`	`*.config.ts`	Glob pattern for CVA config files.

Patterns supported

The parser handles:

Inline cva calls: root: cva("...")
Named cva consts referenced from the export: root: rootVariants
{ variants } shorthand property assignments
Identifier-valued variants: variants: { size: sharedSizes }
Template literals with interpolation from local consts: cva(\${baseClasses} ...`)`
String-literal property keys ("2", "flush-carded", "2xl")
PropertyAccessExpression dereferencing: color: variants.color

Unresolved ${ident} interpolations from external imports are kept as markers.

License

MIT