templ fmt corrupts script tags with data-templ-depth divs when prettier is in PATH

[ashmortar]

Bug Description

When templ fmt is run on a file containing script tags and prettier is available in the PATH, the formatter corrupts the script tags by adding data-templ-depth divs that are not properly removed, resulting in invalid HTML.

Environment

• templ version: v0.3.943
• prettier in PATH: yes
• OS: Linux

Reproduction Steps

1. Create a simple templ file with a script tag:

package test

templ TestScriptSimple() {
	<div>
		<h1>Test Page</h1>
		<script>
			console.log("Hello, World!");
			function test() {
				return "test";
			}
		</script>
	</div>
}

2. Run templ fmt on the file

3. The script tag becomes corrupted:

<script><div data-templ-depth="0"><div data-templ-depth="1"><script>
	console.log("Hello, World!");
	function test() {
		return "test";
	}
</script></div></div></script>

Expected Behavior

The script tag should remain unchanged or be properly formatted without corruption.

Actual Behavior

The formatter adds:

• Two nested <div data-templ-depth="N"> tags inside the script
• An extra opening <script> tag
• Extra closing tags </div></div></script>

This creates invalid HTML where divs are placed inside script tags, which breaks JavaScript execution.

Root Cause Analysis

Based on examining the prettier.go source code, the issue appears to be in the prettier integration added in v0.3.920. The Element() function in internal/prettier/prettier.go:

1. Intentionally adds data-templ-depth div wrappers to help prettier understand indentation
2. Should remove these divs after prettier formats the content
3. The removal mechanism fails, leaving the temporary divs in the source file

Impact

This bug corrupts any templ file with script tags when formatted, making the HTML invalid and breaking JavaScript functionality.

Workaround

Currently, the only workaround is to either:

1. Remove prettier from PATH before running templ fmt
2. Avoid using templ fmt on files with script tags
3. Manually fix the corruption after formatting

[MilkeeyCat]

I can't reproduce the issue, I followed the reproduction steps and it works as intended.

[ashmortar]

Hmm, I actually cannot either in a fresh repo. I'll keep digging to see why it keeps happening in my project. I am using templ as a tool if that makes a difference.

[a-h]

Thanks for the report, something is clearly going wrong to ever see the <div data-templ-depth="1"> elements. Maybe there's a need to put in some more checks around the output post-processing.