Crear hoja de estilo CSS con javascript

[Pantaláimon]

Bueno,

Después de buscar y buscar información he conseguido crear una función createStyleSheet que funcione para algún caso.

Código Javascript:

if(typeof document.createStyleSheet === 'undefined') {
    document.createStyleSheet = function(href) {
            if(typeof href !== 'undefined') {
                var element = document.createElement('link');
                element.type = 'text/css';
                element.rel = 'stylesheet';
                element.href = href;
            }
            else {
                var element = document.createElement('style');
                element.type = 'text/css';
            }
            console.log( element );
 
            var index = document.styleSheets.length;
            document.getElementsByTagName('head')[0].appendChild(element);
            
            //comprobar si index document.styleSheets tienen los valores correctos
            console.log( index );
            console.log( document.styleSheets );
 
            //devolver referencia a hoja de estilos insertada
            var sheet = document.styleSheets[index];
            return sheet;
    }
 

Es una función que añado a document tal que si le paso por parametro la localizacion de un fichero css me lo carga. En caso de no pasar ningún parametro me crea un elemento style. La función retorna la hoja de estilos insertada para luego modificarla insertando o removiendo reglas css a voluntad.

La cosa es que soy bastante quisquilloso y me gusta probar si dicha función funciona como debería funcionar para todos los casos. Lastimosamente he encontrado almenos un caso en la que no funciona correctamente:

Código Javascript:

window.onload = function() {
    document.createStyleSheet( 'css/test.css' ); // cargar css externo
    var sheet = document.createStyleSheet(); // crear css anonimo
    sheet.insertRule('h1 { color: red; }', 0 );
    console.log( sheet );
}
 

Aquí el error que me manda por Chrome:

Código BASH:

<link type="text/css" rel="stylesheet" href="css/test.css">
1 insert_text.js:33
StyleSheetList {0: CSSStyleSheet, length: 1, item: function}
 insert_text.js:34
<style type=&#8203;"text/​css">​</style>​
 insert_text.js:27
1 insert_text.js:33
StyleSheetList {0: CSSStyleSheet, length: 1, item: function}
 Uncaught TypeError: Cannot call method 'insertRule' of undefined
 

Parece ser que cuando inserto un elemento link o style en head, no se actualiza directamente la lista document.styleSheets. Veo que quizá podría solucionarlo usando el truco de setTimeout( .., 0 ) después de insertar el elemento. Sin embargo este código:

Código Javascript:

var sheet = document.styleSheets[index];
return sheet;
 

debería estar dentro de setTimeout. Y a mi me sobrepasa cómo poder insertar un return dentro de setTimeout.

PD.: Normalmente se aprende mucho de los pequeños baches que te vas encontrando pero para un novato como yo en Javascript esto empieza a parecerme frustrante. Parezco un imán de bugs.

Un saludo y gracias!