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