css-var-kit

A VS Code extension for CSS variable tooling — diagnostics, type-aware completion, go-to-definition, and rename powered by the css-var-kit LSP.

Features

Diagnostics — undefined variables, type mismatches, inconsistent definitions
Type-aware completion — suggests only variables whose type matches the property (e.g. color variables for color:, length variables for padding:)
Go to definition — jump to CSS variable declarations
Rename — rename a variable across all files

The extension automatically finds the cvk binary. Install it via npm:

npm install -D css-var-kit

If the binary is not found in node_modules, it will be resolved according to the Binary Resolution Order.

If your project has a cvk.json (or cvk.jsonc), the extension uses it directly.

If no config file exists, you can configure rules via VS Code settings:

Setting	Default	Description
`cvk.path`	`null`	Path to the `cvk` binary
`cvk.rootDir`	`"."`	Root directory for analysis
`cvk.lookupFiles`	`["*/.css"]`	Glob patterns for CSS files
`cvk.rules.noUndefinedVariableUse`	`"error"`	Undefined variable usage
`cvk.rules.noVariableTypeMismatch`	`"error"`	Variable type mismatch
`cvk.rules.noInconsistentVariableDefinition`	`"error"`	Inconsistent variable definitions
`cvk.rules.enforceVariableUse`	`"off"`	Enforce CSS variable usage
`cvk.lsp.log`	`false`	`true` to enable LSP logging to stderr
`cvk.lsp.logFile`	`null`	LSP log file path

When cvk.json exists, it takes full precedence and VS Code settings are ignored.

See Configuration & Rules for details on rules and configuration options.

The extension resolves the cvk binary in this order:

cvk.path setting — explicit path configured in VS Code settings
node_modules — @css-var-kit/cli-{platform}-{arch} package in the workspace
PATH — cvk on the system PATH
Bundled binary — platform-specific binary shipped with the extension