Prettier plugin just broke a lot of functionality on VUE code

[autotel]

Last weekend, prettier decided to break all the html closing brackets to a new line, and remove the spaces between some of the html tags

<Suspense>
    <template #fallback>

Became

<Suspense
    > <template #fallback>

on several of our files

Having the template on the same line as the closing bracket of the tag made a difference for Vite compiler, not sure why.

This was our prettyfier action script:

name: Prettier Code Formatter

on: [push]

jobs:
  prettier:
    runs-on: ubuntu-latest

    steps:
        - name: Checkout
          uses: actions/checkout@v3
          with:
            ref: ${{ github.head_ref }}

        # Because of bug https://github.com/creyD/prettier_action/issues/111
        - name: Install Plugins manually
          run: npm i prettier-plugin-tailwindcss

        - name: Prettify code
          uses: creyD/[email protected]
          with:
            prettier_options: --write ./resources/**/*.{ts,vue}
            prettier_plugins: "prettier-plugin-tailwindcss"

[adamwathan]

Which release of this plugin broke this for you? The last release of this plugin was on January 23:

[autotel]

I sort of assume that it's the latest; since the action is installing the plugin each time without specifying version.. I don't know if this assumption is accurate.

[autotel]

Just to get more info, I modified the github action by removing the prettier-plugin-tailwind, and I can confirm that prettification works as intended, but of course, without sorting classes and the other things scoped by this plugin.

I think there might be a new incompatibility in the intersection of prettier's latest version, vue and this plugin.

I can't outrule that there is some odd particularity to the repository I am trying to use this for. This repository is a monorepo.

[Nikita0x]

@adamwathan I confirm, there is a problem with the plugin.... I spent so much time reading helix's docs, thinking it was their issue, but then accidentally removed "plugins": ["prettier-plugin-tailwindcss"] from our .prettierrc (it was of 0.6.9 version) to check - and it started formatting correctly. The same issue was in nvim as well. In VsCode it works correctly all the times, though.

0.6.11 (latest) https://github.com/user-attachments/assets/b5478057-2da0-4968-87e7-55e03cfc9120

0.6.10 https://github.com/user-attachments/assets/268127f2-a5f2-4dc3-afce-33b98d888aa1

0.6.9 https://github.com/user-attachments/assets/5542e8f6-6f5e-47c6-8bab-c8f906e3dd72

0.6.7 (helix) - this version completely disabled whole prettier, no formatting at all https://github.com/user-attachments/assets/7bf66c11-11e8-448f-a714-b7203554ab90

0.6.7 (nvim) https://github.com/user-attachments/assets/f7952049-d72a-40a6-ac0f-2694edf26bb9

0.6.6 0.6.5 0.6.0

Did not check further...

[thecrypticace]

I am unable to reproduce any of the aforementioned issues across versions of Prettier, with or without our plugin, nor across versions of our plugin.

Our plugin delegates all parsing and printing to Prettier. My guess is there's something that when our plugin encounters it and re-sorts classes and saves the changes back to the AST it triggers Prettier itself to mess up the whitespace in the file. Unfortunately this is highly dependent on the content of the file so trying to "guess" what the code causes the problem is impossible.

For example in #393 there's a similar bug regarding messed up formatting in CSS (in this case caused by a currently unreleased change) and the cause of this is very subtle.

I'm gonna close this but if either of you can provide a reproduction repository I'll take another look.