commit c06509eaeb2aec1639c8ce9b197791687925ee8e

Author: Jeffrey Lembeck <jlembeck@gmail.com>
Date:   Wed Jun 25 18:31:26 2014 -0700

    Add readme, move some things

    .gitignore

    Make a node wrapper

commit cbcc6930f2cb65d949a39ae66b3d39ee4998c7a6
Author: Jeffrey Lembeck <jlembeck@gmail.com>
Date:   Wed Jun 25 18:15:17 2014 -0700

    You can run the phantomjs task now and have it work, still needed: take arguments, convert to grunt task

Author: jefflembeck

.gitignore

@@ -0,0 +1 @@
+node_modules

.jshintrc

@@ -0,0 +1,15 @@
+{
+	"curly": true,
+	"eqeqeq": true,
+	"immed": true,
+	"latedef": true,
+	"newcap": true,
+	"noarg": true,
+	"sub": true,
+	"undef": true,
+	"unused": true,
+	"boss": true,
+	"eqnull": true,
+	"node": true,
+	"es5": true
+}

Gruntfile.js

@@ -0,0 +1,52 @@
+/*global module:true*/
+(function(){
+	'use strict';
+
+	module.exports = function(grunt) {
+
+		// Project configuration.
+		grunt.initConfig({
+			nodeunit: {
+				files: ['test/**/*_test.js']
+			},
+			jshint: {
+				options: {
+					jshintrc: '.jshintrc'
+				},
+				gruntfile: {
+					src: 'Gruntfile.js'
+				},
+				lib: {
+					src: ['lib/**/*.js']
+				},
+				test: {
+					src: ['test/**/*.js']
+				}
+			},
+			watch: {
+				gruntfile: {
+					files: '<%= jshint.gruntfile.src %>',
+					tasks: ['jshint:gruntfile']
+				},
+				lib: {
+					files: '<%= jshint.lib.src %>',
+					tasks: ['jshint:lib', 'nodeunit']
+				},
+				test: {
+					files: '<%= jshint.test.src %>',
+					tasks: ['jshint:test', 'nodeunit']
+				}
+			}
+		});
+
+		// These plugins provide necessary tasks.
+		grunt.loadNpmTasks('grunt-contrib-nodeunit');
+		grunt.loadNpmTasks('grunt-contrib-jshint');
+		grunt.loadNpmTasks('grunt-contrib-watch');
+
+		// Default task.
+		grunt.registerTask('default', ['jshint', 'nodeunit']);
+
+	};
+}());
+

README.md

@@ -0,0 +1,3 @@
+CriticalCSS
+
+To Run: `phantomjs lib/criticalrunner.js`

critical.js

@@ -0,0 +1,67 @@
+/*global require:true*/
+/*global console:true*/
+(function( exports ){
+	"use strict";
+
+	var phantomJsPath = require('phantomjs').path;
+	var execFile = require('child_process').execFile;
+	var path = require( 'path' );
+
+	exports.findCritical = function( url, opts, cb ){
+		var defaultCb = function( err, output ){
+			if( err ){
+				throw new Error( err );
+			} else {
+				console.log( output );
+			}
+		};
+
+		if( typeof url !== "string" ){
+			throw new TypeError( "URL must be a string" );
+		}
+
+		if( typeof opts === "undefined" && typeof cb === "undefined" ){
+			opts = {};
+			cb = defaultCb;
+		}
+
+		if( typeof opts === "function" ){
+			cb = opts;
+			opts = {};
+		}
+
+		var width = opts.width || 1200;
+		var height = opts.height || 900;
+		var output = opts.output || "dist.css";
+		var filename = opts.filename || "all.css";
+
+
+		execFile( phantomJsPath,
+			[
+				path.join( 'lib', 'criticalrunner.js' ),
+				url,
+				filename,
+				output,
+				width,
+				height
+			],
+
+			function(err, stdout, stderr){
+				console.log( "Hi" );
+				if( err ){
+					console.log("\nSomething went wrong with phantomjs...");
+					if( stderr ){
+						console.log( stderr );
+					}
+					cb( err, null );
+				} else {
+					console.log( stdout );
+					cb( null, stdout );
+				}
+
+			}
+		);
+
+	};
+
+}(typeof exports === 'object' && exports || this));

