lsp: formatting malformed when CSS expressions are too long

[rverton]

templ version v0.2.680

The following example templates works fine:

package components

templ test() {
	<a
		href="/"
		class={ "hover:bg-zinc-600 px-1 py-1 -mt-1 rounded flex items-center space-x-2 foo foo foo" , "bar" }
	></a>
}

Now, if there is one more foo added to the list of classes, the LSP formatter seems to malform the template, resulting in the following output:

package components

templ test() {
<a href="/indexer" class={ "hover:bg-zinc-600 px-1 py-1 -mt-1 rounded flex items-center space-x-2 foo foo foo foo"
    , "bar" }></a>
}

This results in an error: string expression attribute: missing closing brace: line 3, col 27 []

[JuLi0n21]

I got a similar issue here:
line breaks in tag={ }
break the generation, i only noticed since my formater broke the line into 2 after adding more stlyes

Works:

<a href="/link" class={ "fixed left-2 p-3 " + theme(ctx).Light }> 
</a>

Doesnt work

<a href="/link" class={ "fixed left-2 p-3 " 
    + theme(ctx).Light }>
</a>

[JuLi0n21]

Did a bit more investigation on what would work and what not.

Works

<a href="/link" class={ "fixed left-2 p-3 " +
    theme(ctx).Light }>
</a>

or Alternativly using comma to concatenate the strings works fine

<a href="/link" class={ "fixed left-2 p-3",
    theme(ctx).Light }>
</a>

Maybe allowing the first Token of the next not empty line to be one of the allowed concatinatino tokens would remove the issue

[joerdav]

Hey folks, thank you for the error report, your great minimal repros and your patience!

Though, I'm having issues reproducing both with latest templ and v0.2.680, so I think we will have to gather some more data if you have time:

• What IDE are you using?
• What OS are you on?
• Do you have any other formatters, LSPs or extensions that could be running on templ files?
• If you format with the command line does the problem persist? cat template.templ | templ fmt (this will print out the result without saving)

[JuLi0n21]

Thanks for the Update

• Nvim
• Ubuntu 22.04.4 LTS on Windows 10 x86_64
• yes i think its the nvim formatter formating things, i am using gopls, html-lsp and templ lsp tho
• 1. the formated code using cli works
• 2. the miss formatted code stayes not working event after templ fmt (the added new line does not get removed)

I would say that its more of a default behavoir problem since most languages support the pattern below (which is the actual issue not the formatter itself)

Doesnt work

<a href="/link" class={ "fixed left-2 p-3 " 
    + theme(ctx).Light }>
</a>

[joerdav]

Sorry, I think I phrased one of my questions poorly.

If you format with the command line does the problem persist? cat template.templ | templ fmt (this will print out the result without saving)

<a href="/link" class={ "fixed left-2 p-3 " + theme(ctx).Light }> 
</a>

Is formatted to

<a href="/link" class={ "fixed left-2 p-3 " 
    + theme(ctx).Light }>
</a>

By your editor, is that right?

If you run cat template.templ | templ fmt on the first form, does it still break into the broken form?

My suspicion is that the html-lsp is breaking the formatting.

[joerdav]

There was a very similar issue here: #541

The solution was to configure nvim to only use templ to format templ files.

You can use conform to do this:

return {
  "stevearc/conform.nvim",
  opts = {
    formatters_by_ft = {
      templ = { "templ" },
    },
  },
}

[JuLi0n21]

Thanks for the reply, its indeed just my editor, thanks for the config.

• The fmt command does not break the code.
  i forgot to say that

i just wanted to say that the corrently broken code should be supported since its a common way code is formatted.
since the compiler should just remove the newlines between the { ... }

Thank u for the help.

[joerdav]

I disagree that this should be valid syntax, though I may be wrong!

Anything between those curly braces is Go code, and a line starting with a + is not valid Go code.

Valid Go code:

func main() {
	fmt.Println("Hello, " +
		"world!")
}

Invalid Go code.

func main() {
	fmt.Println("Hello, "
	+ "world!")
}

[rverton]

There was a very similar issue here: #541

The solution was to configure nvim to only use templ to format templ files.

You can use conform to do this:

return {
  "stevearc/conform.nvim",
  opts = {
    formatters_by_ft = {
      templ = { "templ" },
    },
  },
}

This resolved it for me, thanks! I'll leave this issue open until the discussion (and agreement, if this is a bug) with @JuLi0n21 is finished?