JSFiddle - React, Tailwind, and code Playground

Ajax CSS loader and concatenator

by Admiral Potato

HTML

<link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="/css/tricks.css"/>
<link rel="stylesheet" type="text/css" href="/js/codemirror/lib/codemirror.css"/>
<link rel="stylesheet" type="text/css" href="/css/style.css" media="print"/>
<link rel="stylesheet" type="text/css" href="/css/light.css"/>

JavaScript

var gonnaLoadMeSomeCSS = function(callback){
    var stylesheetContents = [],
        $styleSheets = $('link[type="text/css"]'),
        numSheets = $styleSheets.length,
        numSheetsLoaded = 0;
    $styleSheets.each(function(index, item){
        stylesheetContents[index] = false;
        var stylesheetLoadHandler = function(data){
            var media = '';
            if(item.media === 'print'){
                media = ' media="print"'
            }
        	stylesheetContents[index] = '<style' + media + '>\n/* ' + item.href + ' */\n' + data + '\n</style>';
            numSheetsLoaded += 1;
            if(numSheetsLoaded === numSheets){
                callback(stylesheetContents.join("\n"));
            }
        };
        $.ajax({
            url: item.href,
            success: stylesheetLoadHandler
        });
    });
};

var stylesheetsLoadedCallback = function(stylesString){
	console.log('ALL LOADED!', stylesString);
};

gonnaLoadMeSomeCSS(stylesheetsLoadedCallback);