Run Tailwind update tool and migrate to tailwindcss/vite

Tailwind's `safelist` config is not (yet?) supported in 4.0 so the
classes are now referenced from the source code.

html-report/package.json

@@ -18,8 +18,8 @@
   },
   "devDependencies": {
     "@eslint/js": "9.18.0",
+    "@tailwindcss/vite": "4.0.0",
     "@vitejs/plugin-vue": "5.2.1",
-    "autoprefixer": "10.4.20",
     "eslint": "9.18.0",
     "eslint-config-prettier": "10.0.1",
     "eslint-plugin-vue": "9.32.0",

html-report/src/components/common/TestResultStatus.ts

@@ -1,14 +1,45 @@
-const testResultStatusColor = (status: string) => {
+export const testResultStatusForegroundColorClass = (status: string) => {
   switch (status) {
     case "SUCCESSFUL":
-      return "green";
+      return "text-green-600";
     case "ABORTED":
-      return "yellow";
+      return "text-yellow-600";
     case "SKIPPED":
-      return "sky";
+      return "text-sky-600";
     default:
-      return "red";
+      return "text-red-600";
   }
 };
 
-export default testResultStatusColor;
+export const testResultStatusBackgroundColorClasses = (status: string) => {
+  switch (status) {
+    case "SUCCESSFUL":
+      return [
+        "border-green-600",
+        "bg-green-500",
+        "dark:border-green-500",
+        "dark:bg-green-600",
+      ];
+    case "ABORTED":
+      return [
+        "border-yellow-600",
+        "bg-yellow-500",
+        "dark:border-yellow-500",
+        "dark:bg-yellow-600",
+      ];
+    case "SKIPPED":
+      return [
+        "border-sky-600",
+        "bg-sky-500",
+        "dark:border-sky-500",
+        "dark:bg-sky-600",
+      ];
+    default:
+      return [
+        "border-red-600",
+        "bg-red-500",
+        "dark:border-red-500",
+        "dark:bg-red-600",
+      ];
+  }
+};

html-report/src/components/common/TestResultStatusIcon.vue

@@ -5,7 +5,7 @@ import {
   SquareArrowOutUpRight,
   SquareSlash,
 } from "lucide-vue-next";
-import testResultStatusColor from "./TestResultStatus.ts";
+import { testResultStatusForegroundColorClass } from "./TestResultStatus.ts";
 import { defaultIconProps } from "./icon.ts";
 
 const props = withDefaults(
@@ -21,9 +21,7 @@ const props = withDefaults(
 function commonClasses(status: string) {
   return [
     "self-center",
-    ...(props.color
-      ? [props.color]
-      : [`text-${testResultStatusColor(status)}-600`]),
+    props.color ? props.color : testResultStatusForegroundColorClass(status),
   ];
 }
 </script>

html-report/src/components/details/CodeBlock.vue

@@ -15,7 +15,7 @@ const { isScrolling } = useScroll(el, { idle: 2000 });
 
 <template>
   <div
-    class="z-0 relative rounded bg-neutral-50 dark:bg-neutral-900 border-neutral-200 dark:border-neutral-700 border mb-2"
+    class="z-0 relative rounded-sm bg-neutral-50 dark:bg-neutral-900 border-neutral-200 dark:border-neutral-700 border mb-2"
   >
     <pre
       ref="el"

html-report/src/components/details/DetailsHeader.vue

@@ -4,7 +4,7 @@ defineProps<{ title: string }>();
 
 <template>
   <div
-    class="z-10 sticky top-0 left-0 overflow-x-auto bg-neutral-100/50 dark:bg-neutral-800/50 backdrop-blur px-4 py-2.5"
+    class="z-10 sticky top-0 left-0 overflow-x-auto bg-neutral-100/50 dark:bg-neutral-800/50 backdrop-blur-sm px-4 py-2.5"
   >
     <slot name="above" />
     <h2 class="text-2xl font-bold" role="heading" :aria-label="title">

html-report/src/components/details/RenderedBlock.vue

@@ -57,7 +57,7 @@ const showImage = inject(imageHandler, () => {
     <li
       v-for="label in block.content as string[]"
       :key="label"
-      class="inline-block rounded bg-neutral-200 dark:bg-neutral-700 mr-2 mb-1 px-2 py-0.5"
+      class="inline-block rounded-sm bg-neutral-200 dark:bg-neutral-700 mr-2 mb-1 px-2 py-0.5"
     >
       {{ label }}
     </li>

html-report/src/components/details/TestNodeDetails.vue

@@ -3,7 +3,7 @@ import { computed } from "vue";
 import TestResultStatusIcon from "../common/TestResultStatusIcon.vue";
 import { ChevronRight } from "lucide-vue-next";
 import TestExecution from "../common/TestExecution.ts";
-import testResultStatusColor from "../common/TestResultStatus.ts";
+import { testResultStatusBackgroundColorClasses } from "../common/TestResultStatus.ts";
 import DurationLabel from "./DurationLabel.vue";
 import DetailsSections from "./DetailsSections.vue";
 import DetailsHeader from "./DetailsHeader.vue";
@@ -14,7 +14,6 @@ import { defaultIconProps } from "../common/icon.ts";
 
 const selection = defineModel<Selection | undefined>("selection");
 const props = defineProps<{ node: TestNodeData; execution: TestExecution }>();
-const color = computed(() => testResultStatusColor(props.node.status));
 
 function selectNode(node: TestNodeData | TestExecution) {
   selection.value = new Selection(props.execution, node);
@@ -51,12 +50,7 @@ const parents = computed(() => props.execution.parents(props.node));
       <div class="mt-3">
         <div
           class="inline-flex mb-2 border-2 rounded-full px-2 py-1 mr-2"
-          :class="[
-            `border-${color}-600`,
-            `bg-${color}-500`,
-            `dark:border-${color}-500`,
-            `dark:bg-${color}-600`,
-          ]"
+          :class="testResultStatusBackgroundColorClasses(node.status)"
         >
           <TestResultStatusIcon :status="node.status" color="text-white" />
           <span

html-report/src/components/header/StatusBar.vue

@@ -1,24 +1,18 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import TestExecution from "../common/TestExecution.ts";
-import testResultStatusColor from "../common/TestResultStatus.ts";
+import { testResultStatusBackgroundColorClasses } from "../common/TestResultStatus.ts";
 import ExecutionSummary from "./ExecutionSummary.vue";
 import DarkModeSwitch from "./DarkModeSwitch.vue";
 
 const { executions } = defineProps<{ executions: TestExecution[] }>();
 const overallStatus = computed(() => TestExecution.overallStatus(executions));
-const color = computed(() => testResultStatusColor(overallStatus.value));
 </script>
 
 <template>
   <div
     class="flex flex-row h-10 p-2 border-b-2 text-white z-50"
-    :class="[
-      `border-${color}-600`,
-      `bg-${color}-500`,
-      `dark:border-${color}-500`,
-      `dark:bg-${color}-600`,
-    ]"
+    :class="testResultStatusBackgroundColorClasses(overallStatus)"
   >
     <ExecutionSummary :executions="executions" class="grow" />
     <DarkModeSwitch />

html-report/src/components/sidebar/ToolBarIcon.vue

@@ -4,7 +4,7 @@ defineProps<{ selected?: boolean }>();
 
 <template>
   <div
-    class="cursor-pointer self-center rounded p-1 mx-0.5"
+    class="cursor-pointer self-center rounded-sm p-1 mx-0.5"
     :class="{
       'bg-neutral-300 dark:bg-neutral-600': selected,
       'hover:bg-neutral-200 dark:hover:bg-neutral-700': !selected,

html-report/src/components/sidebar/TreeNode.vue

@@ -31,6 +31,9 @@ function selectAndExpandNode() {
     record.collapsed = false;
   }
 }
+if (defaultIconProps.size != 16) {
+  throw new Error("Adjust ml-[16px] CSS class below!");
+}
 </script>
 
 <template>
@@ -50,11 +53,11 @@ function selectAndExpandNode() {
       <ChevronDown v-else v-bind="defaultIconProps" />
     </div>
     <div
-      class="cursor-pointer rounded p-px px-1 inline-flex"
+      class="cursor-pointer rounded-sm p-px px-1 inline-flex"
       :class="{
         'bg-neutral-300 dark:bg-neutral-600 font-bold': isSelected,
         'hover:bg-neutral-200 dark:hover:bg-neutral-700': !isSelected,
-        [`ml-[${defaultIconProps.size}px]`]: children.length == 0,
+        ['ml-[16px]']: children.length == 0,
       }"
       role="link"
       :aria-label="node.name"

html-report/src/style.css

@@ -1,3 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.js';

html-report/tailwind.config.js

@@ -1,24 +1,5 @@
-import { defaultIconProps } from "./src/components/common/icon.ts";
-
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   darkMode: "selector",
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-  safelist: [
-    ...["red", "green", "yellow", "sky"].flatMap((color) => [
-      `border-${color}-600`,
-      `bg-${color}-500`,
-      `text-${color}-600`,
-      `dark:border-${color}-500`,
-      `dark:bg-${color}-600`,
-      `dark:border-${color}-500`,
-      `dark:bg-${color}-600`,
-    ]),
-    "text-white",
-    `ml-[${defaultIconProps.size}px]`,
-  ],
 };

html-report/vite.config.ts

@@ -1,17 +1,19 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import { viteSingleFile } from "vite-plugin-singlefile";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
+  const defaultPlugins = [vue(), tailwindcss()];
   if (command === "serve") {
     return {
-      plugins: [vue()],
+      plugins: defaultPlugins,
     };
   } else {
     // command === 'build'
     return {
-      plugins: [vue(), viteSingleFile()],
+      plugins: [...defaultPlugins, viteSingleFile()],
     };
   }
 });