danog/inline-critical
1
0
Fork 0
mirror of https://github.com/danog/inline-critical.git synced 2024-11-30 04:29:07 +01:00
Code Issues Projects Releases Wiki Activity

Use original loadCSS

Browse Source
This commit is contained in:
Ben Zörb 2014-12-08 23:02:01 +01:00
parent 7e23be10fe
commit 95606c5cda
14 changed files with 12854 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.js
View File

@ -12,6 +12,7 @@
var fs = require('fs');
var path = require('path');
var UglifyJS = require("uglify-js");
var cave = require('cave');
var reaver = require('reaver');
var cheerio = require('cheerio');
@ -19,6 +20,7 @@ var CleanCSS = require('clean-css');
var slash = require('slash');
var normalizeNewline = require('normalize-newline');
/**
* Fixup slashes in file paths for windows
*/
@ -26,6 +28,15 @@ function normalizePath(str) {
return process.platform === 'win32' ? slash(str) : str;
}
function read (file) {
return fs.readFileSync(file, 'utf8');
}
var loadCSS = read(path.join(__dirname,'vendor','loadCSS.js'));
loadCSS = UglifyJS.minify(loadCSS, {fromString: true}).code;
module.exports = function(html, styles, options) {
var $ = cheerio.load(String(html));
@ -73,18 +84,10 @@ module.exports = function(html, styles, options) {
// build js block to load blocking stylesheets
$(noscript).before('<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);' +
'(function(l){setTimeout( function(){l.media=\'all\';});})(l)' +
'}' +
'}(document,[\'' + hrefs.join('\',\'') + '\']));\n' +
'(function(u){' +
loadCSS +
'for(var i in u){loadCSS(u[i]);}' +
'}([\'' + hrefs.join('\',\'') + '\']));\n' +
'</script>\n');
return new Buffer($.html());

3
package.json
View File

@ -25,7 +25,8 @@
"clean-css": "^2.2.12",
"normalize-newline": "^1.0.1",
"reaver": "^1.2.0",
"slash": "^1.0.0"
"slash": "^1.0.0",
"uglify-js": "^2.4.15"
},
"devDependencies": {
"chai": "~1.8.1",

0
test/fixtures/cartoon-expected.css → test/expected/cartoon-expected.css
View File

41
test/fixtures/cartoon-expected.html → test/expected/cartoon-expected.html
View File

@ -301,11 +301,11 @@ ul{
}
</style>
<script>
(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);(function(l){setTimeout( function(){l.media='all';});})(l)}}(document,['css/cartoon.18d89c7f.css','']));
(function(u){function loadCSS(e,t,n){"use strict";function r(){for(var t,i=0;i<d.length;i++)d[i].href&&d[i].href.indexOf(e)>-1&&(t=!0);t?o.media=n||"all":setTimeout(r)}var o=window.document.createElement("link"),i=t||window.document.getElementsByTagName("script")[0],d=window.document.styleSheets;return o.rel="stylesheet",o.href=e,o.media="only x",i.parentNode.insertBefore(o,i),r(),o}for(var i in u){loadCSS(u[i]);}}(['css/cartoon.18d89c7f.css','bower_components/bootstrap/dist/css/bootstrap.d561412a.css']));
</script>
<noscript>
<link rel="stylesheet" href="css/cartoon.18d89c7f.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.d561412a.css">
</noscript>
<!-- endbuild -->
@ -346,42 +346,5 @@ ul{
<p>&#x2665; from the Yeoman team</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap/js/affix.js"></script>
<script src="bower_components/bootstrap/js/alert.js"></script>
<script src="bower_components/bootstrap/js/dropdown.js"></script>
<script src="bower_components/bootstrap/js/tooltip.js"></script>
<script src="bower_components/bootstrap/js/modal.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/button.js"></script>
<script src="bower_components/bootstrap/js/popover.js"></script>
<script src="bower_components/bootstrap/js/carousel.js"></script>
<script src="bower_components/bootstrap/js/scrollspy.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/js/tab.js"></script>
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>

40
test/fixtures/index-inlined-async-final.html → test/expected/index-inlined-async-final.html
View File

@ -301,10 +301,10 @@ ul{
}
</style>
<script>
(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);(function(l){setTimeout( function(){l.media='all';});})(l)}}(document,['styles/main.css','bower_components/bootstrap/dist/css/bootstrap.css']));
(function(u){function loadCSS(e,t,n){"use strict";function r(){for(var t,i=0;i<d.length;i++)d[i].href&&d[i].href.indexOf(e)>-1&&(t=!0);t?o.media=n||"all":setTimeout(r)}var o=window.document.createElement("link"),i=t||window.document.getElementsByTagName("script")[0],d=window.document.styleSheets;return o.rel="stylesheet",o.href=e,o.media="only x",i.parentNode.insertBefore(o,i),r(),o}for(var i in u){loadCSS(u[i]);}}(['css/main.css','bower_components/bootstrap/dist/css/bootstrap.css']));
</script>
<noscript>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
</noscript>
@ -346,41 +346,5 @@ ul{
<p>&#x2665; from the Yeoman team</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap/js/affix.js"></script>
<script src="bower_components/bootstrap/js/alert.js"></script>
<script src="bower_components/bootstrap/js/dropdown.js"></script>
<script src="bower_components/bootstrap/js/tooltip.js"></script>
<script src="bower_components/bootstrap/js/modal.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/button.js"></script>
<script src="bower_components/bootstrap/js/popover.js"></script>
<script src="bower_components/bootstrap/js/carousel.js"></script>
<script src="bower_components/bootstrap/js/scrollspy.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/js/tab.js"></script>
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>

40
test/fixtures/index-inlined-async-minified-final.html → test/expected/index-inlined-async-minified-final.html
View File

@ -12,10 +12,10 @@
body{padding-top:20px;padding-bottom:20px}.header{padding-left:15px;padding-right:15px;border-bottom:1px solid #e5e5e5}.header h3{margin-top:0;margin-bottom:0;line-height:40px;padding-bottom:19px}.jumbotron{text-align:center;border-bottom:1px solid #e5e5e5}.jumbotron .btn{font-size:21px;padding:14px 24px}@media screen and (min-width:768px){.container{max-width:730px}.header{padding-left:0;padding-right:0;margin-bottom:30px}.jumbotron{border-bottom:0}}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a{background:0 0}h1{margin:.67em 0}@media print{*{color:#000!important;text-shadow:none!important;background:0 0!important;box-shadow:none!important}a{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}a[href^="#"]:after{content:""}h3,p{orphans:3;widows:3}h3{page-break-after:avoid}}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}a{color:#428bca;text-decoration:none}h1,h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;margin-top:20px;margin-bottom:10px}h1{font-size:36px}h3{font-size:24px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.text-muted{color:#999}ul{margin-top:0;margin-bottom:10px}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a{color:#fff;background-color:#428bca}.jumbotron{padding:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.container .jumbotron{border-radius:6px}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron{padding-right:60px;padding-left:60px}.jumbotron h1{font-size:63px}}.container:after,.container:before,.nav:after,.nav:before{display:table;content:" "}.container:after,.nav:after{clear:both}.pull-right{float:right!important}
</style>
<script>
(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);(function(l){setTimeout( function(){l.media='all';});})(l)}}(document,['styles/main.css','bower_components/bootstrap/dist/css/bootstrap.css']));
(function(u){function loadCSS(e,t,n){"use strict";function r(){for(var t,i=0;i<d.length;i++)d[i].href&&d[i].href.indexOf(e)>-1&&(t=!0);t?o.media=n||"all":setTimeout(r)}var o=window.document.createElement("link"),i=t||window.document.getElementsByTagName("script")[0],d=window.document.styleSheets;return o.rel="stylesheet",o.href=e,o.media="only x",i.parentNode.insertBefore(o,i),r(),o}for(var i in u){loadCSS(u[i]);}}(['css/main.css','bower_components/bootstrap/dist/css/bootstrap.css']));
</script>
<noscript>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
</noscript>
@ -57,41 +57,5 @@
<p>&#x2665; from the Yeoman team</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap/js/affix.js"></script>
<script src="bower_components/bootstrap/js/alert.js"></script>
<script src="bower_components/bootstrap/js/dropdown.js"></script>
<script src="bower_components/bootstrap/js/tooltip.js"></script>
<script src="bower_components/bootstrap/js/modal.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/button.js"></script>
<script src="bower_components/bootstrap/js/popover.js"></script>
<script src="bower_components/bootstrap/js/carousel.js"></script>
<script src="bower_components/bootstrap/js/scrollspy.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/js/tab.js"></script>
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>

