Add rustywind to sort tailwindcss classes (#4336)

- helps sort Tailwind CSS classes consistently and can help to
de-duplicate them
- added as pre-commit hook
- If there is a merge conflict in your pr run `make fmt` first

https://github.com/avencera/rustywind

.pre-commit-config.yaml

@@ -19,7 +19,8 @@ repos:
         args: ["--frozen", "--group", "dev", "-o", "requirements/dev.txt"]
       - id: uv-export
         name: uv-export requirements/docs.txt
-        args: ["--frozen", "--only-group", "docs", "-o", "requirements/docs.txt"]
+        args:
+          ["--frozen", "--only-group", "docs", "-o", "requirements/docs.txt"]
 
       # This is disabled because this doesn't export --find-links. The requirements-translate is maintained manually.
       # - id: uv-export
@@ -48,10 +49,21 @@ repos:
       - id: djhtml
         files: .*/templates/.*\.html$
 
+  - repo: local
+    hooks:
+      - id: rustywind
+        name: rustywind Tailwind CSS class linter
+        language: node
+        additional_dependencies:
+          - rustywind@latest
+        entry: rustywind
+        args: [--write]
+        types_or: [html]
+
   - repo: https://github.com/biomejs/pre-commit
     rev: "v0.6.1"
     hooks:
-    -   id: biome-check
+      - id: biome-check
         additional_dependencies: ["@biomejs/biome@1.9.4"]
 
   - repo: https://github.com/awebdeveloper/pre-commit-stylelint

hypha/apply/activity/templates/activity/include/comment_form.html

@@ -1,6 +1,6 @@
 {% load i18n static %}
 
-<div class="wrapper wrapper--comments pb-4">
+<div class="pb-4 wrapper wrapper--comments">
     <form
         class="form form__comments"
         method="post"
@@ -15,12 +15,12 @@
         {% endfor %}
 
         <div class="flex flex-wrap gap-4 lg:flex-nowrap lg:gap-8">
-            <div class="w-full lg:flex-1 -mt-4 max-w-[53rem]">
+            <div class="-mt-4 w-full lg:flex-1 max-w-[53rem]">
                 {% include "forms/includes/field.html" with field=comment_form.message label_classes="sr-only" %}
 
                 <div class="text-right">
                     <button
-                        class="button button--primary w-full lg:w-auto"
+                        class="w-full lg:w-auto button button--primary"
                         id="{{ comment_form.name }}-submit"
                         name="{{ form_prefix }}{{ comment_form.name }}"
                         type="submit"

hypha/apply/activity/templates/activity/include/comment_list.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 
 <div class="border-b-2 border-b-slate-300">
-    <section class="max-w-3xl ml-4 md:ml-20">
+    <section class="ml-4 max-w-3xl md:ml-20">
 
         <div class="timeline">
             {% for activity in comments %}
@@ -15,7 +15,7 @@
             {% if page.has_next %}
                 <a
                     href="{{ request.path }}?page={{ page.next_page_number }}"
-                    class="block text-sm text-slate-500 hover:text-slate-700 py-2"
+                    class="block py-2 text-sm text-slate-500 hover:text-slate-700"
                     hx-get="{{ request.path }}?page={{ page.next_page_number }}"
                     hx-trigger="intersect"
                     hx-target="this"

hypha/apply/activity/templates/activity/notifications.html

@@ -42,7 +42,7 @@ <h1 class="gamma heading heading--no-margin heading--bold">{% trans "Notificatio
                                     <a href="{{ activity.source.get_absolute_url }}#communications">
                                         {{ activity.source.title|capfirst }}</a>
                                     : {{ activity.user.get_full_name }} {% trans "made a comment" %}
-                                    <relative-time class="text-fg-muted text-sm" datetime={{ activity.timestamp|date:"c" }}>
+                                    <relative-time class="text-sm text-fg-muted" datetime={{ activity.timestamp|date:"c" }}>
                                         {{ activity.timestamp|date:"SHORT_DATETIME_FORMAT" }}
                                     </relative-time>
                                 </p>
@@ -66,11 +66,11 @@ <h1 class="gamma heading heading--no-margin heading--bold">{% trans "Notificatio
                             <div class="js-feed-meta">
                                 <p class="feed__meta-item">
                                     <a href="{{ activity.source.get_absolute_url }}">{{ activity.source.title|capfirst }}</a>
-                                    : {{ activity.user.get_full_name }} {{ activity|display_for:request.user }} <relative-time class="text-fg-muted text-sm" datetime={{ activity.timestamp|date:"c" }}>{{ activity.timestamp|date:"SHORT_DATETIME_FORMAT" }}</relative-time>
+                                    : {{ activity.user.get_full_name }} {{ activity|display_for:request.user }} <relative-time class="text-sm text-fg-muted" datetime={{ activity.timestamp|date:"c" }}>{{ activity.timestamp|date:"SHORT_DATETIME_FORMAT" }}</relative-time>
                                 </p>
                                 {% if activity.related_object %}
                                     <p>
-                                        <a href="{{ activity.related_object.get_absolute_url }}" class="uppercase font-bold hover:opacity-70 transition-opacity">
+                                        <a href="{{ activity.related_object.get_absolute_url }}" class="font-bold uppercase transition-opacity hover:opacity-70">
                                             <span>{% trans "View" %} {{ activity.related_object|model_verbose_name }}</span>
                                             {% heroicon_outline "arrow-right" size=12 class="inline align-baseline" stroke_width=4 %}
                                         </a>

hypha/apply/activity/templates/activity/partial_comment_message.html

@@ -1,24 +1,24 @@
 {% load heroicons activity_tags nh3_tags markdown_tags submission_tags apply_tags users_tags %}
 
-<div class="prose max-w-none">
+<div class="max-w-none prose">
     {{ activity|display_for:request.user|submission_links|markdown|nh3 }}
 </div>
 
 {% if activity.edited %}
-    <span class="text-fg-muted text-sm" data-tippy-content="{{ activity.edited|date:"SHORT_DATETIME_FORMAT" }}">(edited)</span>
+    <span class="text-sm text-fg-muted" data-tippy-content="{{ activity.edited|date:"SHORT_DATETIME_FORMAT" }}">(edited)</span>
 {% endif %}
 
 {% with activity.attachments.all as attachments %}
     {% if attachments %}
-        <div class="flex flex-wrap gap-2 min-w-40 max-w-xl mt-4 pb-2">
+        <div class="flex flex-wrap gap-2 pb-2 mt-4 max-w-xl min-w-40">
             {% for attachment in attachments %}
                 <a href="{{attachment.get_absolute_url }}"
-                   class="inline-flex items-center border rounded px-3 py-2 font-medium bg-slate-50 hover:bg-slate-200 transition-colors"
+                   class="inline-flex items-center py-2 px-3 font-medium rounded border transition-colors bg-slate-50 hover:bg-slate-200"
                    target="_blank"
                    rel="noopener noreferrer"
                    title="{{ attachment.filename }}"
                 >
-                    <span class="truncate text-sm">
+                    <span class="text-sm truncate">
                         {% heroicon_mini "paper-clip" class="inline align-text-bottom" aria_hidden=true %}
                         {{ attachment.filename|truncatechars_middle:45 }}
                     </span>

hypha/apply/activity/templates/activity/ui/activity-action-item.html

@@ -1,13 +1,13 @@
 {% load i18n activity_tags heroicons %}
 
 {% with activity|display_for:request.user as activity_text %}
-    <div class="timeline-item relative" id="communications#{{ activity.id }}">
+    <div class="relative timeline-item" id="communications#{{ activity.id }}">
         <div
-            class="flex py-2 -ml-3  items-center before:block before:-z-10 before:absolute before:top-0 before:bottom-0 before:left-0 before:w-0.5 before:bg-slate-300"
+            class="flex items-center py-2 -ml-3 before:block before:-z-10 before:absolute before:top-0 before:bottom-0 before:left-0 before:w-0.5 before:bg-slate-300"
         >
-            <div class="relative inline-flex justify-center me-2 items-start">
+            <div class="inline-flex relative justify-center items-start me-2">
                 <div class="relative rounded-full inline-flex items-center justify-center border-white border-2 -ms-0.5 {% if activity.user.is_staff %}bg-slate-200 {% else %}bg-gray-200{% endif %}">
-                    <div class="inline-flex items-center justify-center w-6 h-6 text-fg-muted">
+                    <div class="inline-flex justify-center items-center w-6 h-6 text-fg-muted">
                         {% if 'edit' in activity_text.lower %}
                             {% heroicon_micro "pencil-square" class="inline" aria_hidden=true size=14 %}
                         {% elif 'progressed' in activity_text.lower %}
@@ -40,7 +40,7 @@
                 {% if not submission_title and activity|user_can_see_related:request.user %}
                     {% with url=activity.related_object.get_absolute_url %}
                         {% if url %}
-                            <a href="{{ url }}" class="ms-2 hover:opacity-70 transition-opacity font-semibold">
+                            <a href="{{ url }}" class="font-semibold transition-opacity hover:opacity-70 ms-2">
                                 {% trans "View" %}
                             </a>
                         {% endif %}

hypha/apply/activity/templates/activity/ui/activity-comment-item.html

@@ -1,13 +1,13 @@
 {% load i18n activity_tags nh3_tags markdown_tags submission_tags apply_tags heroicons users_tags %}
 
-<article class="timeline-item relative">
+<article class="relative timeline-item">
     <div
-        class="flex py-3 -ms-8 md:-ms-20 before:block before:-z-10 before:absolute before:top-0 before:bottom-0 before:left-0 before:w-0.5 before:bg-slate-300"
+        class="flex py-3 -ms-8 before:block before:-z-10 before:absolute before:top-0 before:bottom-0 before:left-0 before:w-0.5 before:bg-slate-300 md:-ms-20"
     >
         {% with activity|display_activity_author:request.user as author_name %}
-            <div class="relative inline-flex justify-center me-4 items-start">
+            <div class="inline-flex relative justify-center items-start me-4">
                 <div class="relative rounded-full inline-flex items-center justify-center border-white border-2 -ms-0.5 {% if activity.user.is_staff %}bg-slate-200 {% else %}bg-gray-100{% endif %}">
-                    <div class="md:block hidden p-2">
+                    <div class="hidden p-2 md:block">
                         {% user_image author_name size=25 %}
                     </div>
                 </div>
@@ -24,7 +24,7 @@
                                 <span>
                                     {% for role in activity.user.get_role_names  %}
                                         <span
-                                            class="text-fg-muted font-semibold inline-block px-2 py-0.5 text-sm border border-gray-300 rounded-xl"
+                                            class="inline-block py-0.5 px-2 text-sm font-semibold rounded-xl border border-gray-300 text-fg-muted"
                                             data-tippy-content="This user is a {{ role }}"
                                         >
                                             {{ role }}
@@ -44,12 +44,12 @@
 
 
                     </div>
-                    <div class="flex items-center gap-1">
+                    <div class="flex gap-1 items-center">
                         {% if not request.user.is_applicant %}
 
                             {% if request.user.is_apply_staff and activity.assigned_to %}
 
-                                <span class="flex items-center gap-1 text-fg-muted text-xs border rounded-xl border-gray-300 py-0.5 px-1.5">
+                                <span class="flex gap-1 items-center py-0.5 px-1.5 text-xs rounded-xl border border-gray-300 text-fg-muted">
                                     {% heroicon_outline "user-plus" size=14 class="inline" aria_hidden=true %}
                                     {% if activity.assigned_to.id == request.user.id %}
                                         {% trans "Assigned to you" %}
@@ -60,7 +60,7 @@
                             {% endif %}
 
                             {% with activity.visibility|visibility_display:request.user as visibility_text  %}
-                                <span class="text-fg-muted text-xs flex items-center gap-1 uppercase border rounded-xl border-gray-300 py-0.5 px-1.5"
+                                <span class="flex gap-1 items-center py-0.5 px-1.5 text-xs uppercase rounded-xl border border-gray-300 text-fg-muted"
                                       data-tippy-content="This is visible to {{ visibility_text }}">
                                     {% heroicon_outline "eye" size=14 class="inline" aria_hidden=true %}
                                     {{ visibility_text }}
@@ -74,7 +74,7 @@
                                 hx-get="{% url 'activity:edit-comment' activity.id %}"
                                 hx-target="#text-comment-{{activity.id}}"
                                 title="Edit Comment"
-                                class="inline-flex items-center p-0.5 hover:bg-fuchsia-200 hover:opacity-100 opacity-80 transition-all rounded-md"
+                                class="inline-flex items-center p-0.5 rounded-md opacity-80 transition-all hover:bg-fuchsia-200 hover:opacity-100"
                             >
                                 {% heroicon_micro "pencil-square" size=18 class="inline" aria_hidden=true %}
                                 <span class="sr-only">{% trans "Edit" %}</span>
@@ -97,7 +97,7 @@
                             {% with url=activity.related_object.get_absolute_url %}
                                 {% if url %}
                                     <a href="{{ url }}">
-                                        {% trans "View " %}{{ activity.related_object|model_verbose_name }} <svg class="icon inline"><use xlink:href="#arrow-head-pixels--solid"></use></svg>
+                                        {% trans "View " %}{{ activity.related_object|model_verbose_name }} <svg class="inline icon"><use xlink:href="#arrow-head-pixels--solid"></use></svg>
                                     </a>
                                 {% endif %}
                             {% endwith %}

hypha/apply/activity/templates/activity/ui/edit_comment_form.html

@@ -14,11 +14,11 @@
 
         <textarea
             id="wmd-input-edit-comment-{{ activity.id }}"
-            class="wmd-input w-full not-prose"
+            class="w-full wmd-input not-prose"
             rows="10" name="message"
         >{{ activity.message }}</textarea>
 
-        <div id="wmd-preview-edit-comment-{{ activity.id }}" class="w-full bg-gray-100 p-4 prose max-w-none shadow-sm"></div>
+        <div id="wmd-preview-edit-comment-{{ activity.id }}" class="p-4 w-full max-w-none bg-gray-100 shadow-sm prose"></div>
     </div>
 
     <div class="flex gap-2">