tmpl: fix <div> inside <div>

examples/vweb/index.html

@@ -1,11 +1,19 @@
+@include 'header.html'
+
 Test <b>app</b>
 <br>
 <h1>@hello</h1>
 <hr>
+
+If demo: <br>
 @if show
 	show = true
 @end
 
+<br><br>
+
+For loop demo: <br>
+
 @for number in numbers
 	@number <br>
 @end

vlib/v/parser/tmpl.v

@@ -198,15 +198,19 @@ mut sb := strings.new_builder($lstartlength)\n
 			class := line.find_between('span.', '{').trim_space()
 			source.writeln('<span class="$class">')
 			in_span = true
-		} else if state == .html && line.starts_with('.') && line.ends_with('{') {
+		} else if state == .html && line.trim_space().starts_with('.') && line.ends_with('{') {
 			// `.header {` => `<div class='header'>`
 			class := line.find_between('.', '{').trim_space()
+			trimmed := line.trim_space()
+			source.write_string(strings.repeat(`\t`, line.len - trimmed.len)) // add the necessary indent to keep <div><div><div> code clean
 			source.writeln('<div class="$class">')
 		} else if state == .html && line.starts_with('#') && line.ends_with('{') {
 			// `#header {` => `<div id='header'>`
 			class := line.find_between('#', '{').trim_space()
 			source.writeln('<div id="$class">')
-		} else if state == .html && line == '}' {
+		} else if state == .html && line.trim_space() == '}' {
+			trimmed := line.trim_space()
+			source.write_string(strings.repeat(`\t`, line.len - trimmed.len)) // add the necessary indent to keep <div><div><div> code clean
 			if in_span {
 				source.writeln('</span>')
 				in_span = false

vlib/v/tests/inout/embedded.html

@@ -0,0 +1,5 @@
+<b>embedded</b>
+
+.embedded {
+	hello
+}

vlib/v/tests/inout/file.html

@@ -35,8 +35,13 @@ const classes = `header ${ isLargeScreen() ? '' :
 <h1>@{title}</h1>
 <p>@title</p>
 .hello {
+	.hello2 {
 		<b>hi</b><br>
+	}
 }
+
+@include 'embedded.html'
+
 <a href="@website.link">@website.link</a>
 <a href="mailto:example@@@website.link">Email</a>
 </header>

vlib/v/tests/inout/tmpl_parse_html.out

@@ -35,8 +35,17 @@ const classes = `header ${ isLargeScreen() ? '' :
 <h1>TEST</h1>
 <p>TEST</p>
 <div class="hello">
+	<div class="hello2">
 		<b>hi</b><br>
+	</div>
 </div>
+
+<b>embedded</b>
+
+<div class="embedded">
+	hello
+</div>
+
 <a href="example.com">example.com</a>
 <a href="mailto:example@example.com">Email</a>
 </header>