Extract @imports in <style> elements to individual <link> elements

imports-to-links.js

(function importsToLinks() {
  var i;
  var n;
  var imports;
  var newLinkElement;
  var $inlineStyleElements = document.querySelectorAll('style');

  for (i = 0; i < $inlineStyleElements.length; i ++) {
    imports = $inlineStyleElements[i].innerText.match(/(@import) (url)\(([^>]*?)\)/g);

    if (imports && typeof imports === 'object' && 'length' in imports) {
      for (n = 0; n < imports.length; n ++) {
        newLinkElement = document.createElement('link');
        newLinkElement.rel = 'stylesheet';
        newLinkElement.type = 'text/css';
        newLinkElement.href = imports[n].split('"')[1];

        document.head.appendChild(newLinkElement);
        $inlineStyleElements[i].innerText = $inlineStyleElements[i].innerText.replace(imports[n], '');
      }
    }
  }
})();