34
test/fixtures/bower_components/bootstrap/.bower.json vendored Normal file
View File

@ -0,0 +1,34 @@
{
"name": "bootstrap",
"version": "3.1.1",
"main": [
"./dist/css/bootstrap.css",
"./dist/js/bootstrap.js",
"./dist/fonts/glyphicons-halflings-regular.eot",
"./dist/fonts/glyphicons-halflings-regular.svg",
"./dist/fonts/glyphicons-halflings-regular.ttf",
"./dist/fonts/glyphicons-halflings-regular.woff"
],
"ignore": [
"**/.*",
"_config.yml",
"CNAME",
"composer.json",
"CONTRIBUTING.md",
"docs",
"js/tests"
],
"dependencies": {
"jquery": ">= 1.9.0"
},
"homepage": "https://github.com/twbs/bootstrap",
"_release": "3.1.1",
"_resolution": {
"type": "version",
"tag": "v3.1.1",
"commit": "a365d8689c3f3cee7f1acf86b61270ecca8e106d"
},
"_source": "git://github.com/twbs/bootstrap.git",
"_target": "~3.1.1",
"_originalSource": "bootstrap"
}

5785
test/fixtures/bower_components/bootstrap/dist/css/bootstrap.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

6921
test/fixtures/bower_components/bootstrap/dist/css/bootstrap.d561412a.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

116
test/fixtures/cartoon.html vendored
View File

