chore(deps): update dependency eslint-plugin-better-tailwindcss to v4 (#506)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Emrik Östling <[email protected]>

Author: renovate[bot]

bun.lock

@@ -49,7 +49,7 @@ export default tseslint.config(
           printWidth: 100,
         },
       ],
-      "better-tailwindcss/no-unregistered-classes": [
+      "better-tailwindcss/no-unknown-classes": [
         "warn",
         {
           ignore: [

eslint.config.ts

@@ -38,7 +38,7 @@
     "@types/node": "^24.10.1",
     "@typescript-eslint/parser": "^8.46.4",
     "eslint": "^9.39.1",
-    "eslint-plugin-better-tailwindcss": "^3.7.10",
+    "eslint-plugin-better-tailwindcss": "^4.0.0",
     "globals": "^17.0.0",
     "knip": "^5.69.1",
     "npm-run-all2": "^8.0.4",

package.json

@@ -10,7 +10,7 @@ export const chooseConverter = new Elysia().use(userService).post(
         <article
           class={`
             convert_to_popup absolute z-2 m-0 hidden h-[50vh] max-h-[50vh] w-full flex-col
-            overflow-x-hidden overflow-y-auto rounded bg-neutral-800
+            overflow-x-hidden overflow-y-auto rounded-sm bg-neutral-800
             sm:h-[30vh]
           `}
         >
@@ -28,7 +28,7 @@ export const chooseConverter = new Elysia().use(userService).post(
                     // 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
+                      target rounded-sm bg-neutral-700 p-1 text-base
                       hover:bg-neutral-600
                     `}
                     data-value={`${target},${converter}`}

src/pages/chooseConverter.tsx

@@ -67,7 +67,7 @@ export const history = new Elysia().use(userService).get(
               </div>
               <table
                 class={`
-                  w-full table-auto overflow-y-auto rounded bg-neutral-900 text-left
+                  w-full table-auto overflow-y-auto rounded-sm bg-neutral-900 text-left
                   [&_td]:p-4
                   [&_tr]:rounded-sm [&_tr]:border-b [&_tr]:border-neutral-800
                 `}
@@ -76,44 +76,44 @@ export const history = new Elysia().use(userService).get(
                   <tr>
                     <th
                       class={`
-                        px-2 py-2
+                        p-2
                         sm:px-4
                       `}
                     >
                       <input
                         type="checkbox"
                         id="select-all"
-                        class="h-4 w-4 cursor-pointer"
+                        class="size-4 cursor-pointer"
                         title="Select all"
                       />
                     </th>
                     <th
                       class={`
-                        px-2 py-2
+                        p-2
                         sm:px-4
                       `}
                     >
                       <span class="sr-only">Expand details</span>
                     </th>
                     <th
                       class={`
-                        px-2 py-2
+                        p-2
                         sm:px-4
                       `}
                     >
                       Time
                     </th>
                     <th
                       class={`
-                        px-2 py-2
+                        p-2
                         sm:px-4
                       `}
                     >
                       Files
                     </th>
                     <th
                       class={`
-                        px-2 py-2
+                        p-2
                         max-sm:hidden
                         sm:px-4
                       `}
@@ -122,15 +122,15 @@ export const history = new Elysia().use(userService).get(
                     </th>
                     <th
                       class={`
-                        px-2 py-2
+                        p-2
                         sm:px-4
                       `}
                     >
                       Status
                     </th>
                     <th
                       class={`
-                        px-2 py-2
+                        p-2
                         sm:px-4
                       `}
                     >
@@ -145,7 +145,7 @@ export const history = new Elysia().use(userService).get(
                         <td>
                           <input
                             type="checkbox"
-                            class="h-4 w-4 cursor-pointer"
+                            class="size-4 cursor-pointer"
                             data-checkbox-type="job"
                             data-job-id={job.id}
                           />
@@ -158,7 +158,7 @@ export const history = new Elysia().use(userService).get(
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
-                            class="inline-block h-4 w-4"
+                            class="inline-block size-4"
                           >
                             <path
                               stroke-linecap="round"
@@ -209,7 +209,7 @@ export const history = new Elysia().use(userService).get(
                                   xmlns="http://www.w3.org/2000/svg"
                                   viewBox="0 0 20 20"
                                   fill="currentColor"
-                                  class={`mx-2 inline-block h-4 w-4 text-neutral-500`}
+                                  class={`mx-2 inline-block size-4 text-neutral-500`}
                                 >
                                   <path
                                     fill-rule="evenodd"

src/pages/history.tsx

@@ -22,7 +22,7 @@ export const listConverters = new Elysia().use(userService).get(
               <h1 class="mb-4 text-xl">Converters</h1>
               <table
                 class={`
-                  w-full table-auto rounded bg-neutral-900 text-left
+                  w-full table-auto rounded-sm bg-neutral-900 text-left
                   [&_td]:p-4
                   [&_tr]:rounded-sm [&_tr]:border-b [&_tr]:border-neutral-800
                   [&_ul]:list-inside [&_ul]:list-disc

src/pages/listConverters.tsx

@@ -51,15 +51,15 @@ function ResultsArticle({
         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-accent-500 [&::-webkit-progress-value]:rounded-full
-          [&::-webkit-progress-value]:[background:none]
+          [&::-moz-progress-bar]:bg-accent-500
+          [&::-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
+          w-full table-auto rounded-sm bg-neutral-900 text-left
           [&_td]:p-4
           [&_tr]:rounded-sm [&_tr]:border-b [&_tr]:border-neutral-800
         `}
@@ -68,23 +68,23 @@ function ResultsArticle({
           <tr>
             <th
               class={`
-                px-2 py-2
+                p-2
                 sm:px-4
               `}
             >
               Converted File Name
             </th>
             <th
               class={`
-                px-2 py-2
+                p-2
                 sm:px-4
               `}
             >
               Status
             </th>
             <th
               class={`
-                px-2 py-2
+                p-2
                 sm:px-4
               `}
             >