Skip to content

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

Open
themixednuts wants to merge 2 commits intozed-extensions:mainfrom
themixednuts:use-tree-sitter-htmlx-svelte
Open

Switch to tree-sitter-htmlx-svelte grammar#72
themixednuts wants to merge 2 commits intozed-extensions:mainfrom
themixednuts:use-tree-sitter-htmlx-svelte

Conversation

@themixednuts
Copy link

@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

Old:
image

New:
image

@cla-bot
Copy link

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
Author

@cla-bot check

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

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Outdated syntax highlighting Syntax highlighting for {@attach} directive is missing

1 participant