SXL Resolver (VS Code)

SXL Resolver adds design-token IntelliSense to VS Code and Cursor. It reads token JSON/JSONC files and CSS custom properties and shows the resolved value, a visual preview and the alias chain right in the editor. It only reads: token files are never modified and nothing is written into the repository.

Current version: 2.3.4. Requires VS Code 1.85 or newer. Cursor is supported through its Open VSX-compatible registry.

#Installation

VS Code

1. Open Extensions (Cmd+Shift+X on macOS, Ctrl+Shift+X on Windows and Linux).
2. Search for SXL Resolver and press Install.

Cursor

1. Open Extensions in Cursor and search for SXL Resolver.
2. If the latest version is not offered yet, open the extension page on Open VSX and download the .vsix of the version you need. Registry mirrors can lag behind Open VSX.
3. Run the command and select the downloaded file:

Extensions: Install from VSIX...

#Where it works

Multi-root workspaces are supported.

#Token files

1. List the token folders in sxlResolver.tokenPaths in the workspace settings (.vscode/settings.json).
2. Open a JSON or JSONC file from these folders and hover a reference such as {color.brand.primary} or {spacing.reg.md}.

{
  "sxlResolver.tokenPaths": [
    "tokens",
    "packages/design-system/tokens"
  ]
}

Paths are workspace-relative or absolute. Use relative paths in settings shared with the team. Several folders are merged into one token set. Files that write type, value and extensions without the $ are recognised too (sxlResolver.allowNoDollar).

#Hover preview

Hover a token reference. The Result part shows the final value, the Source part shows the alias chain from the reference down to the base token, with the file each token lives in. The token names in Source are links: click one to open its file at the definition.

A colour token in a composition file: the swatch, the final HEX and the chain from the component token down to orange.500 in core.json.

Composite tokens are expanded property by property.

A typography token: Result lists every property with its value, Source shows the alias chain of each property.

A shadow with two layers: x, y, blur, spread and colour of each layer.

The chain depth is capped by sxlResolver.maxChainLength (5 by default). Type icons can be switched off with sxlResolver.showIcons.

Supported token types: colours, gradients and fills; typography and its parts (font family, weight, size, line height, letter spacing, paragraph spacing and indent, text case and decoration); shadows, blurs, backdrop blur, glass and effects; dimension, sizing and spacing; radii, border widths, borders and stroke styles; opacity, numbers, strings and booleans; grid; transitions, durations and cubic-bezier curves; templates and compositions.

#Completion

Typing {orange. in a JSON file: the matching tokens with type icons, and the hover of the highlighted item.

• In JSON the list opens after { and is filtered by the token path.
• In CSS and component files, typing var(-- suggests custom properties from the current workspace and from the configured sources.
• The list is capped by sxlResolver.maxSuggestions (300 by default).

#Go to definition

Hover on {w-button.size.sm.height} in a composition file, a click on the first link in Source, and the editor opens components/WButton.json at the height token.

• Ctrl+Click (Cmd+Click on macOS) or Go to Definition on {token.path} or var(--name) opens the file with the definition.
• The links in the Source part of the hover do the same through the SXL Resolver: Reveal Token in File command.

#CSS variables

By default Resolver scans the CSS, SCSS, Less and Sass files of the open workspace and skips node_modules, .git, dist and build. Hover var(--space-md) in padding to get the final value such as 8px. Hover var(--font-title) to get the typography preview with font-family, font-size, line-height and font-weight. Colours, gradients and effects get a visual preview.

When the variables come from a published design-system package or from generated CSS in another folder, add them to sxlResolver.cssVariableSources. Resolver follows the entry points of the package and their relative @import files and indexes only those files. Do not point it at the whole node_modules: it is slow, can index several versions of one package and mixes variables of unrelated products or themes.

#From a published package

Replace the package name, entry points, manifests and appliesTo globs with the values of your project. manifests is optional, see the Manifest section below.

{
  "sxlResolver.cssVariableSources": [
    {
      "name": "Commerce app styles",
      "package": "@org/design-system-styles",
      "entrypoints": ["commerce/index.css", "components/index.css"],
      "manifests": ["commerce/tokens-manifest.json"],
      "appliesTo": ["apps/storefront/**", "packages/storefront-ui/**"]
    },
    {
      "name": "Operations app styles",
      "package": "@org/design-system-styles",
      "entrypoints": ["operations/index.css", "components/index.css"],
      "manifests": ["operations/tokens-manifest.json"],
      "appliesTo": ["apps/operations/**", "packages/operations-ui/**"]
    }
  ]
}

#From the same workspace

Use paths when the CSS files live in the current repository or when you need an absolute local path.

{
  "sxlResolver.cssVariableSources": [
    {
      "name": "Local design-system styles",
      "paths": [
        "packages/design-system/styles/commerce/index.css",
        "packages/design-system/styles/components/index.css"
      ],
      "manifests": [
        "packages/design-system/styles/commerce/tokens-manifest.json"
      ],
      "appliesTo": ["apps/storefront/**", "packages/storefront-ui/**"]
    }
  ]
}

A source can also be a plain string: a workspace-relative or absolute path to a CSS file or folder.

#Source fields

#Resolution priority

When you hover or complete var(--token-name), Resolver looks in this order:

1. CSS variables declared in the current file.
2. The matching groups of cssVariableSources.
3. Other scanned workspace CSS variables, nearest to the current file first.
4. The JSON token whose Code Syntax Web or kebab-case path matches the variable name.

If two products define the same variable name, split them into separate source groups and limit each one with appliesTo. Then a file of one application never receives a value from another product.

#Manifest

tokens-manifest.json is optional.

Without a manifest, Resolver reads the CSS files, follows the var(...) chains and infers a broad type from the value: color, gradient, typography, dimension, duration, number, shadow or text.

With a manifest the original token types are kept. It matters when a CSS value is ambiguous: 8px can be spacing, sizing, fontSize, borderRadius or borderWidth, and CSS alone cannot tell them apart. Add the manifest files to the manifests field of the source group.

A manifest is produced by Transformer with the manifest platform. If the design-system package already ships manifest files, just reference them: the application repository does not need to run Transformer. Resolver itself never creates manifests or any other files.

Composite tokens exported to CSS are shown as their CSS value. Open the JSON token files when you need the full property breakdown.

#Settings

#Where settings live

Resolver settings are editor settings, not application configuration.

• .vscode/settings.json in the repository, when the whole team should share the same token and CSS sources. Cursor reads VS Code-compatible workspace settings.
• A .code-workspace file, under the top-level "settings" key, when one window contains several repositories.
• User Settings JSON for personal absolute paths. Open it with the command:

Preferences: Open User Settings (JSON)

Commit relative paths. Keep absolute paths in personal settings only.

#Commands

SXL Resolver: Force Refresh Tokens
SXL Resolver: Reveal Token in File

Force Refresh Tokens reloads all token files and CSS variables; the Refresh Tokens button in the status bar does the same. Reveal Token in File opens the file of a token; the links in the hover use it.

#If something does not work

#Privacy

SXL Resolver runs locally in the editor. It reads token and CSS files from the open workspace and the configured sources, and it does not send token files or CSS values to an external service.

#Related pages

• Transformer
• Tokens to code
• Scopes and Code Syntax
• Storybook Addon