Parser doesn't allow conditional wrapper elements

[lexisother]

Example case:

<article class="border border-secondary">
  {% if imageOverlay %}
  <figure class="relative">
  {% endif %}
    {% include "some-other-template.twig" %}
  {% if imageOverlay %}
  </figure>
  {% endif %}
</article>

Results in the following error:

(collapsed so as to not show the huge stacktrace)

[error] templates/_components/molecules/card/card.twig: Error: ERROR: Expected element start
[error]   27 |         {% include "some-other-template.twig" %}
[error]   28 |     {% if imageOverlay %}
[error] > 29 |     </figure>
[error]      |      ^
[error]   30 | 	{% endif %}
[error] 
[error] Unexpected closing "figure" tag. Seems like your DOM is out of control.
[error]     at TokenStream.error (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-parser/TokenStream.js:129:24)
[error]     at Parser.error (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-parser/Parser.js:462:21)
[error]     at Parser.matchElement (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-parser/Parser.js:324:18)
[error]     at Parser.parse (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-parser/Parser.js:212:32)
[error]     at Object.parse (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-extension-core/parser/if.js:37:20)
[error]     at Parser.matchTag (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-parser/Parser.js:504:31)
[error]     at Parser.parse (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-parser/Parser.js:178:32)
[error]     at Parser.matchElement (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-parser/Parser.js:348:41)
[error]     at Parser.parse (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-parser/Parser.js:212:32)
[error]     at Object.parse (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-extension-core/parser/if.js:37:20)
[error]     at Parser.matchTag (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-parser/Parser.js:504:31)
[error]     at Parser.parse (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-parser/Parser.js:178:32)
[error]     at Parser.matchElement (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-parser/Parser.js:348:41)
[error]     at Parser.parse (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/melody/melody-parser/Parser.js:212:32)
[error]     at Object.parse (file:///var/www/html/node_modules/.pnpm/@zackad+prettier-plugin-twig@0.16.0/node_modules/@zackad/prettier-plugin-twig/src/parser.js:90:24)
[error]     at Object.parse (file:///var/www/html/node_modules/.pnpm/prettier-plugin-tailwindcss@0.6.13_@zackad+prettier-plugin-twig@0.16.0_prettier@3.3.3/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:1329:27344)
[error]     at async parse4 (file:///var/www/html/node_modules/.pnpm/prettier@3.3.3/node_modules/prettier/index.mjs:20685:11)
[error]     at async coreFormat (file:///var/www/html/node_modules/.pnpm/prettier@3.3.3/node_modules/prettier/index.mjs:21146:7)
[error]     at async formatWithCursor (file:///var/www/html/node_modules/.pnpm/prettier@3.3.3/node_modules/prettier/index.mjs:21348:14)
[error]     at async formatFiles (file:///var/www/html/node_modules/.pnpm/prettier@3.3.3/node_modules/prettier/internal/cli.mjs:3468:18)
[error]     at async main (file:///var/www/html/node_modules/.pnpm/prettier@3.3.3/node_modules/prettier/internal/cli.mjs:3876:5)
[error]     at async Module.run (file:///var/www/html/node_modules/.pnpm/prettier@3.3.3/node_modules/prettier/internal/cli.mjs:3822:5)

[harryfk]

Ran into the same issue and solved it by writing it like this:

{% set contentPart %}
  {% include "some-other-template.twig" %}
{% endset %}

<article class="border border-secondary">
  {% if imageOverlay %}
    <figure class="relative">
      {{ contentPart }}
    </figure>
  {% else %}  
    {{ contentPart }}
  {% endif %}
</article>

Interestingly, I’m finding this easier to read than the original.