Source: https://subagentura.tech/blog/building-a-css-variable-language-server/

# Building a CSS variable language server

How a CSS custom-property language server grew across TypeScript and Rust, and why editor integrations make their capabilities explicit.

By [lmn451](https://github.com/lmn451)   27 October 2026

CSS custom properties are easy to define and surprisingly hard to follow across a project. A variable may be declared in one stylesheet, used from a component, overridden by a more specific selector, or injected by a framework configuration. The [TypeScript CSS Variable LSP](https://github.com/lmn451/css-lsp)  began with workspace indexing and editor features for this everyday problem. A Rust implementation now serves a wider set of document contexts and editor integrations.

## Start with the question an editor user asks

Completion is useful, but it does not answer which definition applies at a particular use. The language server also provides hover information, navigation, references, rename, diagnostics, and color tooling. The Rust server tracks CSS selector specificity, source order, and DOM context so a hover can identify the matching definition at the cursor. These tools help explain a token's path through the project instead of treating every declaration as interchangeable.

## Make parsing broad, but keep it bounded

The Rust server indexes CSS-family files and HTML-like documents, including style blocks and inline styles. It can extract CSS-in-JS from supported JavaScript and TypeScript string or template literals, and statically read selected CSS variables from Astro and Vite configuration. “Statically” is deliberate: supported configuration syntax is analyzed, not executed. The implementation accepts bounded, recognizable forms rather than trying to evaluate arbitrary project code.

That gives useful cross-file context while keeping the language server's job understandable. Framework configurations can be expressive programs; executing them as part of editor analysis would create a different safety and reproducibility problem. The current support is scoped to the documented Astro font-variable and Vite SCSS injection cases, not every way a build system might generate CSS.

## Rust and TypeScript serve related, scoped roles

The Rust server is a native executable that any LSP-aware editor can launch. The VS Code extension bundles Rust binaries for supported platforms and falls back to the TypeScript server when a Rust binary is unavailable. The original TypeScript server remains a useful Node-based implementation with project-wide indexing, completion, hover, navigation, rename, diagnostics, and color features.

The implementations are not feature-identical. The Rust README documents capabilities such as CSS-in-JS extraction, DOM-aware hover, and static Astro/Vite configuration analysis that are not listed as TypeScript server features. The TypeScript implementation's own limitations document says its cascade display does not model DOM hierarchy. That is why the VS Code fallback is best described as a compatibility path, not a promise that every Rust-specific analysis is available in either runtime.

## Let editor integrations choose the practical route

The [Rust server repository](https://github.com/lmn451/css-lsp-rust)  documents standalone use through stdio for LSP clients. The [VS Code extension](https://github.com/lmn451/css-variables-vscode)  manages server selection and fallback. Zed consumes Rust release binaries through its extension; editor integrations handle their own platform and launch details.

## Follow the implementation in the projects

Read the Rust server's [feature overview](https://github.com/lmn451/css-lsp-rust#features)  alongside the TypeScript server's [documented features](https://github.com/lmn451/css-lsp#features)  and [known limitations](https://github.com/lmn451/css-lsp/blob/master/LIMITATIONS.md) . For installation links and a live capability summary, visit the [CSS Variables project page](https://subagentura.tech/css-variables/) .

[← All field notes](https://subagentura.tech/blog/) [Explore the projects →](https://subagentura.tech/projects/)