Fix prettier importOrderSeparation not working (#1796)

* Fix prettier importOrderSeparation not working

* Solves prettier plugin conflict

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: zomars <zomars@me.com>

.prettierrc.js

@@ -9,5 +9,5 @@ module.exports = {
   arrowParens: "always",
   importOrder: ["^@ee/(.*)$", "^@lib/(.*)$", "^@components/(.*)$", "^@(server|trpc)/(.*)$", "^[./]"],
   importOrderSeparation: true,
-  plugins: [require("prettier-plugin-tailwindcss")],
+  plugins: [require("./merged-prettier-plugin")],
 };

merged-prettier-plugin.js

@@ -0,0 +1,21 @@
+/* @see https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/31#issuecomment-1024722576 */
+const tailwind = require("prettier-plugin-tailwindcss");
+const sortImports = require("@trivago/prettier-plugin-sort-imports");
+
+const combinedFormatter = {
+  ...tailwind,
+  parsers: {
+    ...tailwind.parsers,
+    ...Object.keys(sortImports.parsers).reduce((acc, key) => {
+      acc[key] = {
+        ...tailwind.parsers[key],
+        preprocess(code, options) {
+          return sortImports.parsers[key].preprocess(code, options);
+        },
+      };
+      return acc;
+    }, {}),
+  },
+};
+
+module.exports = combinedFormatter;