[1.x] Adds `blade` support #256

nunomaduro · 2024-03-15T18:20:25Z

Note: This pull request is a work in progress, and you can help by trying it in your local project:

composer require laravel/pint:dev-feat/blade
./vendor/bin/pint --blade

Check the differences in your Blade templates and report any issues!

This pull request is a proof of concept that adds Laravel Blade support to Pint:

Here is the basic format applied:

<!-- Before -->
@foreach ($users as $user)
<p      class="p-4" >This is user {{ $user->id }}</p>
@endforeach

<!-- after: -->
@foreach ($users as $user)
    <p class="p-4">This is user {{ $user->id }}</p>
@endforeach

Tailwind classes are "sorted" using Tailwind's recommended class order:

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>

<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

Technically, the way it works is simple - for the user, it is a completely fast experience, while behind the scenes, we are using Prettier and Prettier Plugin Blade to actually style those Blade templates. The dependencies are installed in Laravel Pint's own vendor directory on the first run, so there are no potential conflicts with existing user dependencies.

Of course, it requires Node to be installed on the user's machine.

Jubeki

How about naming the rule Laravel/blade instead? (Doesn't really matter, but I think the name is a little better)

app/Fixers/LaravelBladeFixer.php

resources/presets/laravel.php

Jubeki · 2024-03-15T18:57:37Z

I really love the idea and wanted to test it under a fresh repository.

Setup

New Laravel Project with Breeze (Blade+Alpine+Darkmode)

The commit with the changes:
Jubeki/laravel-pint-blade-test@504200c

Feedback

Overall a very good result, only with some little things bugging me.

It is a little slow on the first run. But the second run (probably due to cache) is much faster.

Somethings I noticed:

in components/application-logo, the d="..." was moved to a new line, were as in components/modal, the x-data was moved to the previous line.
If there are multiple attributes in multiple lines, the closing tag is not on a new line anymore (components/modal see this line
components/nav-link is formatted weirdly

Co-authored-by: Julius Kiekbusch <[email protected]>

nunomaduro · 2024-03-15T19:27:27Z

@Jubeki We've just renamed the fixer name. Regarding your remarks, can you try to see (or even PR) your suggestions?

0528Makoto · 2024-03-15T19:30:26Z

I currently use this Blade Prettier Plugin package for prettier with blade, would it conflict? Since I have jobs that are executed every time I commit, the pint job and the prettier job, would the parse and format for the blade files be executed twice?

pd. This package npm also parses and formats alpine

nunomaduro · 2024-03-15T19:42:04Z

@DevMakoto, in that case, you would either disable blade formatting in Pint or disable blade formatting in Prettier.

0528Makoto · 2024-03-15T19:44:08Z

@DevMakoto, in that case, you would either disable blade formatting in Pint or disable blade formatting in Prettier.

@nunomaduro, this package of shufo doesn't parse or format Alpine.js for me. I would like to only use Pint if it has parsing and formatting for Blade.

[feat/blade] Changes plugin

Feat/prettier plugin

Jubeki · 2024-03-16T15:06:21Z

I think the new prettier plugins works much better. ❤️

Same Setup as before, with the following result: Jubeki/laravel-pint-blade-test@b756cd0

The only remaining thing bothering me, is that the class attribute is sometimes moved to a new line, if it is too long (at least, I think that is the reason). (See Jubeki/laravel-pint-blade-test@b756cd0#diff-e720f286fb3c46871afbdac94bfe0293e346e36a23d16d636485431ddefe8324R3-R5 or the image below).
I also found no configuration option to change it, like if a single attribute, keep it on same line.

I like that if there are multiple attributes, they are always moved to a new line each. (though it looked weird on the first glance, if they are all very short)

Single Attribute moved to new line (should not happen in my opinion):

Multiple attributes moved to new lines (good in my opinion)

adevade · 2024-04-17T12:02:58Z

Very exited for this feature! 🚀

I tried running on my Windows 11 machine and I'm getting strange behaviour, using Git Bash. Same results using PowerShell.

It takes the contents of one file and moves to another. For example it copies and replaces the content from admin/categories/edit.blade.php to admin/documents/edit.blade.php. But it also does the same from admin/documents/create.blade.php to admin/trashed-documents/index.blade.php, so it's not based on the filename.

Also getting different results and errors on each subsequent run.

Please let me know if I can provide more helpful info in some way!

Windows 11
Node 20.12.1
npm 10.5.2

Laravel Version ...... 10.48.8
PHP Version .......... 8.2.8
Composer Version ..... 2.7.2
Environment .......... local
Debug Mode ........... ENABLED

First run

❯ pint --blade

  ...............................................................!!!✓!!✓!✓✓!!!!!!!!!!!!✓✓!✓✓!✓..................

  ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── Laravel  
    FAIL   ............................................................................................................................................................. 110 files, 20 errors, 9 style issues fixed  
  ! resources\views\admin\categories\create.blade.php                                                                    '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\admin\categories\edit.blade.php                                                                      '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\admin\categories\index.blade.php                                                                     '..' is not recognized as an internal or external command, operable program or batch file.  
  ✓ resources\views\admin\documents\create.blade.php                                                                                                                                                  Laravel/blade  
  ! resources\views\admin\documents\edit.blade.php                                                                       '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\admin\documents\index.blade.php                                                                      '..' is not recognized as an internal or external command, operable program or batch file.  
  ✓ resources\views\admin\trashed-documents\index.blade.php                                                                                                                                           Laravel/blade  
  ! resources\views\auth\login.blade.php                                                                                 '..' is not recognized as an internal or external command, operable program or batch file.  
  ✓ resources\views\components\button.blade.php                                                                                                                                                       Laravel/blade  
  ✓ resources\views\components\card.blade.php                                                                                                                                                         Laravel/blade  
  ! resources\views\components\container.blade.php                                                                       '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\components\empty-state.blade.php                                                                     '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\components\form.blade.php                                                                            '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\components\halle-logo.blade.php                                                                      '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\components\header-meta-item.blade.php                                                                '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\components\input-group.blade.php                                                                     '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\components\input.blade.php                                                                           '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\components\list-container.blade.php (node:21508) [DEP0147] DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive…  
  ! resources\views\components\list-item.blade.php                                                                       '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\components\select.blade.php                                                                                                      Unexpected non-whitespace character after JSON at position 321  
  ! resources\views\errors\404.blade.php                                                                                 '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\errors\503.blade.php                                                                                                            Unexpected non-whitespace character after JSON at position 1402  
  ✓ resources\views\layouts\alert.blade.php                                                                                                                                                           Laravel/blade  
  ✓ resources\views\layouts\app.blade.php                                                                                                                                                             Laravel/blade  
  ! resources\views\layouts\footer.blade.php                                                                                                        Unexpected non-whitespace character after JSON at position 1224  
  ✓ resources\views\layouts\head.blade.php                                                                                                                                                            Laravel/blade  
  ✓ resources\views\layouts\header.blade.php                                                                                                                                                          Laravel/blade  
  ! resources\views\layouts\nav.blade.php                                                                                                            Unexpected non-whitespace character after JSON at position 473  
  ✓ resources\views\layouts\split.blade.php                                                                                                                                                           Laravel/blade

Second run

❯ pint --blade

  ...............................................................!!!.!✓.✓..!✓!!!!✓✓!!!✓..!..✓...................

  ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── Laravel  
    FAIL   ............................................................................................................................................................. 110 files, 13 errors, 7 style issues fixed  
  ! resources\views\admin\categories\create.blade.php                                                                    '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\admin\categories\edit.blade.php                                                                      '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\admin\categories\index.blade.php                                                                     '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\admin\documents\edit.blade.php                                                                       '..' is not recognized as an internal or external command, operable program or batch file.  
  ✓ resources\views\admin\documents\index.blade.php                                                                                                                                                   Laravel/blade  
  ✓ resources\views\auth\login.blade.php                                                                                                                                                              Laravel/blade  
  ! resources\views\components\container.blade.php                                                                       '..' is not recognized as an internal or external command, operable program or batch file.  
  ✓ resources\views\components\empty-state.blade.php                                                                                                                                                  Laravel/blade  
  ! resources\views\components\form.blade.php  (node:23912) [DEP0147] DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive: true })…  
  ! resources\views\components\halle-logo.blade.php                                                                                                 Unexpected non-whitespace character after JSON at position 1435  
  ! resources\views\components\header-meta-item.blade.php                                                                '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\components\input-group.blade.php                                                                     '..' is not recognized as an internal or external command, operable program or batch file.  
  ✓ resources\views\components\input.blade.php                                                                                                                                                        Laravel/blade  
  ✓ resources\views\components\list-container.blade.php                                                                                                                                               Laravel/blade  
  ! resources\views\components\list-item.blade.php                                                                       '..' is not recognized as an internal or external command, operable program or batch file.  
  ! resources\views\components\select.blade.php Unexpected closing tag "b_kOgI1AW3xQB". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.ht</b_kOgI1AW3xQB><b_nk0xB><div>…
  ! resources\views\errors\404.blade.php                                                                                 '..' is not recognized as an internal or external command, operable program or batch file.  
  ✓ resources\views\errors\503.blade.php                                                                                                                                                              Laravel/blade  
  ! resources\views\layouts\footer.blade.php                                                                             '..' is not recognized as an internal or external command, operable program or batch file.  
  ✓ resources\views\layouts\nav.blade.php                                                                                                                                                             Laravel/blade

Simple Blade Component with error

❯ pint --blade resources/views/components/form.blade.php 

  !

  ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── Laravel  
    FAIL   ........................................................................................................................................................................................ 1 file, 1 error  
  ! resources\views\components\form.blade.php                                                                            '..' is not recognized as an internal or external command, operable program or batch file.

@props([
    'method' => 'POST',
    'action',
    'noCsrf' => false,
])

<form
    method="{{ in_array(strtoupper($method), ['POST', 'PUT', 'PATCH', 'DELETE']) ? 'POST' : 'GET' }}"
    action="{{ $action }}"
    {{ $attributes }}
>
    @if (!in_array($method, ['GET', 'POST']))
        @method($method)
    @endif

    @if (!$noCsrf)
        @csrf
    @endif

    {{ $slot }}
</form>

adevade · 2024-05-07T09:57:14Z

I got it working on my machine by tweaking the pintCommand in .blade.format.json! After adding php to the beginning of the command everything works as expected, and the files are parsed.

- "pintCommand": "../builds/pint {file}",
+ "pintCommand": "php ../builds/pint {file}",

adevade · 2024-05-11T20:38:36Z

I like that if there are multiple attributes, they are always moved to a new line each. (though it looked weird on the first glance, if they are all very short)
-- @Jubeki

I actually think that 2 attributes on the same line is fine most of the time, since they're often short. Maybe this setting could be configurable?

In your screenshots there are some tags that are not moved to separate lines, despite having 2 attributes. <x-input-label for="..." :value="..." /> and <x-input-error :messages="..." class="..." />. Is this because of the Blade syntax colon? Or did you change the formatting by hand for the screenshots?

Some examples that would look better on the same line in my opinion:

wescopeland · 2024-05-11T22:35:39Z

Part of the joy of using Prettier is not having to worry about even the possibility of debates regarding the config. Even the few settings it supports, printWidth in particular, have been the source of debates on my teams.

If possible, please consider not adding additional config.

Additional reading: Prettier Option Philosophy

mansoorkhan96 · 2024-05-12T06:39:09Z

Thank you for working on this. I have tried it in a project.

Here is an issue:

It does not format anchor tags properly

<!-- Before -->
<li class="mb-3.5"><a class="text-white hover:text-gray-200 font-medium leading-relaxed" href="{{ route('team') }}">Team</a></li>

<!-- After -->
<li class="mb-3.5">
    <a
        class="font-medium leading-relaxed text-white hover:text-gray-200"
        href="{{ route('team') }}"
        >Team</a
    >
</li>

<!-- Expected -->
<li class="mb-3.5">
    <a
        class="font-medium leading-relaxed text-white hover:text-gray-200"
        href="{{ route('team') }}"
    >
        Team
    </a>
</li>

adevade · 2024-05-12T09:12:41Z

Part of the joy of using Prettier is not having to worry about even the possibility of debates regarding the config. Even the few settings it supports, printWidth in particular, have been the source of debates on my teams.
-- @wescopeland

Yeah I guess you're right. It's just sooo close to how I actually want to format it 😅 I'll just have to get used to it 👍

chrillep · 2024-09-04T14:56:16Z

love the idea!
In the meantime we use

with code-guide setting

.prettierrc.json

{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "@shufo/prettier-plugin-blade"
  ],
  "overrides": [
    {
      "files": [
        "*.blade.php"
      ],
      "options": {
        "parser": "blade",
        "wrapAttributes": "force-expand-multiline",
        "sortTailwindcssClasses": true,
        "tailwindcssConfigPath": "tailwind.config.cjs",
        "sortHtmlAttributes": "code-guide"
      }
    }
  ]
}

