[bug] svelte attributes with inline interpolated template expressions cause deno fmt to fail unexpectedly

[nberlette]

Edit: @marvinhagemeister was kind enough to transcribe my original lazy screenshot into a bona-fide code snippet below. I've updated the OP to include this snippet for visibility. I've also replaced the screenshot of the error encountered with the output text from my terminal, and updated some of the wording to make things a bit easier to understand.

<div class="icon">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    {width}
    {height}
    viewBox="-0.5 -1 32 32"
    aria-hidden={true}
    {fill}
    class="drop-shadow-lg filter {$$restProps.class || ''}"
  >
    {#if title}
      <title>{title}</title>
    {/if}
  </svg>
</div>

More specifically, the problem lies in that last line in the opening tag:

    class="drop-shadow-1g filter {$$restProps.class || ""}"

While the code above is ugly, it is 100% valid syntax in the svelte language. But it causes the formatter to throw this error:

Error formatting: /Users/nb/Downloads/svelte-app (13)/src/Logo.svelte

Syntax error (expected attribute name) at file:///Users/nb/Downloads/svelte-app%20(13)/src/Logo.svelte:23:57

/Users/nb/Downloads/svelte-app (13)/src/main.js
/Users/nb/Downloads/svelte-app (13)/public/index.html
/Users/nb/Downloads/svelte-app (13)/rollup.config.js
/Users/nb/Downloads/svelte-app (13)/scripts/setupTypeScript.js
/Users/nb/Downloads/svelte-app (13)/src/fuzzy.d.ts
/Users/nb/Downloads/svelte-app (13)/src/config.js
/Users/nb/Downloads/svelte-app (13)/src/Config-svelte

It appears that using template expressions inside of double quotes is not compatible with Deno's new markup formatter. As soon as I remove that template expression (or nuke the whole className it resides in), everything works just as one would expect. Notice that despite the failed formatting attempt, Deno moves on to other files and simply skips the one with the syntax it can't understand.

[marvinhagemeister]

Here is the code in copy & paste-able form for whoever is going to tackle this issue.

<div class="icon">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    {width}
    {height}
    viewBox="-0.5 -1 32 32"
    aria-hidden={true}
    {fill}
    class="drop-shadow-lg filter {$$restProps.class || ''}"
  >
    {#if title}
      <title>{title}</title>
    {/if}
  </svg>
</div>

[nberlette]

@marvinhagemeister Oof, I was in such a rush earlier when I opened this and I didn't realize I failed to include anything aside from 2 screenshots and a superficial description. That's embarrassing 😬

Thanks for picking up the slack for me, Marvin! Much appreciated.

Also, I was digging around tonight trying to figure this thing out.... I'm fairly confident now that the problem is not in Deno itself; it more than likely stems from the dprint markup_fmt plugin responsible for formatting svelte/vue/astro files. Would it be better if I took this issue to the dprint repo instead?

[nberlette]

cc: @g-plane maybe you'd be able to shed some light on what's causing this?