Twig tags inside Twig comments break formatting

[jaikdean]

Notice the comment {# … #} tag in this example (lines 8–16 inclusive). The italic styling of the comment incorrectly continues to the end of the document, whereas the color of the comment ends before it should.

The HTML (prettified for readability) for these lines copied from the inspector is:

<div class="lines overlayer" data-reactid=".1y.1.2" style="height: 505px; width: 819px; -webkit-transform: translate3d(0px, 0px, 0px); background-color: rgb(48, 45, 38);">
  <div class="highlights underlayer" data-reactid=".1y.1.2.1">
    <div class="highlight dummy" data-reactid=".1y.1.2.1.$dummy-dummy">
      <div class="region" style="top:0;height:15px;left:0;width:0;" data-reactid=".1y.1.2.1.$dummy-dummy.$0"></div>
    </div>
    <div callattachhooks="true">
      <div class="bracket-matcher" style="display: block; top: 255px; left: 42px; width: 14px; height: 15px;"></div>
      <div class="bracket-matcher" style="display: block; top: 75px; left: 35px; width: 14px; height: 15px;"></div>
    </div>
    <div class="spell-check" callattachhooks="true"></div>
    <div class="wrap-guide" callattachhooks="true" style="left: 840px; display: block;"></div>
  </div>
  <div class="line" style="position: absolute; top: 0px; width: 1056px;" data-screen-row="0"><span class="text html twig"><span class="comment block twig"><span class="punctuation definition comment begin twig">{#</span> Base our theme on the built-in Symfony div layout <span class="punctuation definition comment end twig">#}</span></span>
    </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 15px; width: 1056px;" data-screen-row="1"><span class="text html twig"><span class="meta tag template value twig"><span class="punctuation section tag twig">{%</span>  <span class="keyword control twig">extends</span>  <span class="string quoted single twig"><span class="punctuation definition string begin twig">'</span>form_div_layout.html.twig
    <span
    class="punctuation definition string end twig">'</span>
      </span> <span class="punctuation section tag twig">%}</span></span>
      </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 30px; width: 1056px;" data-screen-row="2"><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 75px; width: 1056px;" data-screen-row="5"><span class="text html twig"><span class="leading-whitespace indent-guide invisible-character">····</span><span class="meta tag inline any html"><span class="punctuation definition tag begin html">&lt;</span><span class="entity name tag inline any html">tr</span> 
    <span
    class="entity other attribute-name html">data-item</span><span class="punctuation definition tag end html">&gt;</span></span>
      </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 90px; width: 1056px;" data-screen-row="6"><span class="text html twig"><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span><span class="meta tag inline any html"><span class="punctuation definition tag begin html">&lt;</span>
    <span
    class="entity name tag inline any html">td</span><span class="punctuation definition tag end html">&gt;</span></span><span class="meta tag template value twig"><span class="punctuation section tag twig">{{</span>  <span class="variable other twig">form_widget</span>(<span class="variable other twig">form</span>
      <span
      class="punctuation separator property twig">.</span><span class="variable other property twig">name</span>) <span class="punctuation section tag twig">}}</span></span><span class="meta tag inline any html"><span class="punctuation definition tag begin html">&lt;/</span><span class="entity name tag inline any html">td</span>
        <span
        class="punctuation definition tag end html">&gt;</span>
          </span>
          </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 45px; width: 1056px;" data-screen-row="3"><span class="text html twig"><span class="meta tag template value twig"><span class="punctuation section tag twig">{%</span>  <span class="keyword control twig">block</span>  <span class="variable other twig">form_row</span>  <span class="punctuation section tag twig">%}</span></span>
    </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 60px; width: 1056px;" data-screen-row="4"><span class="text html twig"><span class="meta tag template value twig"><span class="punctuation section tag twig">{{</span>  <span class="support function twig">dump</span><span class="punctuation definition parameters begin twig">(</span><span class="meta function arguments twig"><span class="variable other twig">form</span></span>
    <span
    class="punctuation definition parameters end twig">)</span> <span class="punctuation section tag twig">}}</span></span>
      </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 105px; width: 1056px;" data-screen-row="7"><span class="text html twig"><span class="leading-whitespace indent-guide invisible-character">····</span><span class="comment block twig"><span class="punctuation definition comment begin twig">{#</span>% for allocation in form.parent.parent.vars.value.allocations
    %}</span>
    </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 120px; width: 1056px;" data-screen-row="8"><span class="text html twig"><span class="comment block twig"><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span>&lt;td&gt;</span>
    </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 135px; width: 1056px;" data-screen-row="9"><span class="text html twig"><span class="comment block twig"><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span>
    <span
    class="meta tag template value twig"><span class="punctuation section tag twig">{{</span>  <span class="variable other twig">form_widget</span>(<span class="variable other twig">form</span><span class="punctuation separator property twig">.</span><span class="variable other property twig">prices</span>[
      <span
      class="variable other twig">loop</span><span class="punctuation separator property twig">.</span><span class="variable other property twig">index0</span>].isAvailable) <span class="punctuation section tag twig">}}</span></span>
        </span>
        </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 150px; width: 1056px;" data-screen-row="10"><span class="text html twig"><span class="comment block twig"><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span>
    <span
    class="meta tag template value twig"><span class="punctuation section tag twig">{{</span>  <span class="variable other twig">form_label</span>(<span class="variable other twig">form</span><span class="punctuation separator property twig">.</span><span class="variable other property twig">prices</span>[
      <span
      class="variable other twig">loop</span><span class="punctuation separator property twig">.</span><span class="variable other property twig">index0</span>].isAvailable) <span class="punctuation section tag twig">}}</span></span>
        </span>
        </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 165px; width: 1056px;" data-screen-row="11"><span class="text html twig"><span class="comment block twig"><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span>&lt;br
    /&gt;</span>
    </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 180px; width: 1056px;" data-screen-row="12"><span class="text html twig"><span class="comment block twig"><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span>
    <span
    class="meta tag template value twig"><span class="punctuation section tag twig">{{</span>  <span class="variable other twig">form_label</span>(<span class="variable other twig">form</span><span class="punctuation separator property twig">.</span><span class="variable other property twig">prices</span>[
      <span
      class="variable other twig">loop</span><span class="punctuation separator property twig">.</span><span class="variable other property twig">index0</span>].price) <span class="punctuation section tag twig">}}</span></span>
        </span>
        </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 195px; width: 1056px;" data-screen-row="13"><span class="text html twig"><span class="comment block twig"><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span>
    <span
    class="meta tag template value twig"><span class="punctuation section tag twig">{{</span>  <span class="variable other twig">form_widget</span>(<span class="variable other twig">form</span><span class="punctuation separator property twig">.</span><span class="variable other property twig">prices</span>[
      <span
      class="variable other twig">loop</span><span class="punctuation separator property twig">.</span><span class="variable other property twig">index0</span>].price) <span class="punctuation section tag twig">}}</span></span>
        </span>
        </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 210px; width: 1056px;" data-screen-row="14"><span class="text html twig"><span class="comment block twig"><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span>&lt;/td&gt;</span>
    </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 225px; width: 1056px;" data-screen-row="15"><span class="text html twig"><span class="comment block twig"><span class="leading-whitespace indent-guide invisible-character">····</span><span class="meta tag template value twig"><span class="punctuation section tag twig">{%</span>  <span class="keyword control twig">endfor</span> %#}</span>
    </span>
    </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 240px; width: 1056px;" data-screen-row="16"><span class="text html twig"><span class="comment block twig"><span class="meta tag template value twig"><span class="leading-whitespace indent-guide invisible-character">····</span><span class="leading-whitespace indent-guide invisible-character">····</span>&lt;td&gt;&lt;img
    data-remove class=<span class="string quoted double twig"><span class="punctuation definition string begin twig">"</span>inline-icon<span class="punctuation definition string end twig">"</span></span>src=<span class="string quoted double twig"><span class="punctuation definition string begin twig">"</span>/images/icons/trash.svg
    <span
    class="punctuation definition string end twig">"</span>
      </span>title=<span class="string quoted double twig"><span class="punctuation definition string begin twig">"</span>Remove this price type<span class="punctuation definition string end twig">"</span></span>/&gt;&lt;/td&gt;</span>
      </span>
      </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 255px; width: 1056px;" data-screen-row="17"><span class="text html twig"><span class="comment block twig"><span class="meta tag template value twig"><span class="leading-whitespace indent-guide invisible-character">····</span>&lt;/tr&gt;</span>
    </span>
    </span><span class="invisible-character">¬</span>
  </div>
  <div class="line" style="position: absolute; top: 270px; width: 1056px;" data-screen-row="18"><span class="text html twig"><span class="comment block twig"><span class="meta tag template value twig"><span class="meta tag template value twig"><span class="punctuation section tag twig">{%</span>  <span class="keyword control twig">endblock</span> 
    <span
    class="punctuation section tag twig">%}</span>
      </span>
      </span>
      </span>
      </span><span class="invisible-character">¬</span>
  </div>
  <div class="line cursor-line" style="position: absolute; top: 285px; width: 1056px;" data-screen-row="19"><span class="invisible-character">¬</span>
  </div>
</div>

You've done a great job with the other issues I've reported, so thank you and good luck with this one!

[GuilhemN]

Hello, thank you for this issue, I search what his the problem but now I haven't found ... I cannot reproduce this bug now but I work for it !

I hope i'll find soon...

[GuilhemN]

I was able to reproduce this bug, i prepare a patch. Thank you !

[GuilhemN]

This bug is fixed. I let open this topic if a similar thing appened because i'm not sure that all is corrected... Thank you once again !

[piotr-cz]

Still it doesn't work form in v1.6.1

[GuilhemN]

If you have an idea to fix this issue, please make a PR.