lib/criticalcss.js

@@ -0,0 +1,89 @@
+/*
+criticalCSS by @scottjehl. Run this on your CSS, get the styles that are applicable in the viewport (critical). The url arg should be any part of the URL of the stylesheets you'd like to parse. So, 'all.css' or '/css/' would both work.
+*/
+(function(exports){
+	"use strict";
+	/**
+	 * opts
+	 * opts.sheets = document.styleSheets
+	 * opts.maxTop = window.innerHeight
+	 * opts.querySelector = function( selector ){
+	 *     return page.evaluate(function(s){
+	 *       return document.querySelector( s );
+	 *     },selector);
+	 * opts.matchMedia = window.matchMedia
+	 */
+	var criticalCSS = function( url, opts ){
+		var sheets = opts.sheets,
+			maxTop = opts.maxTop,
+			critical = [];
+
+			var removeNull = function( el ){
+				return el !== null;
+			};
+
+		var critCSSText;
+		var aboveFold = function( rule ){
+			if( !rule.selectorText ){
+				return false;
+			}
+			var selectors = rule.selectorText.split(","),
+				criticalSelectors = [];
+			for( var k = 0, sl = selectors.length; k < sl; k++ ) {
+				var elem = opts.querySelector( selectors[ k ] );
+				if( elem && elem.offsetTop <= maxTop ){
+					criticalSelectors.push( selectors[ k ] );
+				}
+			}
+			if( criticalSelectors.length ){
+				return criticalSelectors.join(",") + rule.cssText.match( /\{.+/ );
+			}
+			else {
+				return false;
+			}
+		};
+
+		sheets = Array.prototype.filter.call(sheets, removeNull);
+
+		for( var i = 0, l = sheets.length; i < l; i++ ){
+			var sheet = sheets[ i ],
+				href = sheet.href,
+				rules = sheet.rules;
+
+				rules = Array.prototype.filter.call( rules, removeNull );
+
+			if( url && href && href.indexOf( url ) > -1 ){
+				for( var j = 0, rl = rules.length; j < rl; j++ ){
+
+					var media = rules[ j ].media,
+						matchingRules = [];
+					if( media && opts.matchMedia( media.mediaText ).matches ){
+						var innerRules = rules[ j ].rules;
+						for( var k in innerRules ){
+							critCSSText = aboveFold( innerRules[ k ] );
+							if( critCSSText ){
+								matchingRules.push( critCSSText );
+							}
+						}
+						if( matchingRules.length ){
+							matchingRules.unshift( "@media " + media.mediaText + "{" );
+							matchingRules.push( "}" );
+						}
+
+					} else if( !media ){
+						critCSSText = aboveFold( rules[ j ] );
+						if( critCSSText && !critCSSText.match(/^\s+$/) ){
+							matchingRules.push( critCSSText );
+						}
+					}
+					critical.push( matchingRules.join( "\n" ) );
+				}
+
+			}
+		}
+		return critical.join( "\n" );
+	};
+
+	exports.criticalCSS = criticalCSS;
+
+}(typeof exports === 'object' && exports || this));

lib/criticalrunner.js

@@ -0,0 +1,85 @@
+/*global phantom:true*/
+/*global require:true*/
+/*global window:true*/
+
+/*
+phantom args sent from critical.js:
+	[0] - url
+	[1] - filename
+	[2] - output filepath
+	[3] - width of page
+	[4] - height of page
+*/
+(function(){
+	"use strict";
+
+	var site = phantom.args[0],
+		filename = phantom.args[1],
+		output = phantom.args[2],
+		width = phantom.args[3],
+		height = phantom.args[4];
+		
+
+	var system = require( "system" );
+	var fs = require( "fs" );
+
+	var errorHandler = function(msg, trace) {
+		var msgStack = ['PHANTOM ERROR: ' + msg];
+		if (trace && trace.length) {
+			msgStack.push('TRACE:');
+			trace.forEach(function(t) {
+				msgStack.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line + (t.function ? ' (in function ' + t.function +')' : ''));
+			});
+		}
+		system.stderr.write( msgStack.join('\n') );
+		phantom.exit(1);
+	};
+
+
+	var page = require( "webpage" ).create();
+	var cc = require( "./criticalCSS" );
+
+	phantom.onError = errorHandler;
+	page.onError = errorHandler;
+
+
+	page.viewportSize = {  width: width , height: height };
+
+	page.open(  site, function( status ){
+		if( status === "success" ){
+			var stylesheets = page.evaluate(function(){
+				return window.document.styleSheets;
+			});
+
+			var maxTop = page.evaluate(function(){
+				return window.innerHeight;
+			});
+
+			var opts = {
+				sheets: stylesheets,
+				maxTop: maxTop,
+				querySelector: function( selector ){
+					return page.evaluate( function(s){
+						return window.document.querySelector( s );
+					}, selector );
+				},
+				matchMedia: function( query ){
+					return page.evaluate( function(q){
+						return window.matchMedia( q );
+					}, query );
+				}
+			};
+
+			var crit = cc.criticalCSS( filename, opts );
+			if( crit.length === 0 ){
+				throw new Error( "criticalCSS didn't run or no critical css, that seems unlikely" );
+			} else {
+				fs.write(output, crit, 'w');
+				phantom.exit();
+			}
+		} else {
+			throw new Error( "Page didn't open" );
+		}
+	});
+
+}());

