search

shufo / blade-formatter

An opinionated blade template formatter for Laravel that respects readability
https://www.npmjs.com/package/blade-formatter
MIT License
456 stars 25 forks source link

[Formatting Bug]: 1.38.4 seems to breaks when attributes are not separated by whitespace #878

Closed vorban closed 1 year ago

vorban commented 1 year ago

Version

1.38.4

Template before formatting

edit: i pasted the wrong clipboard, sorry.

        <button class="m-2.5 h-5 w-5 scale-125 cursor-pointer p-1" data-tippy-content="Modifier la prestation"
            :class="isHovered && !currently_dragging ? 'opacity-100 delay-50' : 'opacity-0 delay-0'"x-data="{ tippyInstance: null }" x-init="tippyInstance = window.tippy($root)" x-on:click="tippyInstance.hide(); $dispatch('open-prestation-modal', {{ $task->id }})">
            @include('svg.misc.tag')
        </button>
        <button class="m-2.5 h-5 w-5 scale-125 cursor-pointer p-1" data-tippy-content="Modifier la durée" :class="isHovered && !currently_dragging ? 'opacity-100 delay-50' : 'opacity-0 delay-0'" x-data="{ tippyInstance: null }" x-init="tippyInstance = window.tippy($root)" x-on:click="tippyInstance.hide(); $dispatch('open-duration-modal', {{ $task->id }})">
            @include('svg.misc.extand')
        </button>
        <button class="m-2.5 h-5 w-5 scale-125 cursor-pointer p-0.5" data-tippy-content="Dupliquer cette tâche" :class="isHovered && !currently_dragging ? 'opacity-100 delay-50' : 'opacity-0 delay-0'" wire:click="duplicate"x-data="{ tippyInstance: null }" x-init="tippyInstance = window.tippy($root)">
            @include('svg.misc.duplicate')
        </button>

Template after formatting

<button class="m-2.5 h-5 w-5 scale-125 cursor-pointer p-1" data-tippy-content="Modifier la prestation"
            :class="isHovered && !currently_dragging ? 'opacity-100 delay-50' :
                'opacity-0 delay-0'"x-data="{ tippyInstance: null }" x-init="tippyInstance = window.tippy($root)" x-on:click="tippyInstance.hide(); $dispatch('open-prestation-modal', {{ $task->id }})">
            @include('svg.misc.tag')
                <
                /button> <
                button class="m-2.5 h-5 w-5 scale-125 cursor-pointer p-1" class ="isHovered && !currently_dragging ? 'opacity-100 delay-50' : 'opacity-0 delay-0'"x data-tippy-content="Modifier la durée":
                -
                data ="{ tippyInstance: null }" x-init="tippyInstance = window.tippy($root)" x-on:click="tippyInstance.hide(); $dispatch('open-duration-modal', {{ $task->id }})" >
                @include('svg.misc.extand') <
                /button> <
                button class="m-2.5 h-5 w-5 scale-125 cursor-pointer p-0.5" data-tippy-content="Dupliquer cette tâche": class ="isHovered
            && !currently_dragging ? 'opacity-100 delay-50' : 'opacity-0 delay-0'" wire:click="duplicate"x-data="{ tippyInstance: null }" x-init="tippyInstance = window.tippy($root)">
            @include('svg.misc.duplicate')
        </button>

Expected Behaviour

The code above is not correctly formatted anymore.

This issue was noticed when we updated vscode-blade-formatter this morning to 0.23.3, which bumps your package from 1.38.3 to 1.38.4.

Behaviour was reproduced with a fresh install of 1.38.4 through npm i -g per your documentation, the diff output is attached.

Relevant log output

$ blade-formatter --version
1.38.4

$ blade-formatter -c -d resources/views/livewire/calendar/task.blade.php

Check formatting...
resources/views/livewire/calendar/task.blade.php

Differences:

path: resources/views/livewire/calendar/task.blade.php:29
--        </button>
++                <
path: resources/views/livewire/calendar/task.blade.php:30
--        <button class="m-2.5 h-5 w-5 scale-125 cursor-pointer p-1" data-tippy-content="Modifier la durée": class ="isHovered
++                /button> <
path: resources/views/livewire/calendar/task.blade.php:31
--            && !currently_dragging ? 'opacity-100 delay-50' : 'opacity-0 delay-0'"x - data ="{ tippyInstance: null }" x-init="tippyInstance = window.tippy($root)" x-on:click="tippyInstance.hide(); $dispatch('open-duration-modal', {{ $task->id }})">
++                button class="m-2.5 h-5 w-5 scale-125 cursor-pointer p-1" class ="isHovered && !currently_dragging ? 'opacity-100 delay-50' : 'opacity-0 delay-0'"x data-tippy-content="Modifier la durée":
path: resources/views/livewire/calendar/task.blade.php:32
--            @include('svg.misc.extand')
++                -
path: resources/views/livewire/calendar/task.blade.php:33
--        </button>
++                data ="{ tippyInstance: null }" x-init="tippyInstance = window.tippy($root)" x-on:click="tippyInstance.hide(); $dispatch('open-duration-modal', {{ $task->id }})" >
path: resources/views/livewire/calendar/task.blade.php:34
--        <button class="m-2.5 h-5 w-5 scale-125 cursor-pointer p-0.5" data-tippy-content="Dupliquer cette tâche" :class="isHovered && !currently_dragging ? 'opacity-100 delay-50' : 'opacity-0 delay-0'" wire:click="duplicate"x-data="{ tippyInstance: null }" x-init="tippyInstance = window.tippy($root)">
++                @include('svg.misc.extand') <
path: resources/views/livewire/calendar/task.blade.php:35
--            @include('svg.misc.duplicate')
++                /button> <
path: resources/views/livewire/calendar/task.blade.php:36
--        </button>
++                button class="m-2.5 h-5 w-5 scale-125 cursor-pointer p-0.5" data-tippy-content="Dupliquer cette tâche": class ="isHovered
path: resources/views/livewire/calendar/task.blade.php:37
--    </div>
++            && !currently_dragging ? 'opacity-100 delay-50' : 'opacity-0 delay-0'" wire:click="duplicate"x-data="{ tippyInstance: null }" x-init="tippyInstance = window.tippy($root)">
path: resources/views/livewire/calendar/task.blade.php:38
--    <div @class([
++            @include('svg.misc.duplicate')
path: resources/views/livewire/calendar/task.blade.php:39
--        'shadow shadow-gray-300 task rounded-md border border-borderMedium py-[10px] px-3 flex flex-col items-start justify-between  bg-white cursor-pointer w-full h-full border-t-[3px]',
++        </button>
path: resources/views/livewire/calendar/task.blade.php:40
--        'opacity-100' => $task->tracking_started_at !== null,
++    </div>
vorban commented 1 year ago

Quick update - somehow we missed a detail on the first <button>:

        <button class="m-2.5 h-5 w-5 scale-125 cursor-pointer p-1" data-tippy-content="Modifier la prestation"
            :class="isHovered && !currently_dragging ? 'opacity-100 delay-50' : 'opacity-0 delay-0'"x-data="{ tippyInstance: null }" x-init="tippyInstance = window.tippy($root)" x-on:click="tippyInstance.hide(); $dispatch('open-prestation-modal', {{ $task->id }})">
            @include('svg.misc.tag')
        </button>

x-data is joined with the previous " without spacing.

Adding a space completely fixes the issue.

If this is intended behaviour, this issue can be closed, and I apologize for the mishaps.

shufo commented 1 year ago

Thanks @vorban for reporting the issue. This is not intended behaviour, so I'll look for into it.

shufo commented 1 year ago

Fixed at https://github.com/shufo/blade-formatter/releases/tag/v1.38.5 Fixed at v0.23.4 on vscode-blade-formatter