`--wrap-attributes`	The way to wrap attributes. [`auto`\|`force`\|`force-aligned`\|`force-expand-multiline`\|`aligned-multiple`\|`preserve`\|`preserve-aligned`]. default: `auto`
`--wrap-attributes-min-attrs`	Minimum number of html tag attributes for force wrap attribute options. Wrap the first attribute only if 'force-expand-multiline' is specified in wrap attributes. default: `2`.
`--sort-tailwindcss-classes`	Sort Tailwind CSS classes. It will automatically look for and respect `tailwind.config.js` if it exists. default: `false`
`--sort-html-attributes`	Sort HTML Attributes in the specified order. [`none` \| `alphabetical` \| `code-guide` \| `idiomatic` \| `vuejs`] default: `none`

francoism90 · 2024-09-24T17:39:38Z

@chrillep The problem is that it doesn't always format the blade correctly:

[Bug]: @section with inline value cannot be handled shufo/prettier-plugin-blade#291
[Formatting Bug]: @break inside @if inside @foreach loop indentation shufo/prettier-plugin-blade#288
[Feature Request]: Auto-wrapping of class attributes shufo/prettier-plugin-blade#285

It would be really great if Laravel Pint could handle this, including Tailwind class sorting. :)

chrillep · 2024-10-11T18:12:48Z

