[Bug]: Plugin stopped formatting blade files after upgrading prettier to 3.0.0

[Jeto143]

Description

Using version 1.9.2 (was 1.8.13 before) and prettier 3.0.0 (was 2.8.8 before), no Blade files are being checked nor fixed anymore.

It seems more related to the prettier upgrade (unlikely to be a bug on its side, though), as rolling back this plugin to 1.8.13 doesn't make any difference.

Expected Behavior

The Blade files are checked or fixed as they used to be.

Actual Behavior

No Blade files are even being considered. Nothing is reported nor logged either, it's like they don't exist.

Additional Context

package.json

"devDependencies": {
    "@shufo/prettier-plugin-blade": "1.9.2",
    "@tailwindcss/aspect-ratio": "0.4.2",
    "@tailwindcss/forms": "0.5.3",
    "@tailwindcss/typography": "0.5.9",
    "axios": "1.4.0",
    "cross-env": "7.0.3",
    "cypress": "12.16.0",
    "jquery": "3.7.0",
    "laravel-mix": "6.0.49",
    "lodash": "4.17.21",
    "postcss-import": "15.1.0",
    "prettier": "3.0.0",
    "resolve-url-loader": "5.0.0",
    "sass": "1.63.6",
    "sass-loader": "13.3.2",
    "tailwindcss": "3.3.2",
    "vue-template-compiler": "2.7.14"
},
"dependencies": {
    "alpinejs": "^3.12.0",
    "clipboard": "^2.0.11",
    "toastify-js": "^1.12.0"
}

.prettierrc.json

{
  "plugins": [
    "@shufo/prettier-plugin-blade"
  ],
  "overrides": [
    {
      "files": [
        "*.blade.php"
      ],
      "options": {
        "parser": "blade",
        "sortTailwindcssClasses": true,
        "wrapAttributes": "aligned-multiple"
      }
    }
  ]
}

.prettierignore

(None)

[shufo]

@Jeto143 Thank you for your report. I can format the blade file with the same settings as your .prettierrc.json, so the problem may be related to the tailwind settings or something.

Repro:

 $  ./node_modules/.bin/prettier --version
3.0.0

 $  yarn list | grep @shufo/prettier-plugin-blade
warning package.json: No license field
warning No license field
├─ @shufo/prettier-plugin-blade@1.9.2

 $  cat .prettierrc.json
{
  "plugins": [
    "@shufo/prettier-plugin-blade"
  ],
  "overrides": [
    {
      "files": [
        "*.blade.php"
      ],
      "options": {
        "parser": "blade",
        "sortTailwindcssClasses": true,
        "wrapAttributes": "aligned-multiple"
      }
    }
  ]
}

 $  cat test2.blade.php
<div class="test absolute m-2 block h-4 w-4" id="test">
@if (true)
test
@endif
</div>

 $  ./node_modules/.bin/prettier test2.blade.php
<div class="test absolute m-2 block h-4 w-4" id="test">
    @if (true)
        test
    @endif
</div>

tailwind.config.js

 $  cat tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

You may find the problem by modifying the tailwind config or making backup for config and delete it. Or since prettier 3.0 is still unstable, please consider rolling back prettier to 2.x and this package to 1.8.x.

Environment

• Linux
• node v16.16.0
• Prettier 3.0
• Package 1.9.2

[shufo]

Let me know if you solves the problem (or still failed).

[Jeto143]

Hey @shufo,

Thank you for the prompt reply! I just changed my tailwind.config.js file to the one in your comment, but it didn't make any difference.

Have you tried installing the same dependencies I listed above (package.json)? I'm suspecting this may be due to an incompatibility with another package, somehow. Unless it's related to one of the PHP dependencies (composer)... (Ignore this, see below)

[Jeto143]

So here's a minimal reproducible example. One folder containing only the following files:

package.json

{
  "devDependencies": {
    "@shufo/prettier-plugin-blade": "1.9.2",
    "prettier": "3.0.0"
  }
}

.prettierrc.json

{
  "plugins": ["@shufo/prettier-plugin-blade"],
  "overrides": [
    {
      "files": ["*.blade.php"],
      "options": {
        "parser": "blade"
      }
    }
  ]
}

view.blade.php

<div>Hello world</div>

From that folder, run the following:

yarn install

Then run the following:

./node_modules/.bin/prettier --write .

I get the following output:

.prettierrc.json 48ms
package.json 2ms

(Ignoring view.blade.php)

[shufo]

@Jeto143 Thanks for minimal reproduceable code. It helps a lot.

It seems that the behaviour of the prettier file matcher has changed?

2.8.8

./node_modules/.bin/prettier --write .

will matches everything prettier can format.

 $  ./node_modules/.bin/prettier --write .
.prettierrc.json 41ms
package.json 6ms
test.blade.php 484ms
test1.blade.php 42ms
test10.blade.php 26ms

3.0.0

./node_modules/.bin/prettier --write .

will matches everything except "files": ["*.blade.php"]

.prettierrc.json 48ms
package.json 2ms

It might be better to use glob pattern for prettier target explicitly on 3.0.0 for now.

 $  ./node_modules/.bin/prettier -w "**/*.blade.php"

home.blade.php 252ms
subdirectory/test4.blade.php 148ms
test.blade.php 12ms

Or it might be a bug that the this package missing prettier's change in 3.0.0, so I'll look into it.

[Jeto143]

Ah good idea, I could use that flag in the mean time. Can't test right now, but would using **/*.* make it behave like in 2.8.8 (checking/fixing all files that prettier can handle)?

[shufo]

**/*.* seems working like .!

 $  yarn run prettier '**/*.*' -w
yarn run v1.22.19
warning package.json: No license field
$ /home/shuhei/develop/prettier-plugin-blade-test3/node_modules/.bin/prettier '**/*.*' -w
.prettierrc.js 43ms
home.blade.php 121ms
package-lock.json 89ms
package.json 10ms
subdirectory/test4.blade.php 67ms
tailwind.config.js 4ms
test.blade.php 13ms
test.js 9ms
test10.blade.php 12ms

It would be better to use **/*.* for all files matching in 3.0.0.

[Jeto143]

Yes, that's what I've been using and it's working nicely, thanks! I'm just wondering if this is expected behavior (I feel like it would be more logical for prettier to include declared plugins' extensions by default). But if it were the case, it would be likely to be a prettier issue rather than a bug with your plugin (edit: might have found the corresponding issue in their repository, see below).

How about adding a little notice to your README, just in case?

Anyway, feel free to close this issue now. Thank you very much for looking into this!