Skip to content

Switch to tree-sitter-htmlx-svelte grammar#72

Open
themixednuts wants to merge 4 commits into
zed-extensions:mainfrom
themixednuts:use-tree-sitter-htmlx-svelte
Open

Switch to tree-sitter-htmlx-svelte grammar#72
themixednuts wants to merge 4 commits into
zed-extensions:mainfrom
themixednuts:use-tree-sitter-htmlx-svelte

Conversation

@themixednuts
Copy link
Copy Markdown

@themixednuts themixednuts commented Mar 16, 2026

Summary

Replaces the tree-sitter grammar with tree-sitter-htmlx-svelte, which provides language injection into all template expressions.

The previous grammar parsed template expressions ({foo}, {@const x = 1}, {@render children()}, {#each items as item}, etc.) as opaque raw text with no language injection — meaning no syntax highlighting inside curly braces in the markup. This grammar injects JavaScript or TypeScript (based on <script lang="ts">) into every expression context, so template code gets full highlighting.

What's new

  • Template expression injection — all {expressions}, block conditions, each bindings/keys, await patterns, and shorthand attributes get JS/TS syntax highlighting
  • @attach support — the new Svelte 5 directive is fully parsed and highlighted
  • Snippet parameter injection{#snippet foo(bar, baz)} parameters are injected as JS/TS, not raw text
  • Snippet type parameters{#snippet foo<T>(bar: T)} generics are injected as TypeScript
  • Spread attributes{...rest} content is handled via JS injection, so ... gets proper operator highlighting
  • Inline style CSS injectionstyle="..." attribute values are injected as CSS for property highlighting
  • Tag attribute comments// line comments and /* */ block comments inside element tags are parsed and highlighted

Updated queries

  • highlights.scm and injections.scm rewritten for the new node structure
  • All Svelte block keywords (if, each, await, key, snippet, render, attach, const, html, debug) captured as @keyword.control
  • Directives, component tags, namespaced tags, and member-access tags all have dedicated captures

Closes #71
Closes #36
Closes #65
Closes #58

Old:
image

New:
image

@cla-bot
Copy link
Copy Markdown

cla-bot Bot commented Mar 16, 2026

We require contributors to sign our Contributor License Agreement, and we don't have @themixednuts on file. You can sign our CLA at https://zed.dev/cla. Once you've signed, post a comment here that says '@cla-bot check'.

@themixednuts
Copy link
Copy Markdown
Author

@cla-bot check

@cla-bot cla-bot Bot added the cla-signed label Mar 16, 2026
@cla-bot
Copy link
Copy Markdown

cla-bot Bot commented Mar 16, 2026

The cla-bot has been summoned, and re-checked this pull request!

- Add explicit SCSS, SASS, and LESS injection rules before CSS fallback
- Prevent CSS fallback from overriding preprocessor injections when lang attribute is present
- Add inline style attribute CSS injection
- Remove attribute_name captures from injection queries to preserve highlight colors
@alayshoo
Copy link
Copy Markdown

Downloaded Zed yesterday, worked on it today, was kind of planning to go back to VSCode or one of its forks because of the poor Svelte highlighting, but this fixed it. Get on with merging it and updating the svelte extension quickly please

@themixednuts
Copy link
Copy Markdown
Author

themixednuts commented May 23, 2026

Downloaded Zed yesterday, worked on it today, was kind of planning to go back to VSCode or one of its forks because of the poor Svelte highlighting, but this fixed it. Get on with merging it and updating the svelte extension quickly please

I think its fair to give them time. I'm new on the scene relatively. The stuff I have is pretty much fresh implementation. Along with all the recent dependency issues going on, I would give them some slack on the vetting timeframes :)

Let me know of any issues in the mean time, I want this to be as best implemented as possible!

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

Projects

None yet

2 participants