@chrillep The problem is that it doesn't always format the blade correctly:

[Bug]: @section with inline value cannot be handled shufo/prettier-plugin-blade#291

[Formatting Bug]: @break inside @if inside @foreach loop indentation shufo/prettier-plugin-blade#288

[Feature Request]: Auto-wrapping of class attributes shufo/prettier-plugin-blade#285

It would be really great if Laravel Pint could handle this, including Tailwind class sorting. :)

I agree. But maybe Bring @shufo into the fold since he has added great functionality to blade linting!
The sortHtmlAttributes is 👌

robsontenorio · 2024-12-01T20:27:13Z

@nunomaduro Currently I can't see how it get my own .prettierrc / .prettierrc.json / prettierrc.json file. Is this a limitation for now ? It does not take effect.

nunomaduro added 2 commits March 15, 2024 17:34

Adds blade support

89c97cb

Improves error handling

a542c13

nunomaduro requested review from taylorotwell and driesvints March 15, 2024 18:20

nunomaduro marked this pull request as draft March 15, 2024 18:20

nunomaduro added 3 commits March 15, 2024 18:25

Rebuilds

fd39d90

Deletes version file

3b45cb5

Ignores version file

4b2c343

Jubeki reviewed Mar 15, 2024

View reviewed changes

app/Fixers/LaravelBladeFixer.php Outdated Show resolved Hide resolved