@ -1,88 +1,58 @@
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>critical css test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<head>
<meta charset="utf-8">
<title>critical css test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="css/cartoon.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="css/cartoon.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h3 class="text-muted">critical css test</h3>
</div>
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h3 class="text-muted">critical css test</h3>
</div>
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">Always a pleasure scaffolding your apps.</p>
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
</div>
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<div class="row marketing">
<div class="col-lg-6">
<h4>HTML5 Boilerplate</h4>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
<p class="lead">Always a pleasure scaffolding your apps.</p>
<h4>Bootstrap</h4>
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
</div>
</div>
<p><a class="btn btn-lg btn-success" href="#">Splendid!</a></p>
</div>
<div class="footer">
<p>♥ from the Yeoman team</p>
</div>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>HTML5 Boilerplate</h4>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or
sites.</p>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
<h4>Bootstrap</h4>
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap/js/affix.js"></script>
<script src="bower_components/bootstrap/js/alert.js"></script>
<script src="bower_components/bootstrap/js/dropdown.js"></script>
<script src="bower_components/bootstrap/js/tooltip.js"></script>
<script src="bower_components/bootstrap/js/modal.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/button.js"></script>
<script src="bower_components/bootstrap/js/popover.js"></script>
<script src="bower_components/bootstrap/js/carousel.js"></script>
<script src="bower_components/bootstrap/js/scrollspy.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/js/tab.js"></script>
<!-- endbuild -->
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
</div>
</div>
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
<div class="footer">
<p>♥ from the Yeoman team</p>
</div>
</div>
</body>
</html>

1
test/fixtures/css/main.css vendored Normal file
View File

@ -0,0 +1 @@
/* nothing in here */

38
test/fixtures/index.html vendored
View File

@ -8,7 +8,7 @@
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbuild -->
@ -48,41 +48,5 @@
<p>♥ from the Yeoman team</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap/js/affix.js"></script>
<script src="bower_components/bootstrap/js/alert.js"></script>
<script src="bower_components/bootstrap/js/dropdown.js"></script>
<script src="bower_components/bootstrap/js/tooltip.js"></script>
<script src="bower_components/bootstrap/js/modal.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/button.js"></script>
<script src="bower_components/bootstrap/js/popover.js"></script>
<script src="bower_components/bootstrap/js/carousel.js"></script>
<script src="bower_components/bootstrap/js/scrollspy.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/js/tab.js"></script>
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>

8
test/index.js
View File

@ -22,7 +22,7 @@ describe('inline-critical', function() {
var html = read('test/fixtures/index.html');
var css = read('test/fixtures/critical.css');
var expected = read('test/fixtures/index-inlined-async-final.html');
var expected = read('test/expected/index-inlined-async-final.html');
var out = inlineCritical(html, css);
expect(strip(out.toString('utf-8'))).to.be.equal(strip(expected));
@ -35,7 +35,7 @@ describe('inline-critical', function() {
var html = read('test/fixtures/index.html');
var css = read('test/fixtures/critical.css');
var expected = read('test/fixtures/index-inlined-async-minified-final.html');
var expected = read('test/expected/index-inlined-async-minified-final.html');
var out = inlineCritical(html, css, { minify: true });
expect(strip(out.toString('utf-8'))).to.be.equal(strip(expected));
@ -47,8 +47,8 @@ describe('inline-critical', function() {
it('should inline and extract css', function(done) {
var html = read('test/fixtures/cartoon.html');
var css = read('test/fixtures/critical.css');
var expected = read('test/fixtures/cartoon-expected.css');
var expectedHtml = read('test/fixtures/cartoon-expected.html');
var expected = read('test/expected/cartoon-expected.css');
var expectedHtml = read('test/expected/cartoon-expected.html');
var out = inlineCritical(html, css, { extract: true, basePath: 'test/fixtures' });

42
vendor/loadCSS.js vendored Normal file
View File

@ -0,0 +1,42 @@
/*!
loadCSS: load a CSS file asynchronously.
[c]2014 @scottjehl, Filament Group, Inc.
Licensed MIT
*/
function loadCSS( href, before, media ){
"use strict";
// Arguments explained:
// `href` is the URL for your CSS file.
// `before` optionally defines the element we'll use as a reference for injecting our <link>
// By default, `before` uses the first <script> element in the page.
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document.
// If so, pass a different reference element to the `before` argument and it'll insert before that instead
// note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
var ss = window.document.createElement( "link" );
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
var sheets = window.document.styleSheets;
ss.rel = "stylesheet";
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll fetch without blocking render
ss.media = "only x";
// inject link
ref.parentNode.insertBefore( ss, ref );
// This function sets the link's media back to `all` so that the stylesheet applies once it loads
// It is designed to poll until document.styleSheets includes the new sheet.
function toggleMedia(){
var defined;
for( var i = 0; i < sheets.length; i++ ){
if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){
defined = true;
}
}
if( defined ){
ss.media = media || "all";
}
else {
setTimeout( toggleMedia );
}
}
toggleMedia();
return ss;
}