Redundant whitespace around {% %}

[Josef Kufner]

I'm using the Symfony bundle and Twig. There is a short example of the whitespace problem:

HAML template:

- extends 'AppBundle::layout_text.html.haml'

- block content
  #A Hello world!
  -# ...
  #B
    - if true
      - block some_indented_block
        #C Hello.
  #D Bye.

Generated Twig template:

{% extends 'AppBundle::layout_text.html.haml' %}
{% line 3 %}{% block content %}
  <div id="A">Hello world!</div>
  <div id="B">
{% line 7 %}    {% if true %}
      {% block some_indented_block %}
        <div id="C">Hello.</div>
      {% endblock %}
    {% endif %}
  </div>
  <div id="D">Bye.</div>
{% endblock %}

Final HTML (#page_content_text is from the parent template):

  <div id="A">Hello world!</div>
  <div id="B">
                  <div id="C">Hello.</div>
            </div>
  <div id="D">Bye.</div>

Take a look at {% %} tags in the Twig template. There is plenty of redundant whitespace which breaks indenting of the final HTML. For example the space between {% line 7 %}, {% if true %} and {% block some_indented_block %}`.

It would be much better if the {% %} tags were on their own lines and not indented at all:

{% extends 'AppBundle::layout_text.html.haml' %}
{% line 3 %}{% block content %}
  <div id="A">Hello world!</div>
  <div id="B">
{% line 7 %}{% if true %}{% block some_indented_block %}
        <div id="C">Hello.</div>
{% endblock %}
{% endif %}
  </div>
  <div id="D">Bye.</div>
{% endblock %}

Which will produce much better HTML:

  <div id="A">Hello world!</div>
  <div id="B">
        <div id="C">Hello.</div>
  </div>
  <div id="D">Bye.</div>