IDE Resolver

#What IDE Resolver Does

IDE Resolver adds design-token IntelliSense in VS Code-compatible editors. The extension is published in marketplaces as SXL Resolver, so marketplace search and Command Palette entries can still use that name.

• hover for {token.path} in JSON/JSONC;
• hover for var(--token-name) in CSS/SCSS and related files;
• autocomplete for CSS custom properties inside var(--...);
• raw -> resolved values with alias chain;
• go-to-definition for tokens;
• 35+ token types supported: color, typography, spacing, sizing, dimension, border, shadow, effects, transition, grid, and more;
• CSS-first resolution strategy: current file -> configured CSS sources -> nearby CSS/SCSS files -> workspace, with JSON fallback only when CSS variable is not declared;
• JSON and CSS both use context-aware token scope: the nearest token root relative to the active file is preferred first.

#For Designers Working With JSON

Designers usually work directly with exported DTCG-style JSON/JSONC token files. Configure sxlResolver.tokenPaths and hover token references such as {color.brand.primary} or {spacing.reg.md} to inspect the resolved value and alias chain.

Resolver does not modify token files. It only reads JSON/JSONC, resolves references in memory, and shows previews. This makes it safe for token reviews, naming audits, and checking whether a token still points to the expected source.

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

tokenPaths can contain workspace-relative paths or absolute paths. Prefer workspace-relative paths when the setting is shared with a team.

#What Developers See In CSS/SCSS

• Hover var(--space-md) in padding to get the final numeric value (8px, 12px, etc.).
• Hover var(--font-title) in font to get typography preview and key parts (font-family, font-size, line-height, font-weight).
• For color, gradient, and effect tokens, Resolver shows a visual preview plus the final resolved value.
• Start typing var(--...) to get CSS custom property completion from the active workspace and configured package sources.

When CSS variables are shipped from another package, configure sxlResolver.cssVariableSources. Resolver follows package entrypoint imports and indexes only allowlisted files, instead of scanning all of node_modules.

tokens-manifest.json is optional. Without a manifest, Resolver still reads CSS variables, resolves var(...) chains, and infers broad types from CSS values. It does not generate manifest files or write any files into the user's repository. Add a manifest only when you need exact token metadata for CSS variables.

#Supported Languages

• JSON: json, jsonc
• CSS family: css, scss, less, sass
• Related files: typescript, typescriptreact, javascript, javascriptreact, vue, svelte, html

#Installation

#VS Code

Search for SXL Resolver in the VS Code Marketplace.

#Cursor

Cursor uses an OpenVSX-compatible marketplace. Search for SXL Resolver in the Cursor Extensions panel.

If search is delayed due to marketplace caching, install from VSIX:

1. Command Palette
2. Extensions: Install from VSIX...
3. Select your .vsix package

#Settings

#Where Settings Live

Resolver settings are IDE settings, not runtime application config.

• Use .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.
• Use a .code-workspace file and put the settings under the top-level "settings" key when one IDE window contains multiple repositories.
• Use User Settings JSON for personal machine-specific paths. In VS Code or Cursor, open Command Palette and run Preferences: Open User Settings (JSON).

For team setups, prefer committed workspace settings with relative paths. Use absolute paths only for personal settings or multi-repository local workspaces that cannot be expressed relatively.

#CSS Sources

Use CSS sources when an application consumes variables from a published design-system package, for example @org/design-system-styles, or from generated CSS files inside the same workspace.

Do not enable broad node_modules scanning. It is slow, can index multiple versions of the same package, and can mix variables from unrelated products or themes. Configure explicit source groups instead.

#Manifest Or No Manifest

Resolver supports both CSS modes.

Without a manifest, configure only entrypoints or paths. Resolver reads CSS files, follows relative @import files, resolves CSS variable chains, and infers broad types such as color, gradient, typography, dimension, duration, number, shadow, or text. It never creates tokens-manifest.json or any other generated files.

With a manifest, add manifests when the design-system package or generated workspace output includes token metadata. Manifest metadata is useful when CSS values are ambiguous. For example, 8px can represent spacing, sizing, fontSize, borderRadius, or borderWidth; CSS alone cannot distinguish those safely.

To generate tokens-manifest.json, use @sxl-studio/token-transformer with a platform: manifest output. If the consumed design-system package already ships manifest files, application repositories only need to reference them; they do not need to run Transformer.

Manifest metadata can preserve any Resolver token type emitted by your token pipeline, including color, gradient, typography, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, spacing, sizing, borderRadius, borderWidth, opacity, shadow, boxShadow, blur, effects, grid, transition, duration, and composition.

Composite JSON tokens exported as CSS are shown as their CSS value. Use JSON token files when you need the full composite object breakdown.

#From A Published Package

Replace the placeholder package name, entrypoints, manifests, and appliesTo globs with your project values.

{
  "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 CSS files are stored 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/**"]
    }
  ]
}

#Source Fields

#Resolution Priority

1. Local CSS variables in the current file.
2. Matching cssVariableSources groups.
3. Other scanned workspace CSS variables by proximity.
4. JSON token mapping fallback from figma.codeSyntax.Web or token path kebab-case.

If two products define the same variable name, split them into separate source groups and scope them with appliesTo. This prevents a file from one app or package from receiving a value from another product source.

#Commands

The installed extension commands use the marketplace extension prefix:

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

#Usage Flow

1. Configure token folders in sxlResolver.tokenPaths.
2. For CSS variables from packages or generated workspace files, configure sxlResolver.cssVariableSources.
3. Open JSON/JSONC or CSS/SCSS files.
4. Hover token references ({...}) or var(--...).
5. Use Reveal Token in File for direct source navigation.

#Team Publishing Note

Recommended release flow:

1. Publish to VS Code Marketplace.
2. Publish to Open VSX.

Publishing only to VS Code Marketplace does not guarantee Cursor discoverability.