From 65a93ca5476166f07708ef1024e471d82399852a Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Thu, 9 Nov 2023 14:13:11 +0100 Subject: [PATCH] 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. --- web/index.html | 1 - web/vite.config.ts | 19 +++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/web/index.html b/web/index.html index b0edf180c..94e0c07b8 100644 --- a/web/index.html +++ b/web/index.html @@ -8,7 +8,6 @@ Woodpecker -
diff --git a/web/vite.config.ts b/web/vite.config.ts index ff89989c8..69186c25d 100644 --- 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'],