feat: this changes the priority of theme overrides

nelc · Nov 22, 2024 · 176ed12 · 176ed12
1 parent 55332c1
commit 176ed12
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/src/react/hooks/paragon/useParagonThemeCore.js b/src/react/hooks/paragon/useParagonThemeCore.js
@@ -106,7 +106,7 @@ const useParagonThemeCore = ({
 
       const paragonCoreThemeLink = createCoreThemeLink(themeCore.urls.default);
       document.head.insertAdjacentElement(
-        'afterbegin',
+        'beforeend',
         paragonCoreThemeLink,
       );
 

diff --git a/src/react/hooks/paragon/useParagonThemeVariants.js b/src/react/hooks/paragon/useParagonThemeVariants.js
@@ -77,6 +77,8 @@ const useParagonThemeVariants = ({
         setIsBrandThemeVariantLoaded(true);
         return;
       }
+      const getParagonThemeCoreLink = () => document.head.querySelector('link[data-paragon-theme-core="true"]');
+      const getBrandThemeCoreLink = () => document.head.querySelector('link[data-brand-theme-core="true"]');
       const getParagonThemeVariantLink = () => document.head.querySelector(`link[data-paragon-theme-variant='${themeVariant}']`);
       const existingThemeVariantLink = document.head.querySelector(`link[href='${value.urls.default}']`);
       const existingThemeVariantBrandLink = document.head.querySelector(`link[href='${value.urls.brandOverride}']`);
@@ -162,10 +164,25 @@ const useParagonThemeVariants = ({
 
       if (!existingThemeVariantLink) {
         const paragonThemeVariantLink = createThemeVariantLink(value.urls.default);
-        document.head.insertAdjacentElement(
-          'afterbegin',
-          paragonThemeVariantLink,
-        );
+        const foundParagonThemeCoreLink = getParagonThemeCoreLink();
+        const foundBrandThemeCoreLink = getBrandThemeCoreLink();
+
+        if (foundBrandThemeCoreLink) {
+          foundBrandThemeCoreLink.insertAdjacentElement(
+            'afterend',
+            paragonThemeVariantLink,
+          );
+        } else if (foundParagonThemeCoreLink) {
+          foundParagonThemeCoreLink.insertAdjacentElement(
+            'afterend',
+            paragonThemeVariantLink,
+          );
+        } else {
+          document.head.insertAdjacentElement(
+            'beforeend',
+            paragonThemeVariantLink,
+          );
+        }
 
         if (value.urls.brandOverride) {
           const brandThemeVariantLink = createThemeVariantLink(value.urls.brandOverride, { isBrandOverride: true });
@@ -177,7 +194,7 @@ const useParagonThemeVariants = ({
             );
           } else {
             document.head.insertAdjacentElement(
-              'afterbegin',
+              'beforeend',
               brandThemeVariantLink,
             );
           }