JSX in .tsx diffs comes out inconsistently coloured: intrinsic elements (<section>, <ul>, <li>) and their punctuation stay at the default foreground, attribute names get the generic property colour, and capitalized components (<For>) pick up a colour only by accident (captured as a type identifier). Example that renders badly:
return (
<section class="devices">
<input placeholder="filter..." onInput={(e) => setFilter(e.currentTarget.value)} />
<ul>
<For each={shown()}>{(d) => <li data-status={d.status}>{d.uuid}</li>}</For>
</ul>
</section>
);
Why
Both .ts and .tsx parse with the tsx grammar (src/background.ts:24), but highlights for both come from typescript.scm (src/background.ts:178), and that query file carries zero JSX captures — grep -r jsx assets/queries/ finds nothing. The parse tree has proper jsx_element / jsx_attribute / jsx_opening_element nodes; we just never capture them.
Fix direction
scripts/fetch-queries.sh pins upstream query revisions — the upstream tree-sitter-typescript / nvim-treesitter query sets ship a JSX layer (jsx.scm / ecma queries with @tag, @tag.attribute, @tag.delimiter captures). Append that layer to the fetched typescript queries (or fetch a dedicated tsx.scm) and map the tag* captures to theme colours like the html grammar already does.
JSX in .tsx diffs comes out inconsistently coloured: intrinsic elements (
<section>,<ul>,<li>) and their punctuation stay at the default foreground, attribute names get the generic property colour, and capitalized components (<For>) pick up a colour only by accident (captured as a type identifier). Example that renders badly:Why
Both
.tsand.tsxparse with the tsx grammar (src/background.ts:24), but highlights for both come fromtypescript.scm(src/background.ts:178), and that query file carries zero JSX captures —grep -r jsx assets/queries/finds nothing. The parse tree has properjsx_element/jsx_attribute/jsx_opening_elementnodes; we just never capture them.Fix direction
scripts/fetch-queries.shpins upstream query revisions — the upstream tree-sitter-typescript / nvim-treesitter query sets ship a JSX layer (jsx.scm/ ecma queries with@tag,@tag.attribute,@tag.delimitercaptures). Append that layer to the fetched typescript queries (or fetch a dedicatedtsx.scm) and map thetag*captures to theme colours like the html grammar already does.