pugjs (jade template) - remove newlines in block statement

Question

I'm having a hard time removing the newline between elements in an each statement in a pug js template (formerly jade)

My code looks like this. I'd like to have no whitespace between the li elements when the HTML is rendered, so I'm attempting to use comments between them.

mixin nav(links)
  ul.nav <!--
    each link in links
      |-->
      li(class=(section == link.key ? 'active' : null)): a(href=link.href)= link.label
      |<!--
    |-->

Right now this is giving me this result:

<ul class="nav"><!---->
  <li class="active"><a href="/">Home</a></li><!---->
  <li><a href="/foo">Foo</a></li><!---->
  <li><a href="/bar">Bar</a></li><!---->
  <li><a href="/yada">Yada</a></li><!---->
</ul>

Is there a good way to tell pug I want no whitespace between these elements, or is this a limitation of the language? I'm using KeystoneJS which, in the development environment, will tell the pug interpreter to prettify the HTML. I'd like the product to be consistent across development to production (and not write a workaround in CSS that is negated by the minification in the production environment)

Tommietommy

Pug renders everything on a single line, so this must be caused by keystone.js. – Proclivity

I'm voting to close this question as off-topic because this is an enhancement request for pug and should be posted in the pug github issues area. – Proclivity

Answer 1

There is a "pretty" property in pug config. Pug adds whitespace to the resulting HTML if it is set to true (false by default). This is probably the cause of your problem. https://pugjs.org/api/reference.html

Ornamentation

Answer 2

Remove the | (pipe) character from the template, and the comments. If you still have new lines, then it is Keystone.js that is making the new lines.

The reason to remove the | character is because according to the official PugJS website,

You could add one or more empty piped lines — a pipe with either spaces or nothing after it. This will insert whitespace in the rendered HTML.

Karinakarine