fix(language-tools): syntax highlighting for script/style in expressions#15602
Merged
Princesseuh merged 7 commits intoMar 16, 2026
Conversation
Add support for proper syntax highlighting and language injection for
<script> and <style> tags inside JSX expressions ({...}) in .astro files.
Previously, script/style content inside expressions like
`{cond && <script>...</script>}` was treated as plain TSX, losing
JavaScript/CSS highlighting and IntelliSense.
The fix:
1. Adds a TextMate injection (`L:meta.embedded.expression.astro`) that
injects the existing `tags-lang` pattern into expression scopes, so
<script>/<style> tags are properly recognized inside expressions.
2. Narrows the exclusion in language injection selectors from
`- (meta source)` to `- (meta.embedded.block source)` so they apply
within expressions (which have `source.tsx` in the scope path) while
still preventing double injection.
Closes #15439
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: a8c9e9a The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
Author
|
@Princesseuh I know you have already a lot of thing to do but when you have time, can you take a quick look ? |
…ghting Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ipt-style-highlighting-in-expressions
Princesseuh
approved these changes
Mar 16, 2026
Member
Princesseuh
left a comment
Princesseuh
left a comment
There was a problem hiding this comment.
Apologies for the delay, finally got to try it in local and it seems to work, awesome work!
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #15439
<script>and<style>tags inside JSX expressions (e.g.{cond && <script>...</script>}) were losing syntax highlighting and IntelliSense because their content was scoped as plain TSX instead of JavaScript/CSS.Changes to
astro.tmLanguage.src.yaml:L:meta.embedded.expression.astro - meta.embedded.block): Injects the existing#tags-langpattern into expression scopes so<script>/<style>tags are properly recognized inside expressions and create the correct scope structure (meta.script.astro/meta.style.astro).- (meta source)to- (meta.embedded.block source)in all 12 language injection selectors. This allows them to fire inside expressions (wheresource.tsxis present from the interpolationcontentName) while still preventing double-injection.Before
Content inside
<script>in expressions was scoped assource.tsx:After
Content is now properly injected with
source.js/source.css:Test plan
script/expression.astrotest fixture covering<script>in ternary and&&expressionsstyle/expression.astrotest fixture covering<style>in ternary and&&expressionssource.js/source.cssscoping for script/style content inside expressions🤖 Generated with Claude Code