Stillat / blade-parser-typescript

A Laravel Blade parser, compiler, and static analyzer written in TypeScript.
https://stillat.com
MIT License
88 stars 2 forks source link

Nested `@if` statements give unexpected closing tag error #109

Closed RobertBlaauwendraad closed 2 months ago

RobertBlaauwendraad commented 2 months ago

I think my @else tag gets seen as a closing tag. My code gets formatted like this, which has wrong indentation:

@if(isset($title) && !empty($title))
  @if(isset($link) && !empty($link))
    <a href="{{ $link }}"
       class="usp {{ isset($class) && !empty($class) ? $class : '' }}">
      @else
        <div class="usp {{ isset($class) && !empty($class) ? $class : '' }}">
          @endif
          <div
            class="usp__icon {{ isset($size) && $size == 'sm' ? 'usp__icon--sm' : '' }}">
            <i class="icon icon-checkmark" />
          </div>
          <span class="usp__text">{{ $title }}</span>
        @if(isset($link) && !empty($link))
    </a>
    @else
      </div>
  @endif
@endif

And in the console I get the following error:

SyntaxError: Unexpected closing tag "BIrCmELzBJt4vxiB5IeS5rncwcCCO9CmxgB". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (9:1)
[error]    7 |        class="usp B6ydYpWdTo3YClozUhI6gSxPdVZyhcFFNoMhXAJAlVmLO0puhwoB">
[error]    8 |       
[error] >  9 | </BIrCmELzBJt4vxiB5IeS5rncwcCCO9CmxgB>
[error]      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[error]   10 | <B9afUB><BzLS72o32UusUPmOR6pxkqppUB />
[error]   11 |
[error]   12 |         <div class="usp B6ydYpWdTo3YClozUhI6gSxPdVZyhcFFNoMhXAJAlVmLO0puhwoB">
[error]    7 |           @endif
[error]    8 |           <div
[error] >  9 |             class="usp__icon {{ isset($size) && $size == 'sm' ? 'usp__icon--sm' : '' }}">
[error]      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[error]   10 |             <i class="icon icon-checkmark" />
[error]   11 |           </div>
[error]   12 |           <span class="usp__text">{{ $title }}</span>
RobertBlaauwendraad commented 2 months ago
  {{-- format-ignore-start --}}
  @if(isset($link) && !empty($link))
    <a href="{{ $link }}"
       class="usp {{ isset($class) && !empty($class) ? $class : '' }}">
      @else
        <div class="usp {{ isset($class) && !empty($class) ? $class : '' }}">
          @endif
          <div
            class="usp__icon {{ isset($size) && $size == 'sm' ? 'usp__icon--sm' : '' }}">
            <i class="icon icon-checkmark"></i>
          </div>
          <span class="usp__text">{{ $title }}</span>
        @if(isset($link) && !empty($link))
          {{-- format-ignore-end --}}
    </a>
    @else
      </div>
  @endif
@endif

This is the smallest block I can ignore to resolve the error, so it might be due to nested @if statements

JohnathonKoster commented 2 months ago

This issue is caused by having these types of things:

 @if(isset($link) && !empty($link))
    </a>
    @else
      </div>
  @endif

This will ultimately end up looking like an unpaired element to prettier, causing issues. I have no plans to support these types of templates.