[Syntax Highlight] Unexpected syntax colouring inside HTML attribute quotes

[replete]

Describe the bug When using an antler tag contains a string (in example using a ternary operator) within an HTML attribute value, it displays error type syntax highlighting.

It appears the same with all extensions disabled, so I thought it would make sense to fix it within this plugin?

Impacted Products Which Antlers Toolbox products does this bug apply to?

• [x] Antlers Toolbox for VS Code
• [ ] Formatter CLI
• [ ] Antlers Prettier Plugin
• [ ] Antlers Syntax Highlighting (external systems - not VS Code)

Versions and Other Plugins/Extensions vscode v1.91.0

To Reproduce This HTML shows the problem:

Expected behavior

• within { is_current ? 'aria-current="page"' : '' }} I would expect 'aria-current="page"' and '' to not be highlighted differently to other values, it appears to me red like an error but is valid syntax. The antlers code works as expected in the application.

If submitting a formatting bug, please include the template contents below as well as an attachment

<nav aria-label="Main Navigation" role="navigation">
    <ul>
        {{ nav:main }}
        <li class="{{ is_current || is_parent ? 'active' : '' }}">
            <a href="{{ url }}" class="tx-lg font-bold mr-1" {{ is_current ? 'aria-current="page"' : '' }}>{{ title }}</a>
        {{ /nav:main}}
        </li>
    </ul>
</nav>

(wont allow me to attach an html file for some reason)

Additional context Thank you for making this extension 👍

[replete]

Another example which I suspect is related

{{ elseif type == "youtube_embed" }}
    <div class="youtube-video-container">
        <iframe
            width="560"
            height="315"
            src="{{ url | replace('watch?v=','/embed/') }}"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            >
        </iframe>
    </div>

[replete]

Another related example that causes a CSS parsing error in vscode:

{{hero_carousel}}
{{if type == "hero_panel"}}
    <li style="background-image: url('{{ glide :src="background_image" w="1920" format="webp" }}');" class="{{index == 0 ? 'active': ''}}" id="{{ name | slugify }}-panel">
        <h1>{{ headline }}</h1>
        <h2>{{ sub_headline }}</h2>
        <a href="javascript:void(0);" style="background:#fff; padding:8px; color:var(--brand); text-shadow:none;">{{ link_text }}</a>
    </li>
{{/if}}
{{/hero_carousel}}

When I remove this line, the problem disappears: <li style="background-image: url('{{ glide :src="background_image" w="1920" format="webp" }}');" class="{{index == 0 ? 'active': ''}}" id="{{ name | slugify }}-panel">

This works the same way with all extensions disabled.

I hope this is a helpful bug report. Thanks for putting this out there once again, I certainly appreciate the challenges you have overcome with this tricky syntax.

[JohnathonKoster]

Thanks for all the additional code samples!

John Koster

On Wed, Jul 10, 2024 at 6:41 AM Phil Ricketts @.***> wrote:

Another related example that causes a CSS parsing error in vscode: Screenshot.2024-07-10.at.12.34.48.png (view on web) https://github.com/Stillat/vscode-antlers-language-server/assets/812139/45f39849-6654-4dce-a149-8e926c3b8995

{{hero_carousel}} {{if type == "hero_panel"}} <li style="background-image: url('{{ glide :src="background_image" w="1920" format="webp" }}');" class="{{index == 0 ? 'active': ''}}" id="{{ name | slugify }}-panel">

{{ headline }}

  <h2>{{ sub_headline }}</h2>
  <a href="javascript:void(0);" style="background:#fff; padding:8px; color:var(--brand); text-shadow:none;">{{ link_text }}</a>

{{/if}} {{/hero_carousel}}

When I remove this line, the problem disappears: <li style="background-image: url('{{ glide :src="background_image" w="1920" format="webp" }}');" class="{{index == 0 ? 'active': ''}}" id="{{ name | slugify }}-panel">

This works the same way with all extensions disabled.

Screenshot.2024-07-10.at.12.36.27.png (view on web) https://github.com/Stillat/vscode-antlers-language-server/assets/812139/575acb46-9cc3-4ab7-92a4-7c589a837044

Thanks for putting this out there once again, I certainly appreciate the challenges you have overcome with this tricky syntax.

— Reply to this email directly, view it on GitHub https://github.com/Stillat/vscode-antlers-language-server/issues/93#issuecomment-2220296834, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABH5R6WXU74G4DJPNDX3T2DZLUMXTAVCNFSM6AAAAABKUWJ4YGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRQGI4TMOBTGQ . You are receiving this because you are subscribed to this thread.Message ID: @.*** com>