Svelte6 readiness: Why are quotes required for Pug attributes?

[njreid]

Currently, Pug syntax embedded in Svelte template tags requires quoted values, enclosing Javascript expressions in braces:

body
  p(class:name!="{highlighted}") Example

This isn't a Pug requirement. The following Pug syntax would be fine:

body
  p(class:name={highlighted} Example

Aren't the braces enough to delineate Javascript snippets?

In Svelte 6, I understand that quoted attribute will be stringified. So, the way Svelte interprets the HTML equivalent of the previous two examples will be different.

What is the reason that the quotes are currently required? Can we remove that requirement in svelte-preprocess?

[Conduitry]

What happens if the expression has spaces in it, or any other special characters? How does this get parsed then?

[njreid]

Any spaces between the braces should be ok, right?

p(class:name={something.length > 0}) Example Test

[CosmoMyzrailGorynych]

Any spaces between the braces should be ok, right?

Incorrect. The {} combination itself is read by Pug as an object — because yes, {} is a valid JavaScript expression, and Pug evaluates these expressions when compiling templates. (See Attributes, the second paragraph.) With that, the compiler fails on . in something.length > 0 because it is not allowed in keys in the usual object notation.

[CosmoMyzrailGorynych]

@njreid your example in the issue's description is also incorrect.

^{And also has a syntax error.}

So yes, it is a requirement for Pug to quote special characters, which include those in Svelte directives and templated attributes, because Svelte consumes HTML produced by Pug, not Pug directly.

All in all I think that the quotes behavior in Svelte isn't well-thought (Pug is not the only HTML preprocessor), especially when it avoids "magical" behavior now. (The presence of quotes is too invisible to be an obvious syntax feature for the desired language curve.) And the stupid part is that there is seemingly no alternative or option to change this behavior.

---

Posting a relevant error message so this issue pops up in searches:

▲ [WARNING] Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
https://svelte.dev/e/attribute_quoted [plugin esbuild-svelte]