mirror of
https://github.com/danog/inline-critical.git
synced 2024-11-26 12:04:38 +01:00
Initial commit
This commit is contained in:
Ben Zörb
commit
bb96310613
16
.editorconfig
Normal file
16
.editorconfig
Normal file
@ -0,0 +1,16 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[package.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
*.swp
|
||||
.DS_Store
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
3
.travis.yml
Normal file
3
.travis.yml
Normal file
@ -0,0 +1,3 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "0.10"
|
||||
51
Gruntfile.js
Normal file
51
Gruntfile.js
Normal file
@ -0,0 +1,51 @@
|
||||
// Generated on 2014-08-03 using generator-nodejs 2.0.1
|
||||
module.exports = function (grunt) {
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
complexity: {
|
||||
generic: {
|
||||
src: ['app/**/*.js'],
|
||||
options: {
|
||||
errorsOnly: false,
|
||||
cyclometric: 6, // default is 3
|
||||
halstead: 16, // default is 8
|
||||
maintainability: 100 // default is 100
|
||||
}
|
||||
}
|
||||
},
|
||||
jshint: {
|
||||
all: [
|
||||
'Gruntfile.js',
|
||||
'app/**/*.js',
|
||||
'test/**/*.js'
|
||||
],
|
||||
options: {
|
||||
jshintrc: '.jshintrc'
|
||||
}
|
||||
},
|
||||
mochacli: {
|
||||
all: ['test/**/*.js'],
|
||||
options: {
|
||||
reporter: 'spec',
|
||||
ui: 'bdd'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
js: {
|
||||
files: ['**/*.js', '!node_modules/**/*.js'],
|
||||
tasks: ['default'],
|
||||
options: {
|
||||
nospawn: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-complexity');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-mocha-cli');
|
||||
grunt.registerTask('test', ['complexity', 'jshint', 'mochacli', 'watch']);
|
||||
grunt.registerTask('ci', ['complexity', 'jshint', 'mochacli']);
|
||||
grunt.registerTask('default', ['test']);
|
||||
};
|
||||
25
LICENSE
Normal file
25
LICENSE
Normal file
@ -0,0 +1,25 @@
|
||||
Copyright (c) 2014, Ben Zörb
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
1. Redistributions of source code must retain the above copyright
|
||||
notice, this list of conditions and the following disclaimer.
|
||||
2. Redistributions in binary form must reproduce the above copyright
|
||||
notice, this list of conditions and the following disclaimer in the
|
||||
documentation and/or other materials provided with the distribution.
|
||||
3. Neither the name of Ben Zörb nor the names of its contributors
|
||||
may be used to endorse or promote products derived from this software
|
||||
without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY BEN ZÖRB ''AS IS'' AND ANY
|
||||
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL BEN ZÖRB BE LIABLE FOR ANY
|
||||
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
19
README.md
Normal file
19
README.md
Normal file
@ -0,0 +1,19 @@
|
||||
# inline-critical
|
||||
|
||||
Inline critical-path css and load the existing stylesheets asynchronously
|
||||
|
||||
[](http://travis-ci.org/bezoerb/inline-critical)
|
||||
|
||||
## Installation
|
||||
|
||||
This module is installed via npm:
|
||||
|
||||
``` bash
|
||||
$ npm install inline-critical
|
||||
```
|
||||
|
||||
## Example Usage
|
||||
|
||||
``` js
|
||||
var inlineCritical = require('inline-critical');
|
||||
```
|
||||
53
index.js
Normal file
53
index.js
Normal file
@ -0,0 +1,53 @@
|
||||
/**
|
||||
* 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\');' +
|
||||
'l.type=\'text/css\';' +
|
||||
'l.rel=\'stylesheet\';' +
|
||||
'l.href=u[i];' +
|
||||
' d.getElementsByTagName(\'head\')[0].appendChild(l);' +
|
||||
'}' +
|
||||
'}(document,[\'' + hrefs.join('\',\'') + '\']));\n' +
|
||||
'</script>\n');
|
||||
|
||||
return new Buffer($.html());
|
||||
};
|
||||
34
package.json
Normal file
34
package.json
Normal file
@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "inline-critical",
|
||||
"version": "0.0.1",
|
||||
"description": "Inline critical-path css and load the existing stylesheets asynchronously",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "node_modules/.bin/grunt ci"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/bezoerb/inline-critical"
|
||||
},
|
||||
"keywords": [
|
||||
"css critical-path"
|
||||
],
|
||||
"author": "Ben Zörb <ben@sommerlaune.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/bezoerb/inline-critical/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"cheerio": "^0.17.0",
|
||||
"clean-css": "^2.2.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"chai": "~1.8.1",
|
||||
"grunt-contrib-jshint": "~0.6.4",
|
||||
"grunt-contrib-watch": "~0.5.3",
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-mocha-cli": "~1.1.0",
|
||||
"grunt-complexity": "~0.1.3",
|
||||
"grunt-cli": "~0.1.9"
|
||||
}
|
||||
}
|
||||
290
test/fixtures/critical.css
vendored
Normal file
290
test/fixtures/critical.css
vendored
Normal file
@ -0,0 +1,290 @@
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.header{
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
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: transparent;
|
||||
}
|
||||
h1 {
|
||||
margin: .67em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
@media print {
|
||||
* {
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
a{
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
p,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*:before,
|
||||
*:after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
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;
|
||||
}
|
||||
h1,
|
||||
h3{
|
||||
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: normal;
|
||||
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:before,
|
||||
.container:after,
|
||||
.nav:before,
|
||||
.nav:after{
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.container:after,
|
||||
.nav:after{
|
||||
clear: both;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
387
test/fixtures/index-inlined-async-final.html
vendored
Normal file
387
test/fixtures/index-inlined-async-final.html
vendored
Normal file
@ -0,0 +1,387 @@
|
||||
<!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 -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style type="text/css">
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.header{
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
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: transparent;
|
||||
}
|
||||
h1 {
|
||||
margin: .67em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
@media print {
|
||||
* {
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
a{
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
p,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*:before,
|
||||
*:after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
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;
|
||||
}
|
||||
h1,
|
||||
h3{
|
||||
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: normal;
|
||||
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:before,
|
||||
.container:after,
|
||||
.nav:before,
|
||||
.nav:after{
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.container:after,
|
||||
.nav:after{
|
||||
clear: both;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
|
||||
</noscript>
|
||||
|
||||
<!-- 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]-->
|
||||
|
||||
<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="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>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<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 -->
|
||||
<script>
|
||||
(function(d,u){for (var i in u) {var l=d.createElement('link');l.type='text/css';l.rel='stylesheet';l.href=u[i]; d.getElementsByTagName('head')[0].appendChild(l);}}(document,['styles/main.css','bower_components/bootstrap/dist/css/bootstrap.css']));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
97
test/fixtures/index-inlined-async-minified-final.html
vendored
Normal file
97
test/fixtures/index-inlined-async-minified-final.html
vendored
Normal file
@ -0,0 +1,97 @@
|
||||
<!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 -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<style type="text/css">
|
||||
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>
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
|
||||
</noscript>
|
||||
|
||||
<!-- 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]-->
|
||||
|
||||
<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="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>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<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 -->
|
||||
<script>
|
||||
(function(d,u){for (var i in u) {var l=d.createElement('link');l.type='text/css';l.rel='stylesheet';l.href=u[i]; d.getElementsByTagName('head')[0].appendChild(l);}}(document,['styles/main.css','bower_components/bootstrap/dist/css/bootstrap.css']));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
88
test/fixtures/index.html
vendored
Normal file
88
test/fixtures/index.html
vendored
Normal file
@ -0,0 +1,88 @@
|
||||
<!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 -->
|
||||
|
||||
<!-- build:css styles/main.css -->
|
||||
<link rel="stylesheet" href="styles/main.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]-->
|
||||
|
||||
<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="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>
|
||||
|
||||
<h4>Bootstrap</h4>
|
||||
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<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>
|
||||
39
test/index.js
Normal file
39
test/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
var expect = require('chai').expect,
|
||||
fs = require('fs'),
|
||||
inlineCritical = require('..');
|
||||
|
||||
/**
|
||||
* Strip whitespaces, tabs and newlines and replace with one space.
|
||||
* Usefull when comparing string contents.
|
||||
* @param string
|
||||
*/
|
||||
function stripWhitespace(string) {
|
||||
return string.replace(/[\r\n]+/mg,' ').replace(/\s+/gm,'');
|
||||
}
|
||||
|
||||
describe('inline-critical', function() {
|
||||
it('should inline css', function(done) {
|
||||
var html = fs.readFileSync('test/fixtures/index.html', 'utf8');
|
||||
var css = fs.readFileSync('test/fixtures/critical.css', 'utf8');
|
||||
|
||||
var expected = fs.readFileSync('test/fixtures/index-inlined-async-final.html', 'utf8');
|
||||
var out = inlineCritical(html, css);
|
||||
|
||||
expect(stripWhitespace(out.toString('utf-8'))).to.be.equal(stripWhitespace(expected));
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
|
||||
it('should inline css', function(done) {
|
||||
var html = fs.readFileSync('test/fixtures/index.html', 'utf8');
|
||||
var css = fs.readFileSync('test/fixtures/critical.css', 'utf8');
|
||||
|
||||
var expected = fs.readFileSync('test/fixtures/index-inlined-async-minified-final.html', 'utf8');
|
||||
var out = inlineCritical(html, css, true);
|
||||
|
||||
expect(stripWhitespace(out.toString('utf-8'))).to.be.equal(stripWhitespace(expected));
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user