rmWhitespace incorrectly alters HTML structure

[nwoltman]

I would expect the rendered HTML to look exactly the same no matter the value of the rmWhitespace option. However, when EJS code is structured in certain ways, rmWhitespace causes the rendered HTML to be structured differently.

view.ejs

<h2>
  <%- 'EJS' %>
  Title
</h2>
<h2>
  HTML
  Title
</h2>
<div>
  <span>1</span>
  <span>2</span>

  <span>3</span>
</div>

index.js

const ejs = require('ejs');
const fs = require('fs');

const template = fs.readFileSync('./view.ejs', 'utf8');
const render = ejs.compile(template, {
  rmWhitespace: true,
});

console.log(render());

Output with rmWhitespace: false

<h2>
  EJS
  Title
</h2>
<h2>
  HTML
  Title
</h2>
<div>
  <span>1</span>
  <span>2</span>

  <span>3</span>
</div>

Output with rmWhitespace: true

<h2>
EJSTitle
</h2>
<h2>
HTML
Title
</h2>
<div>
<span>1</span>
<span>2</span><span>3</span>
</div>

Notice how rmWhitespace: true removes all whitespace (including newlines) between EJS and Title as well as <span>2</span> and <span>3</span>.

This happens with both LF and CRLF line endings.

The EJS code that seems to cause this to happen is:

• EJS tags <%- %> and <%= %>
• A blank line between lines of HTML

[mde]

This highlights the problem of giving EJS the responsibility for (re-)formatting the output. And I think we've made things worse by providing multiple ways to do it now. Ultimately we should probably have the basic slurp, and then provide some sort of user-settable filter property that people can plug into to format the final output however they want.