Jade Question

Jade/pug - link wrapping behind last tag in the same container

I just have a tiny question I can't find the answer to regarding jade/pug template engine, and that is the behavior of link tags. I'm just dipping my toes into this templating engine and so far it looks cool.

Why does this:

#container.col
a link
if youAreUsingJade
p You are amazing
else
p Get on it!
a link
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
a link


Compile into this?:

<div id="container" class="col"><a>link</a>
<p>You are amazing</p><a>link</a>
<p>
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
</p><a>link</a>
</div>


They are in the same container, so why does the link tag wrap around to the last tag?

I would kind of expect it to look like this:

<div id="container" class="col">
<a>link</a>
<p>You are amazing</p>
<a>link</a>
<p>
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
</p>
<a>link</a>
</div>

Answer

The Pug compiler does not add new lines for inline elements including <a> tags even if the pretty option is used.

Inline elements are those between which new lines carry a meaning and cannot be used for cosmetic purposes. For example <span> is an inline element since </span><span> and </span>\n<span> are different, so we don't insert new lines. For block level elements like <div> we can safely insert new lines for indentation purposes.

https://github.com/pugjs/pug/issues/2075#issuecomment-138125136

You could force the result you said you were expecting by using something like = "\n\t" before each a link but that gets messy and unmanageable.

Also from the same issue comment referenced above:

I feel that we need to clarify that in general pretty-printing is not encouraged.

I find that the developer tools of modern browsers output the html quite well.