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)

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