I am using a lot of Javascript plugins these days and managing them has become a fairly big deal. Recently, I have adopted Asynchronous Module Definition. I am using Require JS (http://requirejs.org) and like it a lot.
The problem is, Require JS does not work with CSS and it turns out that loading CSS is as much of a hassle as loading Javascript.
I think that the basic solution is to put a link to the CSS file into their page. But, I work with a framework and I do not want to pollute it with content-specific code. Some of the pages/sites that use the framework do not need plugin X and should not be having the CSS for it any more than they should have the JS.
Require JS says that they don't support CSS files because there isn't any good way to know when they arrive. It offers a tidbit of code for those, they say, who don't care about the timing of the arrival of the file.
This is nonsense. Following is code that does exactly that. Unfortunately, since it's not built into Require JS, I have to wrap stuff up for callback, but, c'est la vie.
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = filePath;
document.getElementsByTagName("head")[0].appendChild(link);
var count=0,
tryAgain=function(){
for (var i=0, len=document.styleSheets.length; i<len; i++){
var element=document.styleSheets[i];
if (element.href && element.href.match(filePath)){
callback();
return;
}
}
if (count<10){
count++;
setTimeout(tryAgain, 100);
}
else{
throw "loadCssFile() failed on to find "+filePath;
}
}
setTimeout(tryAgain, 100);
}