From b375b513ca4004994a5390d481f0b37624d8a0e8 Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Tue, 10 Oct 2023 15:46:06 +0200
Subject: [PATCH] feat: Add Prettier plugin for TailwindCSS

The plugin auto-sorts the used classes.
---
 .pre-commit-config.yaml    |  4 ++
 frontend/.prettierrc.js    |  8 ++++
 frontend/package-lock.json | 89 ++++++++++++++++++++++++++++++++++++++
 frontend/package.json      |  2 +
 4 files changed, 103 insertions(+)
 create mode 100644 frontend/.prettierrc.js

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index f8929f6065..29dc6a6e9e 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -72,6 +72,10 @@ repos:
     hooks:
       - id: prettier
         types_or: [ts, css, html, markdown]
+        files: "^frontend"
+        additional_dependencies:
+          - "prettier@^3.0.3"
+          - "prettier-plugin-tailwindcss@^0.5.5"
   - repo: https://github.com/Lucas-C/pre-commit-hooks
     rev: v1.4.2
     hooks:
diff --git a/frontend/.prettierrc.js b/frontend/.prettierrc.js
new file mode 100644
index 0000000000..eae506ad8a
--- /dev/null
+++ b/frontend/.prettierrc.js
@@ -0,0 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
+ * SPDX-License-Identifier: CC0-1.0
+ */
+
+module.exports = {
+  plugins: [require.resolve("prettier-plugin-tailwindcss")],
+};
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d7a0fe264b..73c89cd4d8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -66,6 +66,8 @@
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "^2.1.0",
         "postcss": "^8.4.31",
+        "prettier": "^3.0.3",
+        "prettier-plugin-tailwindcss": "^0.5.5",
         "tailwindcss": "^3.3.3",
         "typescript": "^5.1.6",
         "webpack": "^5.88.2"
@@ -17962,6 +17964,93 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
+      "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.5.tgz",
+      "integrity": "sha512-voy0CjWv/CM8yeaduv5ZwovovpTGMR5LbzlhGF+LtEvMJt9wBeVTVnW781hL38R/RcDXCJwN2rolsgr94B/n0Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@shufo/prettier-plugin-blade": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@shufo/prettier-plugin-blade": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 31627512e0..dc4f217db8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -71,6 +71,8 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "postcss": "^8.4.31",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.5",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6",
     "webpack": "^5.88.2"