Fix prettier importOrderSeparation not working

[denik1981]

What does this PR do?

Prettier's configuration file is wrongly composed adding the Tailwind Plugin in a declarative way within the plugin key. Prettier mentions that third-party plugins are automatically loaded if they have been installed in the same node_modules folder and follow the name of @prettier/<plugin> or prettier-plugin-<plugin> (prettier-on-how-to-add-third-party-plugins)

Placing a plugin key within prettierrc.js causes a not expected behavior because despite prettier actually runs, it fails on applying certain rules, being importOrderSeparation one of them. A clear side effect for this is within issue #1791 where a missing space between the first import in all the prisma/zod/* files is causing all of them to differ from HEAD when they are regenerated by prisma (and later formatted by prettier)

Fixes # (1791)

Type of change

• Bug fix (non-breaking change which fixes an issue)

How should this be tested?

• Test A: Fix for issue prisma/zod/* files get all changed after the initial setup #1791

Test A

Check that prisma/zod/* files don't differ from HEAD after regenerating them.

• yarn generate-schemas
• git diff --name-only | grep "prisma/zod" || echo "PASSED"

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code and corrected any misspellings
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[vercel]

@denik1981 is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[denik1981]

I believe this PR is still relevant despite the new turbo addition into the stack, but please put this on pause until I ran a second test with the new structure of the repo.

[zomars]

The problem is that If we remove the plugin declaration, the tailwind classes aren't sorted. You can try yourself locally.

[denik1981]

The problem is actually an incompatibility issue between prettier-plugin-tailwindcss and @trivago/prettier-plugin-sort-imports . Seem both plugins cannot be used together nicely. This issue has been mentioned in both repos.

tailwindlabs/prettier-plugin-tailwindcss#9
tailwindlabs/prettier-plugin-tailwindcss#31
trivago/prettier-plugin-sort-imports#117

Leaving prettierrc as it is will make having the sorted imports plugin useless. I have studied the workaround of the chained parser but I don't think it will work well with the IDE autosave or even with eslint. imho the only way to tackle this right now is to remove one of the two to prevent inconsistencies or work in a fork in the tw repo to make both of these plugins compatible.

[denik1981]

btw, regarding #1791, why it is necessary to vc prisma/zod files if they are fully generated in the post installation step by prisma? Can we gitignore them?

[PeerRich]

tailwindlabs/prettier-plugin-tailwindcss#31 (comment) this seems to at least hotfix it

[zomars]

btw, regarding #1791, why it is necessary to vc prisma/zod files if they are fully generated in the post installation step by prisma. Can we gitignore them?

Fair point @denik1981 we would probably just prettier ignore those files

[denik1981]

Ok, I will try it to see how it works and push it today.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

docs – ./apps/docs

🔍 Inspect: https://vercel.com/cal/docs/5fNu4jpuTenvB1zBZNrsGrLn4566
✅ Preview: https://docs-git-fork-denik1981-fix-prettier-not-responsive-3d2aac-cal.vercel.app

[Deployment for de5416c canceled]

calendso – ./apps/web

🔍 Inspect: https://vercel.com/cal/calendso/qZnBS5dyezQmVkhYNu3fDTcFw6zr
✅ Preview: Canceled

[zomars]

The linter is working "too well" now 🤣 will merge as it is for now and we can fix those error on a followup.

[denik1981]

@zomars Thanks!
I can confirm that the hotfix works well for autosave, linting and formatting.

This (below) is an emulation in an isolated nextjs app with all the Cal settings for prettier and eslint and tests added to it.
https://stackblitz.com/github/denik1981/prettier-tailwind-trivago-hotfix

npm run test:should-fail unformats a random file and then runs the linter
npm run test:should-pass formats a random file and then runs the linter.

The reason I delayed this PR is because the hotfix throw me an error that I was not able to reproduce anymore.
Not sure the reason cause it is trying to parse an MD file but I will post it here just in case appears again.

> yarn  format
yarn run v1.22.17
$ prettier --write "**/*.{ts,tsx,md}"
[error] Invalid configuration file `.github/ISSUE_TEMPLATE/bug_report.md`: Obejct is not defined

[PeerRich]

@zomars Thanks! I can confirm that the hotfix works well for autosave, linting and formatting.

This (below) is an emulation in an isolated nextjs app with all the Cal settings for prettier and eslint and tests added to it. https://stackblitz.com/github/denik1981/prettier-tailwind-trivago-hotfix

npm run test:should-fail unformats a random file and then runs the linter npm run test:should-pass formats a random file and then runs the linter.

The reason I delayed this PR is because the hotfix throw me an error that I was not able to reproduce anymore. Not sure the reason cause it is trying to parse an MD file but I will post it here just in case appears again.

> yarn  format
yarn run v1.22.17
$ prettier --write "**/*.{ts,tsx,md}"
[error] Invalid configuration file `.github/ISSUE_TEMPLATE/bug_report.md`: Obejct is not defined

oh whats the best way moving forward? @zomars

[zomars]

That's odd. I can't seem to replicate locally. Will investigate further.