resources/presets/laravel.php Outdated Show resolved Hide resolved

nunomaduro and others added 3 commits March 15, 2024 19:04

Update app/Fixers/LaravelBladeFixer.php

741f377

Co-authored-by: Julius Kiekbusch <[email protected]>

Update resources/presets/laravel.php

4ee92d9

Co-authored-by: Julius Kiekbusch <[email protected]>

Rebuilds

9458bc7

nunomaduro added 2 commits March 15, 2024 19:31

Validates with node and npm are installed

25160ce

Rebuilds

c22d555

nunomaduro added 8 commits March 16, 2024 13:33

Changes underlying prettier plugins

e9fce59

Changes version

ece1d68

Rebuilds

8b547fc

Merge pull request #258 from laravel/feat/prettier-plugin

dce1b6b

[feat/blade] Changes plugin

Improves error handling

fb4061e

Rebuilds

ac1dbb7

Merge pull request #259 from laravel/feat/prettier-plugin

dbde266

Feat/prettier plugin

chore: bumps dependencies

8a6aba7

nunomaduro added 2 commits March 17, 2024 15:28

Updates prettier plugin blade version

4e19273

Rebuilds

d191f53

nunomaduro added 16 commits March 23, 2024 22:15

Rebuilds

2f093ca

Adjusts style

