Inconsistent results with custom HTML elements

[pascalbaljet]

I've been testing the prettier plugin, and it's pretty solid! However, it sometimes fails with custom HTML elements.

Somehow these two examples work perfectly:

<a href="{{ route('profile.show') }}" class="text-sm text-gray-600 underline hover:text-gray-900">
    {{ __('Edit Profile') }}
</a>

<Custom href="{{ route('profile.show') }}" class="text-sm text-gray-600 underline hover:text-gray-900">
    {{ __('Edit Profile') }}
</Custom>

But when I replace Custom with Link, I get an error.

<Link href="{{ route('profile.show') }}" class="text-sm text-gray-600 underline hover:text-gray-900">
    {{ __('Edit Profile') }}
</Link>

Error Log:

["ERROR" - 12:48:16] Error formatting document.
["ERROR" - 12:48:16] Void elements do not have end tags "Link" (5:1)
  3 | <Link href="B3wfNvK6KBizrR8L1TbBf1hS9rLB" class="text-sm text-gray-600 underline hover:text-gray-900">
  4 |     <BsAGbFc09RI1x6m186Sbu8gnB />
> 5 | </Link>
    | ^^^^^^^
  6 |

[JohnathonKoster]

I will think on if I can work around this in an easy way - but this is a prettier issue at the end of the day (and not related to the Blade functionality specifically).

[JohnathonKoster]

Tracked the issue down to custom elements that have the same name as void elements, which causes issues with prettier.

As of 1.6.5, if the custom elements are not lower case, the formatter will assume you want to treat them as a custom tag. When it detects this it does some internal magic to prevent prettier getting confused.

The following tags now have test coverage when used as custom HTML tags:

• area
• base
• br
• col
• command
• embed
• hr
• img
• input
• keygen
• link
• meta
• param
• source
• track
• wbr

[pascalbaljet]

Thanks for responding so quickly! I found that it works for most templates. Still, on some templates I get an Unexpected character "EOF" error:

["ERROR" - 12:26:05] Error formatting document.
["ERROR" - 12:26:05] Unexpected character "EOF" (25:27)
  23 |             <VoidBWAi131qm5cAJkABLink href="B60gF4HrsgtqTNESP1oSrgQyUgAB" class="text-sm text-gray-600 underline hover:text-gray-900">
  24 |     <BEZnwESjLTNa2CHtYnmF0LlRB />
> 25 | </VoidBWAi131qm5cAJkABLink
     |                           ^

You can reproduce it by wrapping the Link example in a div.

[pascalbaljet]

Some extra info: the same happens when you wrap the Link example in an if-statement, wrapped in a div. The error is different, though:

{{-- this works: --}}

@if (true)
    <Link href="{{ route('profile.show') }}" class="text-sm text-gray-600 underline hover:text-gray-900">
        {{ __('Edit Profile') }}
    </Link>
@endif

{{-- this doesn't work: --}}

<div>
    @if (true)
        <Link href="{{ route('profile.show') }}" class="text-sm text-gray-600 underline hover:text-gray-900">
            {{ __('Edit Profile') }}
        </Link>
    @endif
</div>

Console output:

SyntaxError: Unpaired condition control structure

  1| <div>
 >2|     @if (true)
  3|         <VoidBMIgYwWDHSRjItyBLink href="{{ route('profile.show') }}" class="text-sm text-gray-600 underline hover:text-gray-900">
  4|             {{ __('Edit Profile') }}
  5|         </VoidBMIgYwWDHSRjItyBLink

[JohnathonKoster]

Some extra info: the same happens when you wrap the Link example in an if-statement, wrapped in a div. The error is different, though:

{{-- this works: --}}

@if (true)
    <Link href="{{ route('profile.show') }}" class="text-sm text-gray-600 underline hover:text-gray-900">
        {{ __('Edit Profile') }}
    </Link>
@endif

{{-- this doesn't work: --}}

<div>
    @if (true)
        <Link href="{{ route('profile.show') }}" class="text-sm text-gray-600 underline hover:text-gray-900">
            {{ __('Edit Profile') }}
        </Link>
    @endif
</div>

Console output:

SyntaxError: Unpaired condition control structure

  1| <div>
 >2|     @if (true)
  3|         <VoidBMIgYwWDHSRjItyBLink href="{{ route('profile.show') }}" class="text-sm text-gray-600 underline hover:text-gray-900">
  4|             {{ __('Edit Profile') }}
  5|         </VoidBMIgYwWDHSRjItyBLink

Thanks for all the extra info - will work to get something going to resolve this! 🙌

[JohnathonKoster]

Just an update that the described issue with closing tags has been resolved as of 1.6.6

[pascalbaljet]

Thanks, works as a charm! Just reformatted 140+ Blade files without a glitch.