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.
woodpecker-ci · Nov 9, 2023 · 65a93ca · 65a93ca
1 parent 6f07f2a
commit 65a93ca
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git 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>

diff --git 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'],