Control Flow syntax highlight curly braces mismatch

[Ryan Wu]

🐞 bug report

Is this a regression?

Don't think so, the Control Flow syntax is new.

Description

When using the Control Flow syntax, the curly braces breaks the syntaxhighlight.

Bug Type

What does this bug affect

• Angular Language Service VSCode extension
• Angular Language Service server

Reproduction

• [After install angular language service VSC extension]
• Create a new file and change the language mode to html
• Paste the following html

@if (true) {
    @if (true) {
    {{ variable }}
    } @else {{{ variable2 }}}
}

Expected behavior

The curly braces should be correctly highlighted.

Screenshots

🌍 Your Environment

Angular Version:
N/A

Extension Version:

v17.1.0

VSCode Version:

1.85.1

Operating System:

Mac OS 14.2.1

Extension options:

Default

Thanks!

[Kim Dahlberg]

Same behaviour with a one-liner

@if (true) {{{ variable }}}

Adding spaces doesn't show any error and makes more sense

@if (true) { {{ variable }} }

Maybe tripple curly brackets (even though it's not especially readable) coming after the new control flow shouldn't show up as red at all?

[Andrew Scott]

Maybe tripple curly brackets (even though it's not especially readable) coming after the new control flow shouldn't show up as red at all?

It's not that triple curly is intentionally red. It's that {{ is immediately captured as a binding, the first }} is then the end of the binding and then the extra { and } are mismatched. Texmate scopes work off of regex capturing so the solution isn't necessarily simple.