package.json

@@ -0,0 +1,42 @@
+{
+	"name": "CriticalCSS",
+	"description": "Finds the Above the Fold CSS for your page, and outputs it into a file",
+	"version": "0.6.0",
+	"homepage": "https://github.com/filamentgroup/criticalcss",
+	"author": {
+		"name": "Scott Jehl/Jeffrey Lembeck/Filament Group",
+		"email": "hello@filamentgroup.com",
+		"url": "http://filamentgroup.com"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/filamentgroup/criticalcss.git"
+	},
+	"bugs": {
+		"url": "https://github.com/filamentgroup/criticalcss/issues"
+	},
+	"licenses": [
+		{
+			"type": "MIT",
+			"url": "https://github.com/filamentgroup/criticalcss/blob/master/LICENSE-MIT"
+		}
+	],
+	"engines": {
+		"node": ">= 0.10.0"
+	},
+	"scripts": {
+		"test": "grunt nodeunit"
+	},
+	"dependencies": {
+		"phantomjs": "1.9.7-9"
+	},
+	"devDependencies": {
+		"grunt-contrib-jshint": "~0.1.1",
+		"grunt-contrib-nodeunit": "~0.1.2",
+		"grunt-contrib-qunit": "~0.3.0",
+		"grunt-contrib-watch": "~0.2.0",
+		"grunt": "~0.4.5",
+		"phantom-unit": "0.1.1"
+	},
+	"keywords": []
+}

test/files/all.css

@@ -0,0 +1,7 @@
+h1 {
+	font-size: 2em;
+}
+p {
+	font-size: 1.5em;
+	font-weight: bold;
+}

test/files/test-site.html

@@ -0,0 +1,10 @@
+<html>
+	<head>
+		<title>Test Page for CriticalCSS</title>
+		<link href="./all.css" rel="stylesheet" />
+	</head>
+	<body>
+		<h1>Hi</h1>
+		<p>This is some content</p>
+	</body>
+</html>