fix(injectBaseStylesheet): address style injection issue

Fix a bug where getElementByTagName() was attempting to access an attr, .innerHTML, that was not defined.

Instead, create and inject a new style tag as a child to the head.

Author: luqven

package.json

@@ -4,7 +4,8 @@
   "description": "Easily add \"zoom on hover\" functionality to your site's images. Lightweight, no-dependency JavaScript.",
   "contributors": [
     "Frederick Fogerty <[email protected]> (https://github.com/frederickfogerty)",
-    "Sherwin Heydarbeygi <[email protected]> (https://github.com/sherwinski)"
+    "Sherwin Heydarbeygi <[email protected]> (https://github.com/sherwinski)",
+    "Luis Ball <[email protected]> (https://github.com/luqven)"
   ],
   "main": "lib/Drift.js",
   "module": "es/Drift.js",

src/js/injectBaseStylesheet.js

@@ -55,13 +55,14 @@ export default function injectBaseStylesheet() {
     return;
   }
 
+  // create the injected styles
   const styleEl = document.createElement("style");
-  styleEl.type = "text/css";
   styleEl.classList = "drift-base-styles";
-
   styleEl.textContent = RULES;
-  const head = document.head;
 
+  // prepend them to the document head's first child
+  const head = document.head;
   const allHeadElements = head.getElementsByTagName("*");
-  allHeadElements.innerHTML = styleEl + allHeadElements.innerHTML;
+  const firstItem = allHeadElements.item(0);
+  firstItem.outerHTML = styleEl.outerHTML + firstItem.outerHTML;
 }