Astro VS Code extension loses syntax highlighting / IntelliSense for <script> when conditionally rendered

[rutvikk]

Astro Info

Astro                    v5.17.1
Vite                     v6.4.1
Node                     v22.14.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             astro-sitemap (v1.0.0)
                         astro-robots-txt (v1.0.0)

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Inside .astro files, placing a <script> tag inside a conditional expression ({cond ? (…) : null} or {cond && (…)}) causes the editor to stop providing JS hints/IntelliSense and sometimes breaks formatting behavior. The Astro compiler still builds and runs fine in dev and production. Inside the conditional, the <script> contents lose JS language features (no hints / incorrect tokenization), formatting fails too.

1. Open VS Code with the Astro & Prettier extension installed
2. Create an .astro file with the following content
3. Observe script block syntax highlighting and IntelliSense

---
const view = 'Gallery';
---

{view === 'Gallery' ? (
  <script>
    for (let index = 0; index < 10; index++) {
      console.log(index);
    }
  </script>
) : null}

What's the expected result?

The <script> contents should behave like normal script content in .astro files:

• syntax highlighting
• IntelliSense / errors
• formatting support

Link to Minimal Reproducible Example

Participation

• I am willing to submit a pull request for this issue.

[fkatsuhiro]

I could reproduce this issue.
Upon generating the snapshots, I confirmed that the content inside the <style> tag is also incorrectly assigned the source.tsx scope.

And, I think the pkg: language-tools and feat: syntax label might be appropriate for this issue, as it seems related to the editor's syntax highlighting and IntelliSense.

[Princesseuh]

Yes, basically inside expressions right now we don't support anything that isn't supported in TSX. It's the same source as a lot of other issues in syntax highlighting and in the Prettier plugin. This is unfortunately a fair amount of work.

[rutvikk]

Thanks for confirming and for the context - that makes sense. If anything inside template expressions has to stay within what TSX can represent, that explains why the editor/formatter breaks even though Astro’s runtime/build is fine.

I'm fairly new to Astro, but I'm happy to help if you can point me in the right direction. I can reproduce reliably, add/adjust snapshot tests, or take a small scoped PR if there’s a suggested approach / starting point in language-tools.

In the meantime, is there a recommended workaround / best practice? Since this works fine in the browser, it seems like a tooling limitation (VS Code extension + prettier-plugin-astro) rather than Astro itself.

Workaround I'm considering: Extract the conditional <script> / <style> into a separate .astro component and conditionally render the component instead (so the tags live at top-level in that file).

If there’s a preferred pattern (or a "don’t do this" guideline), I’d appreciate the guidance.

[Princesseuh]

Basically for most of Astro's history, scripts inside expressions didn't really work. I think there are still limitations around there so this wasn't relevant, and other TSX construct are uncommon, so this didn't matter.

The way to fix it would be:

• Identifying if it's possible to inject into TSX's syntax from ours to add the missing features
• If not, it'd be to create some sort of "Astro JSX" language in the syntax highlighting, import everything from the TSX syntax highlighting rules and just override whatever we need. There was a start of this here AstroJSX syntax [WIP] language-tools#828, but it didn't pan out.

Everything related to syntax highlighting is in this file: https://github.com/withastro/astro/blob/main/packages/language-tools/vscode/syntaxes/astro.tmLanguage.src.yaml, there are snapshots tests available in the same package. I wish I could link you to documentation on how the syntax highlighting format work, unfortunately, there isn't much, ha.