css-var-kit

A simple, lightweight toolkit for building design systems with CSS variables, offering type-aware completion and linting.

Demo

Installation ⬇️

npm install -D css-var-kit

Or install via Cargo:

cargo install css-var-kit

Commands 🧰

cvk lint [files...]

Lints CSS variables and their usage. Detects undefined variables, type mismatches, inconsistent definitions, and enforces variable usage for design tokens.

Supports .css and .scss, plus <style> blocks in .vue, .svelte, .astro, and .html.

👉 Configuration & Rules

Suppressing diagnostics

Use /* cvk-ignore */ comments to suppress diagnostics for the next declaration:

/* Suppress all rules */
/* cvk-ignore */
.btn {
  color: var(--undefined);
}

/* Suppress a specific rule */
/* cvk-ignore: no-undefined-variable-use */
.btn {
  color: var(--undefined);
}

cvk lsp

A language server for CSS variables that offers type-aware variable completion and lint warnings.

Supported Features

• Show diagnostics from cvk lint
• Type-aware variable completion
• Rename variable
• Go to defintition
• Hover preview of resolved var(--name) values, with a color swatch when the resolved value is a color

Editor Integration

VSCode

👉 Visual Studio Marketplace

Helix

# languages.toml
[language-server.css-var-kit]
command = "cvk"
args = ["lsp"]

[[language]]
name = "css"
language-servers = ["css-var-kit"]

Zed

Coming soon...

Planned Features 📝

• cvk prune command
  • Strips unused CSS variables from the final build output.
• Adding configuration examples for Vim, Neovim, and Emacs.