Expected ">" but found "set" in style tag

[lumynou5]

Astro Info

Astro                    v4.15.8
Node                     v20.14.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

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

No response

Describe the Bug

I didn't try to use JSX in Astro frontmatter, but still encounter this.

39 |  article[lang|="en"] {
40 |    font-family: "Noto Sans", sans-serif;
41 |  }

The stack trace shows it's at 39:571, which doesn't exist.

What's the expected result?

It should build without error.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-t7eabk-cteppa?file=src%2Fcomponents%2FCard.astro

Participation

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

[Vardhaman619]

@lumynou5

• In Card.astro, you're destructuring two props: card and lang.
• However, the Card component in index.astro is not passing these props.
• Instead, it's passing three individual props: href, title, and body.

This mismatch leads to the error because the component tries to access non-existent properties like card.name and card.text.

Solution:
There are two ways to fix this:

1. Update Card.astro to accept the props being passed
2. Update index.astro to pass the desired props to Card:

[lumynou5]

@Vardhaman619 Sorry, I forgot to change those in the demo. I updated the link.

However, it's not the reason. No matter whether the types are correct, it fails with this error. I guess it's because of incorrect parse of the nested JSX-like syntax in Card.astro; in fact, removing the face.text part helps.
If it fails due to mismatched types, it'll just report the mismatched types.

[Princesseuh]

This happens because of the \n in the split. Seems like a compiler bug, will move there!