chore: add eslint-plugin-readable-tailwind

2025-10-31 12:03:31 +00:00 · 2024-10-05 01:01:00 +02:00
parent a6b8bcecae
commit 5fb8c3575b
5 changed files with 126 additions and 29 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,11 +1,11 @@
 import { fixupPluginRules } from "@eslint/compat";
-import eslint from '@eslint/js';
+import eslint from "@eslint/js";
 import deprecationPlugin from "eslint-plugin-deprecation";
+import eslintPluginReadableTailwind from "eslint-plugin-readable-tailwind";
 import simpleImportSortPlugin from "eslint-plugin-simple-import-sort";
 import tailwind from "eslint-plugin-tailwindcss";
 import globals from "globals";
-import tseslint from 'typescript-eslint';
-
+import tseslint from "typescript-eslint";

 export default tseslint.config(
  eslint.configs.recommended,
@@ -15,6 +15,7 @@ export default tseslint.config(
    plugins: {
      deprecation: fixupPluginRules(deprecationPlugin),
      "simple-import-sort": simpleImportSortPlugin,
+      "readable-tailwind": eslintPluginReadableTailwind,
    },
    ignores: ["**/node_modules/**"],
    languageOptions: {
@@ -30,8 +31,17 @@ export default tseslint.config(
        ...globals.browser,
      },
    },
-    files: ["**/*.{js,mjs,cjs,tsx}"],
+    files: ["**/*.{js,mjs,cjs,tsx,ts}"],
    rules: {
+      ...eslintPluginReadableTailwind.configs.warning.rules,
+      "tailwindcss/classnames-order": "off",
+      "readable-tailwind/multiline": [
+        "warn",
+        {
+          group: "newLine",
+          printWidth: 100,
+        },
+      ],
      "tailwindcss/no-custom-classname": [
        "warn",
        {
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
    "eslint-plugin-deprecation": "^3.0.0",
    "eslint-plugin-isaacscript": "^4.0.0",
    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-readable-tailwind": "^1.8.1",
    "eslint-plugin-simple-import-sort": "^12.1.1",
    "eslint-plugin-tailwindcss": "^3.17.4",
    "globals": "^15.9.0",
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -5,17 +5,23 @@ export const Header = ({
  let rightNav: JSX.Element;
  if (loggedIn) {
    rightNav = (
-      <ul class="flex gap-4 ">
+      <ul class="flex gap-4">
        <li>
          <a
-            class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
+            class={`
+              text-accent-600 transition-all
+              hover:text-accent-500 hover:underline
+            `}
            href="/history">
            History
          </a>
        </li>
        <li>
          <a
-            class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
+            class={`
+              text-accent-600 transition-all
+              hover:text-accent-500 hover:underline
+            `}
            href="/logoff">
            Logout
          </a>
@@ -27,7 +33,10 @@ export const Header = ({
      <ul class="flex gap-4">
        <li>
          <a
-            class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
+            class={`
+              text-accent-600 transition-all
+              hover:text-accent-500 hover:underline
+            `}
            href="/login">
            Login
          </a>
@@ -35,7 +44,10 @@ export const Header = ({
        {accountRegistration ? (
          <li>
            <a
-              class="text-accent-600 transition-all hover:text-accent-500 hover:underline"
+              class={`
+                text-accent-600 transition-all
+                hover:text-accent-500 hover:underline
+              `}
              href="/register">
              Register
            </a>
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -174,7 +174,10 @@ const app = new Elysia({
            <footer class="p-4">
              Report any issues on{" "}
              <a
-                class="text-accent-500 underline hover:text-accent-400"
+                class={`
+                  text-accent-500 underline
+                  hover:text-accent-400
+                `}
                href="https://github.com/C4illin/ConvertX"
              >
                GitHub
@@ -530,12 +533,21 @@ const app = new Elysia({
              <div class="mb-4 max-h-[50vh] overflow-y-auto scrollbar-thin">
                <table
                  id="file-list"
-                  class="w-full table-auto rounded bg-neutral-900 [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800"
+                  class={`
+                    w-full table-auto rounded bg-neutral-900
+                    [&_td]:p-4
+                    [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
+                  `}
                />
              </div>
              <div
                id="dropzone"
-                class="relative flex h-48 w-full items-center justify-center rounded border border-dashed border-neutral-700 transition-all hover:border-neutral-600 [&.dragover]:border-4 [&.dragover]:border-neutral-500"
+                class={`
+                  relative flex h-48 w-full items-center justify-center rounded border border-dashed
+                  border-neutral-700 transition-all
+                  [&.dragover]:border-4 [&.dragover]:border-neutral-500
+                  hover:border-neutral-600
+                `}
              >
                <span>
                  <b>Choose a file</b> or drag it here
@@ -563,11 +575,17 @@ const app = new Elysia({
                  class="w-full rounded bg-neutral-800 p-4"
                />
                <div class="select_container relative">
-                  <article class="convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]">
+                  <article class={`
+                    convert_to_popup absolute z-[2] m-0 hidden h-[30vh] max-h-[50vh] w-full flex-col
+                    overflow-y-auto overflow-x-hidden rounded bg-neutral-800
+                    sm:h-[30vh]
+                  `}>
                    {Object.entries(getAllTargets()).map(
                      ([converter, targets]) => (
                        <article
-                          class="convert_to_group flex w-full flex-col border-b border-neutral-700 p-4"
+                          class={`
+                            convert_to_group flex w-full flex-col border-b border-neutral-700 p-4
+                          `}
                          data-converter={converter}
                        >
                          <header class="mb-2 w-full text-xl font-bold" safe>
@@ -578,7 +596,10 @@ const app = new Elysia({
                              <button
                                // https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
                                tabindex={0}
-                                class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
+                                class={`
+                                  target rounded bg-neutral-700 p-1 text-base
+                                  hover:bg-neutral-600
+                                `}
                                data-value={`${target},${converter}`}
                                data-target={target}
                                data-converter={converter}
@@ -631,7 +652,11 @@ const app = new Elysia({
    ({ body }) => {
      return (
        <>
-          <article class="convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col overflow-y-auto overflow-x-hidden rounded bg-neutral-800 sm:h-[30vh]">
+          <article class={`
+            convert_to_popup absolute z-[2] m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col
+            overflow-y-auto overflow-x-hidden rounded bg-neutral-800
+            sm:h-[30vh]
+          `}>
            {Object.entries(getPossibleTargets(body.fileType)).map(
              ([converter, targets]) => (
                <article
@@ -646,7 +671,10 @@ const app = new Elysia({
                      <button
                        // https://stackoverflow.com/questions/121499/when-a-blur-event-occurs-how-can-i-find-out-which-element-focus-went-to#comment82388679_33325953
                        tabindex={0}
-                        class="target rounded bg-neutral-700 p-1 text-base hover:bg-neutral-600"
+                        class={`
+                          target rounded bg-neutral-700 p-1 text-base
+                          hover:bg-neutral-600
+                        `}
                        data-value={`${target},${converter}`}
                        data-target={target}
                        data-converter={converter}
@@ -895,7 +923,11 @@ const app = new Elysia({
          <main class="w-full px-4">
            <article class="article">
              <h1 class="mb-4 text-xl">Results</h1>
-              <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
+              <table class={`
+                w-full table-auto rounded bg-neutral-900 text-left
+                [&_td]:p-4
+                [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
+              `}>
                <thead>
                  <tr>
                    <th class="px-4 py-2">Time</th>
@@ -914,7 +946,10 @@ const app = new Elysia({
                      <td safe>{job.status}</td>
                      <td>
                        <a
-                          class="text-accent-500 underline hover:text-accent-400"
+                          class={`
+                            text-accent-500 underline
+                            hover:text-accent-400
+                          `}
                          href={`/results/${job.id}`}
                        >
                          View
@@ -992,9 +1027,20 @@ const app = new Elysia({
                <progress
                  max={job.num_files}
                  value={files.length}
-                  class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
+                  class={`
+                    mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full
+                    border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500
+                    [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full
+                    [&::-webkit-progress-value]:[background:none]
+                    [&[value]::-webkit-progress-value]:bg-accent-500
+                    [&[value]::-webkit-progress-value]:transition-[inline-size]
+                  `}
                />
-                <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
+                <table class={`
+                  w-full table-auto rounded bg-neutral-900 text-left
+                  [&_td]:p-4
+                  [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
+                `}>
                  <thead>
                    <tr>
                      <th class="px-4 py-2">Converted File Name</th>
@@ -1010,7 +1056,10 @@ const app = new Elysia({
                        <td safe>{file.status}</td>
                        <td>
                          <a
-                            class="text-accent-500 underline hover:text-accent-400"
+                            class={`
+                              text-accent-500 underline
+                              hover:text-accent-400
+                            `}
                            href={`/download/${outputPath}${file.output_file_name}`}
                          >
                            View
@@ -1018,7 +1067,10 @@ const app = new Elysia({
                        </td>
                        <td>
                          <a
-                            class="text-accent-500 underline hover:text-accent-400"
+                            class={`
+                              text-accent-500 underline
+                              hover:text-accent-400
+                            `}
                            href={`/download/${outputPath}${file.output_file_name}`}
                            download={file.output_file_name}
                          >
@@ -1095,9 +1147,20 @@ const app = new Elysia({
          <progress
            max={job.num_files}
            value={files.length}
-            class="mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"
+            class={`
+              mb-4 inline-block h-2 w-full appearance-none overflow-hidden rounded-full border-0
+              bg-neutral-700 bg-none text-accent-500 accent-accent-500
+              [&::-moz-progress-bar]:bg-neutral-700 [&::-webkit-progress-value]:rounded-full
+              [&::-webkit-progress-value]:[background:none]
+              [&[value]::-webkit-progress-value]:bg-accent-500
+              [&[value]::-webkit-progress-value]:transition-[inline-size]
+            `}
          />
-          <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800">
+          <table class={`
+            w-full table-auto rounded bg-neutral-900 text-left
+            [&_td]:p-4
+            [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
+          `}>
            <thead>
              <tr>
                <th class="px-4 py-2">Converted File Name</th>
@@ -1113,7 +1176,10 @@ const app = new Elysia({
                  <td safe>{file.status}</td>
                  <td>
                    <a
-                      class="text-accent-500 underline hover:text-accent-400"
+                      class={`
+                        text-accent-500 underline
+                        hover:text-accent-400
+                      `}
                      href={`/download/${outputPath}${file.output_file_name}`}
                    >
                      View
@@ -1121,7 +1187,10 @@ const app = new Elysia({
                  </td>
                  <td>
                    <a
-                      class="text-accent-500 underline hover:text-accent-400"
+                      class={`
+                        text-accent-500 underline
+                        hover:text-accent-400
+                      `}
                      href={`/download/${outputPath}${file.output_file_name}`}
                      download={file.output_file_name}
                    >
@@ -1181,7 +1250,12 @@ const app = new Elysia({
          <main class="w-full px-4">
            <article class="article">
              <h1 class="mb-4 text-xl">Converters</h1>
-              <table class="w-full table-auto rounded bg-neutral-900 text-left [&_td]:p-4 [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800 [&_ul]:list-inside [&_ul]:list-disc">
+              <table class={`
+                w-full table-auto rounded bg-neutral-900 text-left
+                [&_td]:p-4
+                [&_tr]:rounded [&_tr]:border-b [&_tr]:border-neutral-800
+                [&_ul]:list-inside [&_ul]:list-disc
+              `}>
                <thead>
                  <tr>
                    <th class="mx-4 my-2">Converter</th>