mirror of
https://github.com/danog/inline-critical.git
synced 2024-11-30 04:29:07 +01:00
c420dd4978
Thanks to @scottjehl from the Filament Group for this piece of code. See: https://github.com/filamentgroup/loadCSS
57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
/**
|
|
* Module to inline styles while loading the existing stylesheets async
|
|
*
|
|
* @author Ben Zörb @bezoerb https://github.com/bezoerb
|
|
* @copyright Copyright (c) 2014 Ben Zörb
|
|
*
|
|
* Licensed under the MIT license.
|
|
* http://bezoerb.mit-license.org/
|
|
* All rights reserved.
|
|
*/
|
|
'use strict';
|
|
var cheerio = require('cheerio');
|
|
var CleanCSS = require('clean-css');
|
|
|
|
module.exports = function(html, styles, minify) {
|
|
|
|
var $ = cheerio.load(String(html));
|
|
var links = $('link[rel="stylesheet"]');
|
|
var noscript = $('<noscript>\n</noscript>');
|
|
|
|
// minify if minify option is set
|
|
if (minify) {
|
|
styles = new CleanCSS().minify(styles);
|
|
}
|
|
|
|
// insert inline styles right before first <link rel="stylesheet" />
|
|
links.eq(0).before('<style type="text/css">\n' + styles + '\n</style>\n');
|
|
// insert noscript block right after stylesheets
|
|
links.eq(0).first().after(noscript);
|
|
|
|
// wrap links to stylesheets in noscript block so that they will evaluated when js is turned off
|
|
var hrefs = links.map(function(idx, el) {
|
|
el = $(el);
|
|
noscript.append(el);
|
|
noscript.append('\n');
|
|
return el.attr('href');
|
|
}).toArray();
|
|
|
|
// build js block to load blocking stylesheets
|
|
$('body').append('<script>\n' +
|
|
'(function(d,u){' +
|
|
'for (var i in u) {' +
|
|
'var l=d.createElement(\'link\');' +
|
|
'var r=d.getElementsByTagName(\'script\')[0];' +
|
|
'l.type=\'text/css\';' +
|
|
'l.rel=\'stylesheet\';' +
|
|
'l.media=\'only x\';' +
|
|
'l.href=u[i];' +
|
|
'r.parentNode.insertBefore(l,r);' +
|
|
'setTimeout( function(){l.media=\'all\';});' +
|
|
'}' +
|
|
'}(document,[\'' + hrefs.join('\',\'') + '\']));\n' +
|
|
'</script>\n');
|
|
|
|
return new Buffer($.html());
|
|
};
|