avoid reversing the order of styles by always prepending

elastic · Apr 28, 2020 · 99ff6d7 · 99ff6d7
1 parent b69c4f1
commit 99ff6d7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/core/server/rendering/views/template.tsx b/src/core/server/rendering/views/template.tsx
@@ -104,6 +104,10 @@ export const Template: FunctionComponent<Props> = ({
         <meta name="msapplication-config" content={`${uiPublicUrl}/favicons/browserconfig.xml`} />
         <meta name="theme-color" content="#ffffff" />
         <Styles darkMode={darkMode} />
+
+        {/* Inject stylesheets into the <head> before scripts so that KP plugins with bundled styles will override them */}
+        <meta name="add-styles-here" />
+        <meta name="add-scripts-here" />
       </head>
       <body>
         {createElement('kbn-csp', {

diff --git a/src/legacy/ui/ui_render/bootstrap/template.js.hbs b/src/legacy/ui/ui_render/bootstrap/template.js.hbs
@@ -29,29 +29,26 @@ if (window.__kbnStrictCsp__ && window.__kbnCspNotEnforced__) {
       document.body.innerHTML = err.outerHTML;
     }
 
+    var stylesheetTarget = document.querySelector('head meta[name="add-styles-here"]')
     function loadStyleSheet(url, cb) {
       var dom = document.createElement('link');
       dom.rel = 'stylesheet';
       dom.type = 'text/css';
       dom.href = url;
       dom.addEventListener('error', failure);
       dom.addEventListener('load', cb);
-      {{!-- Inject stylesheets into the top of the <head> so that all styles bundled in KP plugins will override --}}
-      if (document.head.firstChild) {
-        document.head.insertBefore(dom, document.head.firstChild);
-      } else {
-        document.head.appendChild(dom);
-      }
+      document.head.insertBefore(dom, stylesheetTarget);
     }
 
+    var scriptsTarget = document.querySelector('head meta[name="add-scripts-here"]')
     function loadScript(url, cb) {
       var dom = document.createElement('script');
       {{!-- NOTE: async = false is used to trigger async-download/ordered-execution as outlined here: https://www.html5rocks.com/en/tutorials/speed/script-loading/ --}}
       dom.async = false;
       dom.src = url;
       dom.addEventListener('error', failure);
       dom.addEventListener('load', cb);
-      document.head.appendChild(dom);
+      document.head.insertBefore(dom, scriptsTarget);
     }
 
     function load(urls, cb) {