From 92fb3b752978d191477a7509a319b254b477b321 Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone.gj@gmail.com>
Date: Fri, 22 Oct 2021 18:10:32 +0200
Subject: [PATCH] Fix css injection order

---
 src/lib/components/Template.tsx               | 19 +++++++++-------
 .../tools/HTMLElement.prototype.prepend.ts    |  9 ++++++++
 .../tools/{appendHead.ts => headInsert.ts}    | 22 +++++++++++++++++--
 3 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/tools/HTMLElement.prototype.prepend.ts
 rename src/lib/tools/{appendHead.ts => headInsert.ts} (63%)

diff --git a/src/lib/components/Template.tsx b/src/lib/components/Template.tsx
index dde53556..61ca2a63 100644
--- a/src/lib/components/Template.tsx
+++ b/src/lib/components/Template.tsx
@@ -8,7 +8,7 @@ import type { KcLanguageTag } from "../i18n/KcLanguageTag";
 import { getBestMatchAmongKcLanguageTag } from "../i18n/KcLanguageTag";
 import { getKcLanguageTagLabel } from "../i18n/KcLanguageTag";
 import { useCallbackFactory } from "powerhooks/useCallbackFactory";
-import { appendHead } from "../tools/appendHead";
+import { headInsert } from "../tools/headInsert";
 import { join as pathJoin } from "path";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import type { KcTemplateProps } from "./KcProps";
@@ -92,12 +92,15 @@ export const Template = memo((props: TemplateProps) => {
             [
                 ...toArr(props.stylesCommon).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
                 ...toArr(props.styles).map(relativePath => pathJoin(url.resourcesPath, relativePath)),
-            ].map(href =>
-                appendHead({
-                    "type": "css",
-                    href,
-                }),
-            ),
+            ]
+                .reverse()
+                .map(href =>
+                    headInsert({
+                        "type": "css",
+                        href,
+                        "position": "prepend",
+                    }),
+                ),
         ).then(() => {
             if (isUnmounted) {
                 return;
@@ -107,7 +110,7 @@ export const Template = memo((props: TemplateProps) => {
         });
 
         toArr(props.scripts).forEach(relativePath =>
-            appendHead({
+            headInsert({
                 "type": "javascript",
                 "src": pathJoin(url.resourcesPath, relativePath),
             }),
diff --git a/src/lib/tools/HTMLElement.prototype.prepend.ts b/src/lib/tools/HTMLElement.prototype.prepend.ts
new file mode 100644
index 00000000..3c4ce328
--- /dev/null
+++ b/src/lib/tools/HTMLElement.prototype.prepend.ts
@@ -0,0 +1,9 @@
+if (!HTMLElement.prototype.prepend) {
+    HTMLElement.prototype.prepend = function (childNode) {
+        if (typeof childNode === "string") {
+            throw new Error("Error with HTMLElement.prototype.appendFirst polyfill");
+        }
+
+        this.insertBefore(childNode, this.firstChild);
+    };
+}
diff --git a/src/lib/tools/appendHead.ts b/src/lib/tools/headInsert.ts
similarity index 63%
rename from src/lib/tools/appendHead.ts
rename to src/lib/tools/headInsert.ts
index 89fe59d8..1c405c19 100644
--- a/src/lib/tools/appendHead.ts
+++ b/src/lib/tools/headInsert.ts
@@ -1,10 +1,12 @@
+import "./HTMLElement.prototype.prepend";
 import { Deferred } from "evt/tools/Deferred";
 
-export function appendHead(
+export function headInsert(
     params:
         | {
               type: "css";
               href: string;
+              position: "append" | "prepend";
           }
         | {
               type: "javascript";
@@ -46,7 +48,23 @@ export function appendHead(
         })(),
     );
 
-    document.getElementsByTagName("head")[0].appendChild(htmlElement);
+    document.getElementsByTagName("head")[0][
+        (() => {
+            switch (params.type) {
+                case "javascript":
+                    return "appendChild";
+                case "css":
+                    return (() => {
+                        switch (params.position) {
+                            case "append":
+                                return "appendChild";
+                            case "prepend":
+                                return "prepend";
+                        }
+                    })();
+            }
+        })()
+    ](htmlElement);
 
     return dLoaded.pr;
 }