🐛 BUG: Conditional inline script with triangle bracket causes syntax error with prettier@3.7.0 and up

[angelikatyborska]

Describe the Bug

Hi! Let me start by saying that I was not sure if this problem should be reported here or in Prettier's issue tracker. I decided to report it here because I only experience it in Astro files and Prettier might reject it on the grounds of not supporting Astro files. If the issue is on Prettier's side and not this project's, I hope you can help me figure out exactly what to report to Prettier.

After upgrading from prettier 3.6.2 to 3.7.0, the following Astro code started throwing a syntax error when running prettier:

{ includeScript &&
  <script is:inline>
    var x = 5 > 7 ? 'not possible' : 'ok';
  </script>
}

The error is:

SyntaxError: Unexpected token `>`. Did you mean `>` or `{'>'}`?

The error only appears if the inline script tag is inside of {}. This code produces no error:

<script is:inline>
  var x = 5 > 7 ? "not possible" : "ok";
</script>

The error persists in the newest Prettier version (3.7.4).

Steps to Reproduce

1. Check out my reproduction repository (a basic Astro Starlight project) https://github.com/angelikatyborska/astro-prettier-inline-script

2. Install deps (npm install)

3. Run prettier (npm run prettier)

4. There are unexpected syntax errors:

   $ npm run prettier                 
   
   > tested-trappist@0.0.1 prettier
   > prettier --write .
   
   .prettierrc.json 8ms (unchanged)
   .vscode/extensions.json 1ms (unchanged)
   .vscode/launch.json 1ms (unchanged)
   astro.config.mjs 6ms (unchanged)
   package-lock.json 125ms (unchanged)
   package.json 0ms (unchanged)
   README.md 15ms (unchanged)
   src/components/MyComponent.astro
   [error] src/components/MyComponent.astro: SyntaxError: Unexpected token `>`. Did you mean `>` or `{'>'}`? (3:15)
   [error]   1 |  includeScript &&
   [error]   2 |   <script is:inline>
   [error] > 3 |     var x = 5 > 7 ? 'not possible' : 'ok';
   [error]     |               ^
   [error]   4 |   </script>
   [error]   5 |
   src/content.config.ts 16ms (unchanged)
   src/content/docs/guides/example.md 8ms (unchanged)
   src/content/docs/index.mdx
   [error] src/content/docs/index.mdx: SyntaxError: Unexpected token (3:67)
   [error]   1 | <$><CardGrid stagger>
   [error]   2 |   <Card title="Update content" icon="pencil">
   [error] > 3 |     Edit `src/content/docs/index.mdx` to see this page change.</$>
   [error]     |                                                                   ^
   src/content/docs/reference/example.md 2ms (unchanged)
   tsconfig.json 1ms (unchanged)
   

   The second error, in the mdx file, is interesting. If I get rid of the first error, the second error disappears too. It might be unrelated, or it might be a clue?

[angelikatyborska]

I've been trying to debug this a bit because it's bothering me that I'm blocked from upgrading prettier in all of my Astro projects. I do not know much about how prettier and its plugins work. Here's what I observed so far:

• I managed to create a test that fails with prettier 3.7.0 and passes with prettier 3.6.2: angelikatyborska@73bdf9c
• The test still fails with the current most up-to-date prettier version, 3.8.2
• Part of the changes between prettier 3.6.2 and 3.7.0 is upgrading @babel/parser from 7.27.7 to 8.0.0-beta.3 prettier/prettier@3.6.2...3.7.0#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R46-R48 which has a double potential to cause trouble: not only it's a major version upgrade, but also a beta version.

[angelikatyborska]

The error originates from https://github.com/babel/babel/blob/8ddfe9c590f49cee5d5265e8325070035fda79b1/packages/babel-parser/src/plugins/jsx/index.ts#L139-L145 which means somewhere in the process, something treats the contents of the script tag as JSX syntax, not as TS syntax.

Prettier's parse function https://github.com/prettier/prettier/blob/efcc72d91baad67a09abe2546c357f8ea8e14c79/src/main/parse.js#L13 is called 4 times. I'm attaching screenshots for each from my debugger.

1. First with the whole contents of the .astro file, with parser: 'astro'
   
2. Then the frontmatter contents with parser: 'babel-ts'
   
3. Then with the script tag contents with parser: 'babel-ts'
   
4. Then with the contents of the curly braces includeScript && <script..., with parser: 'astroExpressionParser'. During this call, the syntax error happens.