SXL Resolver

#What is SXL Resolver

SXL Resolver is an extension for VS Code and Cursor that adds IntelliSense for design tokens directly in the code editor. Hover over a token reference in JSON or over var(--name) in CSS — and see an instant value preview.

#Two modes of operation

SXL Resolver supports two entry points:

1. JSON / JSONC — token references

In JSON files, hovering over {token.path} shows:

• The resolved token value
• Token type
• Source path

{
  "text-primary": {
    "$type": "color",
    "$value": "{color.brand.primary}"
  }
}

Hovering over {color.brand.primary} → hover with color preview #0066FF.

2. CSS and related languages — var(--name)

In CSS, SCSS, Less, Sass, TypeScript, TSX, JavaScript, JSX, Vue, Svelte, HTML, hovering over var(--color-primary) shows:

• The source token the variable is mapped to
• Value
• Type

.button {
  background-color: var(--color-primary);
}

Hovering over var(--color-primary) → hover with value preview from the JSON token.

#Installation

#VS Code / Cursor Marketplace

Search for SXL Resolver in Extensions and click Install.

#From VSIX

code --install-extension sxl-resolver-2.1.0.vsix

#How it works

#JSON Hover Provider

Scans JSON and JSONC files in the workspace. When hovering over a {...} fragment:

1. Extracts the token path
2. Looks up the token via TokenResolver
3. Builds hover using HoverBuilder

#CSS Hover Provider

Scans CSS and related languages. When hovering over var(--...):

1. Extracts the CSS variable name
2. Looks for a reverse mapping (CssMapping) — which JSON token corresponds to this variable
3. If not found — searches in CssVariableStore (native custom properties from :root)
4. Builds hover via the same HoverBuilder

#Settings

#Supported languages

#Related sections

• Tokens to Code — CSS/Swift/Kotlin generation
• Scopes & Code Syntax — Code Syntax settings
• Transformer — CLI for code generation
• Bridge — connecting to Figma