Formatting not working as expected

[RafaelZasas]

I have made a discussion post about this without much traction.

My editor setup has been left at the bottom.

TLDR

Templ is formatting my html in a way that is frustrating, and I cant seem to get around it. I assume that I have made a mistake somewhere, but if this is actually the formatting of templ fmt, I believe it is far too opinionated.

Take this snippet for example:

templ Development(d models.Development, isAdmin bool) {
<div class="container mx-auto p-4 snap-y snap-mandatory">
    <h1 class="text-3xl text-center py-4 font-bold text-primary">
        { d.Name }
    </h1>
    <div class="shadow">
        <!-- Featured Image -->
        <div class="relative snap-start">
            <img id="featuredImage" class="w-full animate-pulse-bg from-surface-light to-surface
                    object-cover rounded-md aspect-square max-h-[60vh]" src={ utils.GetPrimaryImage(d.Images) } alt={
                fmt.Sprintf("Featured image for %s", d.Name) } />
        </div>
        <!-- Thumbnails Gallery -->
        <div class="flex justify-start md:justify-around items-end overflow-x-scroll my-2 gap-4 p-4
            bg-surface-light rounded-md snap-x snap-mandatory">
            for _, img := range d.Images {
            <a href="#" class="w-24 h-24 snap-center" onclick={ replaceFeaturedImage(img.URL) }>
                <img src={ img.URL } height="96" width="96" alt={ fmt.Sprintf("Thumbnail for %s", d.Name) } class="min-w-24 h-24 aspect-square object-cover
                            rounded-lg cursor-pointer hover:opacity-75
                            animate-pulse-bg from-surface-dark to-surface" />
            </a>
            }
        </div>
        <!-- Details Section -->
        @DevelopmentDetails(d, isAdmin)
    </div>
</div>
}

I have absolutely no Idea why it keeps forcing attributes onto the same line, even after I manually break it up.

What I have tried

I manually edit the following piece to have attributes on a single line:

        <!-- Featured Image -->
        <div class="relative snap-start">
            <img 
            id="featuredImage"
            class="w-full animate-pulse-bg from-surface-light to-surface
                    object-cover rounded-md aspect-square max-h-[60vh]" 
            src={ utils.GetPrimaryImage(d.Images) } 
            alt={fmt.Sprintf("Featured image for %s", d.Name) }
            />
        </div>

But once I save, I get this back:

        <!-- Featured Image -->
        <div class="relative snap-start">
            <img id="featuredImage" class="w-full animate-pulse-bg from-surface-light to-surface
                    object-cover rounded-md aspect-square max-h-[60vh]" src={ utils.GetPrimaryImage(d.Images) } alt={
                fmt.Sprintf("Featured image for %s", d.Name) } />
        </div>

The formatting is the same when I use templ fmt on the file.
The formatting doesn't make any logical sense to me. Why break in the middle of the src attr? At which line length does it decide to break? The formatting rules seem extremely opaque and hard to understand.

Editor setup

I am using neovim with a Lsp-Zero setup. The LSP is installed with Mason and mason-lspconfig.

As per These Instructions I have specifically opted for lsp-zero to format templ files with only the templ LSP.

lsp_zero.format_on_save({
	format_opts = {
		async = false,
		timeout_ms = 10000,
	},
	servers = {
		["templ"] = { "templ" },
	},
})

This is my mason.lua file with my mason handlers:

local mason = require("mason")
local mason_lspconfig = require("mason-lspconfig")
local lsp_zero = require("lsp-zero")
local lspconfig = require("lspconfig")

-- Setup Mason for language servers
mason.setup({})

local mason_handlers = {
	-- Any language server not listed here will be handled by the default
	lsp_zero.default_setup,
	
	-- other lsp's here ...

	-- tailwindcss
	["tailwindcss"] = function()
		lspconfig.tailwindcss.setup({
			cmd = { "tailwindcss-language-server", "--stdio" },
			filetypes = {
				"html",
				"css",
				"scss",
				"javascript",
				"javascriptreact",
				"typescript",
				"typescriptreact",
				"svelte",
				"vue",
				"templ",
			},
			init_options = { userLanguages = { templ = "html" } },
			root_dir = lspconfig.util.root_pattern(
				"tailwind.config.js",
				"tailwind.config.cjs",
				"tailwind.config.ts",
				"tailwind.config.tsx",
				"tailwind.config.json",
				".git"
			),

			on_attach = function(client, bufnr)
				lsp_zero.async_autoformat(client, bufnr)
			end,
		})
	end,

	-- html
	["html"] = function()
		lspconfig.html.setup({
			filetypes = { "html", "templ" },
		})
	end,

	-- htmx
	["htmx"] = function()
		lspconfig.htmx.setup({
			filetypes = { "html", "templ" },
		})
	end,

	-- templ (https://github.com/a-h/templ)
	["templ"] = function()
		lspconfig.templ.setup({
			filetypes = { "templ" },
		})
	end,
}

-- Include templ file type
vim.filetype.add({ extension = { templ = "templ" } })

mason_lspconfig.setup({
	-- Replace the language servers listed here
	-- with the ones you want to install
	ensure_installed = {
		-- Web stuff
		"tsserver",
		"html",
		"htmx",
		"tailwindcss",
		"svelte",
		"eslint",
		-- Must have language servers
		"rust_analyzer",
		"lua_ls",
		"gopls",
		"pylsp",
	},
	handlers = mason_handlers,
})

[joerdav]

@RafaelZasas What version of templ are you running? templ version you may find that this will be resolved in the new release.

[RafaelZasas]

@RafaelZasas What version of templ are you running? templ version you may find that this will be resolved in the new release.

I am running v0.2.543

[joerdav]

@RafaelZasas Did you install it via go install ? If so you could try go install github.com/a-h/templ/cmd/templ@main, this is the latest unstable release, which is chock full of improvements.

[joerdav]

Though we'll be cutting a stable release soon :)

[RafaelZasas]

@joerdav Sooooo much better.
Thank you so much! @joerdav @a-h &co.