Skip to content

Feat/initial extension#1

Open
oddcelot wants to merge 5 commits into
unocss:mainfrom
oddcelot:feat/initial-extension
Open

Feat/initial extension#1
oddcelot wants to merge 5 commits into
unocss:mainfrom
oddcelot:feat/initial-extension

Conversation

@oddcelot

@oddcelot oddcelot commented Jun 23, 2026

Copy link
Copy Markdown

Summary

Adds a Zed extension for UnoCSS, backed by the official @unocss/language-server — completion, hover, color previews, and matched-utility underlining.

This is split out of unocss/unocss#5227, which originally bundled the extension together with the server's new semanticTokens capability. The server-side change stays in the monorepo as this repo is the standalone extension that consumes it.

Why a new extension

There's an existing community extension (bajrangCoder/zed-unocss), but it relies on a fork of the language server and only attaches to TSX. This one uses the official server and additionally attaches to plain TypeScript and CSS, so Lit components (class="..." inside html`...` in .ts files) and stylesheets get completion, hover, and color previews too.

What's in here

  • Rust/wasm extension (zed_extension_api) that fetches @unocss/language-server from npm on first use rather than vendoring it, with an offline fallback to an already-installed copy and a binary settings override for pointing at a local build.
  • Settings forwarding — Zed lsp.unocss.settings are wrapped under the unocss namespace the server expects (unless already nested); initialization_options are forwarded too.
  • Language mapping — maps Zed language names to the server's LSP languageIds, attaching to HTML, CSS, JavaScript, TypeScript, TSX, Vue, Svelte, Astro, Markdown, PHP, ERB (plus Elm/Marko/Pug, which only match when the user has those community language extensions installed).
  • Docs — a README and an example .zed/settings.json covering setup, the Lit .ts/.js pipeline-filter requirement, and the opt-in underline configuration.

Underlining matched utilities

The server emits each matched utility as a unocss semantic token (an editor-agnostic equivalent of the VSCode underline decoration). As part of this work the server's semanticTokens default was switched from off to on, so tokens are emitted by default (set unocss.semanticTokens: false to opt out) — the earlier off-by-default behavior in unocss/unocss#5227 is superseded.

Rendering the tokens in Zed is still opt-in on the editor side: enable per-language semantic_tokens, then add a semantic_token_rules style under global_lsp_settings in user settings. The README documents both steps.

Notes for reviewers

  • Not yet published to the Zed registry — the unocss ID there is currently the community extension, so publishing needs an ID takeover coordinated with the Zed maintainers. For now it installs as a dev extension.
  • extension.toml authors/repository may want adjusting to the org's preference 🙂
  • Testing is a bit hard, since it relies on the couterpart changes on the monorepo for the semantic tokens and you have to override the path to the LSP ( but doable)

Tip

The semantic tokens are quite nice and since this has to be configured in user settings anyway, you can adjust it to your heart's content.
 2026-06-23 um 19 16 16

oddcelot added 5 commits June 23, 2026 09:20
Runs the official @unocss/language-server for completion, hover, color
previews and matched-utility underlining. Auto-installs the server from
npm via Zed's bundled Node, honoring a settings binary override.
@oddcelot

Copy link
Copy Markdown
Author

Oh and btw: colors swatches work nicely too now (Zed apparetly only accepts RGB-esque color formats, so a bit of normalization was needed on the LSPs end)
grafik

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant