Fix css loading order in head (#2785)

The `custom.css` file should be loaded last to take precedence over the default file. Otherwise, the theming will not work as expected, and you would have to use `!important` most of the time.
2025-10-30 23:27:39 +02:00 · 2023-11-09 14:13:11 +01:00
parent 6f07f2acf2
commit 65a93ca547
2 changed files with 19 additions and 1 deletions
--- a/web/index.html
+++ b/web/index.html
@@ -8,7 +8,6 @@
    <meta name="theme-color" content="#65a30d" />
    <title>Woodpecker</title>
    <script type="" src="/web-config.js"></script>
-    <link rel="stylesheet" href="/assets/custom.css" />
  </head>
  <body>
    <div id="app"></div>
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -25,6 +25,24 @@ function woodpeckerInfoPlugin() {
  };
 }

+function externalCSSPlugin() {
+  return {
+    name: 'external-css',
+    transformIndexHtml: {
+      enforce: 'post',
+      transform() {
+        return [
+          {
+            tag: 'link',
+            attrs: { rel: 'stylesheet', type: 'text/css', href: '/assets/custom.css' },
+            injectTo: 'head',
+          },
+        ];
+      },
+    },
+  };
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [
@@ -93,6 +111,7 @@ export default defineConfig({
    Components({
      resolvers: [IconsResolver()],
    }),
+    externalCSSPlugin(),
    woodpeckerInfoPlugin(),
    prismjs({
      languages: ['yaml'],