ba86429

Rebuilds

5a889e3

Ignores cache for now

7e97525

150 printWidth

b325827

Rebuilds

33bbf45

Puts SVGs in the same line

4d3e126

Coding style

3148bcc

Ignores minified code

f3371d2

Refactors code

58e661c

Rebuilds

4a086d3

Style

d06e89d

inline paragrahps

d11cbbd

Merge branch 'main' into feat/blade

e775568

Rebuils

f80b15e

Rebuilds

50229c4

nunomaduro added 2 commits April 22, 2024 10:29

bumps dependencies

587cb48

Rebuilds

3da5103

Jubeki mentioned this pull request May 15, 2024

[1.x] Enable Parallel Execution #272

Merged

yusufkandemir mentioned this pull request Oct 26, 2024

Support custom fixers #290

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1.x] Adds `blade` support #256

[1.x] Adds `blade` support #256

nunomaduro commented Mar 15, 2024 •

edited

Loading

Jubeki left a comment

Jubeki commented Mar 15, 2024 •

edited

Loading

nunomaduro commented Mar 15, 2024

0528Makoto commented Mar 15, 2024

nunomaduro commented Mar 15, 2024

0528Makoto commented Mar 15, 2024 •

edited

Loading

Jubeki commented Mar 16, 2024 •

edited

Loading

adevade commented Apr 17, 2024 •

edited

Loading

adevade commented May 7, 2024 •

edited

Loading

adevade commented May 11, 2024

wescopeland commented May 11, 2024 •

edited

Loading

mansoorkhan96 commented May 12, 2024

adevade commented May 12, 2024

chrillep commented Sep 4, 2024 •

edited

Loading

francoism90 commented Sep 24, 2024

chrillep commented Oct 11, 2024 •

edited

Loading

robsontenorio commented Dec 1, 2024 •

edited

Loading

[1.x] Adds blade support #256

Are you sure you want to change the base?

[1.x] Adds blade support #256

Conversation

nunomaduro commented Mar 15, 2024 • edited Loading

Jubeki left a comment

Choose a reason for hiding this comment

Jubeki commented Mar 15, 2024 • edited Loading

Setup

Feedback

nunomaduro commented Mar 15, 2024

0528Makoto commented Mar 15, 2024

nunomaduro commented Mar 15, 2024

0528Makoto commented Mar 15, 2024 • edited Loading

Jubeki commented Mar 16, 2024 • edited Loading

adevade commented Apr 17, 2024 • edited Loading

adevade commented May 7, 2024 • edited Loading

adevade commented May 11, 2024

wescopeland commented May 11, 2024 • edited Loading

mansoorkhan96 commented May 12, 2024

It does not format anchor tags properly

adevade commented May 12, 2024

chrillep commented Sep 4, 2024 • edited Loading

francoism90 commented Sep 24, 2024

chrillep commented Oct 11, 2024 • edited Loading

robsontenorio commented Dec 1, 2024 • edited Loading

[1.x] Adds `blade` support #256

[1.x] Adds `blade` support #256

nunomaduro commented Mar 15, 2024 •

edited

Loading

Jubeki commented Mar 15, 2024 •

edited

Loading

0528Makoto commented Mar 15, 2024 •

edited

Loading

Jubeki commented Mar 16, 2024 •

edited

Loading

adevade commented Apr 17, 2024 •

edited

Loading

adevade commented May 7, 2024 •

edited

Loading

wescopeland commented May 11, 2024 •

edited

Loading

chrillep commented Sep 4, 2024 •

edited

Loading

chrillep commented Oct 11, 2024 •

edited

Loading

robsontenorio commented Dec 1, 2024 •

edited

Loading