Error on ternary condition in template code

[mwesten]

When using a ternary condition in a template, the output theme template-file contains errors.

Input: src-theme/partials/menu-items.htm

description = "Menuitems in nav bars"

[viewBag]
==
<ul class="flex flex-col">
    {% for item in items %}
    <li class=" {{ item.isActive or item.isChildActive ? 'active' : '' }} {{ item.items ? 'dropdown' : '' }} ">
        <a class=" {{ item.items ? 'dropdown-toggle' : '' }}" {{ item.items ? 'data-toggle="dropdown"' : '' }}
            href="{{ item.url }}">{{ item.title }}</a>
        {% if item.items %}
        <div class="dropdown-menu">
            {% for subitem in item.items %}
            <a class="dropdown-item" href="{{ subitem.url }}">{{ subitem.title }}</a>
            {% endfor %}
        </div>
        {% endif %}
    </li>
    {% endfor %}
</ul>

Outputs: theme/partials/menu-items.htm

Html Webpack Plugin:
<pre>
  Error: Parse Error: <a class=" {{ item.items ? 'dropdown-toggle' : '' }}" {{ item.items ? 'data-toggle="dropdown"' : '' }} 
              href="{{ item.url }}">{{ item.title }}</a> 
          {% if item.items %} 
          <div class="dropdown-menu"> 
              {% for subitem in item.items %} 
              <a class="dropdown-item" href="{{ subitem.url }}">{{ subitem.title }}</a> 
              {% endfor %} 
          </div> 
          {% endif %} 
      </li> 
      {% endfor %} 
  </ul>
  
  - htmlparser.js:240 new HTMLParser
    [romainmazb-tailwindcssboilerplate]/[html-minifier]/src/htmlparser.js:240:13
  
  - htmlminifier.js:966 minify
    [romainmazb-tailwindcssboilerplate]/[html-minifier]/src/htmlminifier.js:966:3
  
  - htmlminifier.js:1326 exports.minify
    [romainmazb-tailwindcssboilerplate]/[html-minifier]/src/htmlminifier.js:1326:16
  
  - index.js:316 
    [romainmazb-tailwindcssboilerplate]/[html-webpack-plugin]/index.js:316:18
  
</pre>

It seems to resemble this issue in html-webpack-plugin:
jantimon/html-webpack-plugin#1336

Changing the minify: true to minify: false in the file themes/romainmazb-tailwindcssboilerplate/modules/html-parser.js on line 99, circumvents this error, although it's not really a fix.....

[RomainMazB]

Hi @mwesten,
Thanks for the issue report and for the investigation.

That's definitely not a fix, I agree with you and I don't want to lose the html minification, even if it's possible to handle it with a cache optimizer plugin.

I will search for a real fix for this issue, though I'll add a note in the readme for those who need a quick fix.

[RomainMazB]

Still no solution to this but I discovered tonight that it's not directly the ternary operator that fails the htmlminifier but the double quotes inside the ternary operator:

{{ item.items ? 'data-toggle="dropdown"' : '' }}

Here it's the double quotes around dropdown which fails the htmlminifier

For this use case this is not a solution but I faced this using this ternary operator:

<div class="row forum-pagination {{ paginationEnabled ? "enabled" : "disabled" }}">

In such case you can just replace the double quotes by simple ones and go on.

[RomainMazB]

Fixed by e06cc92