(4/5) Feature: token() VS Code Intellisense Extension #5943
Conversation
5t3ph
added
Feature
|
5t3ph
changed the title
📚 Branch Preview Links🔍 First Generation Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
| "@adobe/postcss-token": "workspace:*", | ||
| "@adobe/swc-tokens": "workspace:*", |
There was a problem hiding this comment.
Makes versions workspace relative to assist in keeping changes in sync
TBD: an alternate method if we eventually decide to publish these packages for consumers
| - **Resolved value** – A final primitive value | ||
| - **Custom property** – A CSS variable (`var(--swc-gray-500)`) | ||
|
|
||
| ## Upon Token Data Update |
There was a problem hiding this comment.
This seemed like the lightest-weight way to enable this across the affected packages, but we can evolve this process down the line if needed.
This should not need to be run often, as token values don't change frequently.
| @@ -0,0 +1,201 @@ | |||
| Apache License | |||
There was a problem hiding this comment.
Dupe required here to avoid a flag for deploying the extension
cdransf
left a comment
cdransf
left a comment
There was a problem hiding this comment.
Looks good! Just one minor comment. ✨
| }); | ||
|
|
||
| client.start(); | ||
| // .then(() => { |
There was a problem hiding this comment.
Should we remove this block of comments? We can always restore from git history if needed.
nikkimk
left a comment
nikkimk
left a comment
There was a problem hiding this comment.
I had lots of fun playing with this locally. Instructions were clear. I had no issue using the extension. LGTM
rise-erpelding
left a comment
rise-erpelding
left a comment
There was a problem hiding this comment.
Installed the extension and it seems to work great! Looking forward to using it when writing CSS!
…/adobe/spectrum-web-components into seckles/feature/context-toolbar
…adobe/spectrum-web-components into seckles/feature/component-styles
…/adobe/spectrum-web-components into seckles/feature/swc-vscode-token
… into seckles/feature/swc-vscode-token
Description
This is PR number 4 of 5
Review the extension's README for the install instructions, key features, and examples of how the extension works.
Motivation and context
This PR adds a VS Code extension that provides IntelliSense for
token('…')usage, backed by@adobe/swc-tokens. It focuses on improving authoring ergonomics (autocomplete, quote handling, and diagnostics) while keeping the implementation predictable, testable, and aligned with existing token tooling.The extension is implemented using a language-server-style split to keep token logic editor-agnostic and easy to evolve.
Why this approach
Language server–first design
Token parsing, completions, and diagnostics live in a pure server layer, separate from VS Code UI concerns.
This makes the logic:
Pre-generated token data
The extension consumes a generated
tokens.jsonrather than loading packages at runtime.This keeps:
Context-aware completions
Completions understand real CSS usage patterns, including:
calc()andvar()callstoken()valuesThe goal is to avoid clobbering syntax while still being helpful during incremental edits.
Normalization over strictness
Common authoring mistakes (e.g. extra whitespace inside quotes) are automatically corrected where safe.
True errors (unknown tokens, missing quotes) still surface as diagnostics.
This keeps feedback useful without being noisy or blocking.
Testing strategy
Tests focus on realistic editor behavior:
This helps catch subtle regressions that wouldn’t show up in snapshot-style tests.
Out of scope / intentional constraints
These constraints keep the extension focused and predictable.
Screenshots
Author's checklist
Reviewer's checklist
Manual review test cases
The unit and integration tests should be fairly comprehensive, but I encourage you to install the extension and try it out!