Merge pull request #50 from filamentgroup/original-definitions

Original definitions

critical.js

@@ -10,6 +10,8 @@
 	var fs = require( "fs" );
 	var os = require( "os" );
 	var postcss = require( "postcss" );
+	var css = require('css');
+	var _ = require("lodash");
 
 	var DEFAULT_BUFFER_SIZE = 800*1024; //had this as the set val before, don't want to break things
 
@@ -165,4 +167,108 @@
 
 	};
 
+	// create a function that can be passed to `map` for a collection of critical
+	// css rules. The function will match original rules against the selector of
+	// the critical css declarations, concatenate them together, and then keep
+	// only the unique ones
+	function replaceDecls(originalRules, check){
+		return function(criticalRule){
+			// restrict the declaration mapping to a certain type of rule, e.g. 'rule'
+			// or 'media'
+			if(check && !check(criticalRule.type)){
+				return criticalRule;
+			}
+
+			// find all the rules in the original CSS that have the same selectors and
+			// then create an array of all the associated declarations. Note that this
+			// works with mutiple duplicate selectors on the original CSS
+			var originalDecls = _.flatten(
+				originalRules
+					.filter(function(rule){
+						return _.isEqual(rule.selectors, criticalRule.selectors);
+					})
+					.map(function(rule){
+						return rule.declarations;
+					})
+			);
+
+			// take all the declarations that were found from the original CSS and use
+			// them here, make sure that we de-dup any declarations from the original CSS
+			criticalRule.declarations =
+				_.uniqBy(criticalRule.declarations.concat(originalDecls),	function(decl){
+					return decl.property + ":" + decl.value;
+				});
+
+			return criticalRule;
+		};
+	}
+
+	var nested = ["media", "supports", "document"];
+
+	exports.restoreOriginalDefs = function(originalCSS, criticalCSS, stringifyOpts){
+		// parse both the original CSS and the critical CSS so we can deal with the
+		// ASTs directly
+		var originalAST = css.parse(originalCSS);
+		var criticalAST = css.parse(criticalCSS);
+
+		var newRules;
+
+		// run two maps over the rules in the critical CSS
+		//
+		// 1. map the top level rules to rules where the declarations are replaced
+		//    by the declarations from the same selectors in the original CSS
+		// 2. map the media query rules to rules where the declarations are replaced
+		//    by the declarations from the same selectors in the same media queries
+		//    in the original CSS
+		newRules = criticalAST
+			.stylesheet
+			.rules
+			// for all the top level rules that are in the criticalCSS AST replace them
+			// with the original rule definitions from the original AST
+			.map(replaceDecls(originalAST.stylesheet.rules, function(ruleType){
+				// only deal with top level rules here
+				return ruleType === "rule";
+			}))
+			// for all the rules that are in media queries match the same media
+			// queries in the original and use the rules from there
+			.map(function(criticalNested){
+				// handle media rules only here
+				if( nested.indexOf(criticalNested.type) == -1){
+					return criticalNested;
+				}
+
+				var type = criticalNested.type;
+
+				// find all the rules that apply for the current media query
+				var originalMediaRules;
+
+				// get all of the rules inside media queries that match the critical
+				// media query media string
+				originalMediaRules = _.flatten(
+					originalAST
+						.stylesheet
+						.rules
+						.filter(function(rule){
+							return rule[type] == criticalNested[type];
+						})
+						.map(function(media){
+							return media.rules;
+						})
+				);
+
+				// replace the declarations in each of the rules for this media query
+				// with the declarations in the original css for the same media query
+				criticalNested.rules = criticalNested
+					.rules
+					.map(replaceDecls(originalMediaRules));
+
+				return criticalNested;
+			});
+
+		criticalAST.stylesheet.rules = newRules;
+
+		// return the CSS as a string
+		return css.stringify(criticalAST, stringifyOpts);
+	};
+
 }(typeof exports === "object" && exports || this));

package.json

@@ -27,6 +27,8 @@
     "test": "node node_modules/.bin/grunt test"
   },
   "dependencies": {
+    "css": "^2.2.1",
+    "lodash": "^4.15.0",
     "phantomjs-prebuilt": "^2.1.3",
     "postcss": "^5.0.19",
     "postcss-initial": "^1.5.1",

test/files/media-critical.css

@@ -0,0 +1,8 @@
+@media (min-width:50em){
+  .bio{font-size:1em;}
+  .bio img{float:left;}
+}
+
+.baz {}
+
+.foo {}

test/files/media-expected.css

@@ -0,0 +1,14 @@
+@media (min-width:50em){
+  .bio{
+    font-size:1em;
+    color: red;
+  }
+  .bio img {
+    float:left;
+    -moz-box-sizing:content-box;
+  }
+}
+
+.baz{font-size:1em;}
+
+.foo{font-size:1em;color:blue;}

test/files/media.css

@@ -0,0 +1,21 @@
+.foo{font-size:1em;}
+.foo{color:blue;}
+.bar{font-size:1em;}
+
+@media (min-width:50em){
+  .bio{font-size:1em;}
+  .bio img {
+    float:left;
+    -moz-box-sizing:content-box;
+  }
+}
+
+@media (min-width:1000em){
+  .bio{font-size:3em;}
+}
+
+.baz{font-size:1em;}
+
+@media (min-width:50em){
+  .bio{color: red;}
+}

test/files/nested-critical.css

@@ -0,0 +1,11 @@
+@media (min-width:50em){
+  .bio{}
+}
+
+@supports (box-shadow:50em){
+  .bio{}
+}
+
+@document url(http://example.com) {
+  .bio{background-color: blue;}
+}

test/files/nested-expected.css

@@ -0,0 +1,11 @@
+@media (min-width:50em){
+  .bio{color: red;}
+}
+
+@supports (box-shadow:50em){
+  .bio{width: 100%;}
+}
+
+@document url(http://example.com) {
+  .bio{background-color: blue;border-size: 1px;}
+}

test/files/nested.css

@@ -0,0 +1,11 @@
+@media (min-width:50em){
+  .bio{color: red;}
+}
+
+@supports (box-shadow:50em){
+  .bio{width: 100%;}
+}
+
+@document url(http://example.com) {
+  .bio{border-size: 1px;}
+}

test/unit/original_definitions_test.js

@@ -0,0 +1,75 @@
+/*global require:true*/
+(function( exports ){
+	"use strict";
+
+	var path = require("path");
+	var critical = require(path.join( "..", "..", "critical.js") );
+	var fs = require("fs");
+
+	function readTestCSSFile(name){
+		return fs
+			.readFileSync(path.join(__dirname, "..", "files", name + ".css"))
+			.toString();
+	}
+
+	function testDefs(test, opts) {
+		test.expect(1);
+
+		var result = critical
+					.restoreOriginalDefs(opts.original, opts.critical, { compress: true })
+					.replace(/\s/g, "");
+
+		test.equal(result, opts.expected.replace(/\s/g, ""));
+		test.done();
+	}
+
+	exports.restoreOriginalDefs = {
+		"adds stripped definitions": function(test) {
+			testDefs(test, {
+				original: "body { color: red; }",
+				critical: "body {}",
+				expected: "body { color:red; }"
+			});
+		},
+
+		"adds muliple stripped definitions": function(test) {
+			testDefs(test, {
+				original: "body { color: red; font-size: 20px; }",
+				critical: "body {}",
+				expected: "body { color:red; font-size:20px; }"
+			});
+		},
+
+		"does not include removed selectors": function(test) {
+			testDefs(test, {
+				original: "body { color: red; } div.removed {}",
+				critical: "body {}",
+				expected: "body { color:red; }"
+			});
+		},
+
+		"includes media queries": function(test) {
+			testDefs(test, {
+				original: "@media (max-width: 600px) { body { color: red; } } @media (max-width: 400px) { body { color: red; } }",
+				critical: "@media (max-width: 600px) { body {} }",
+				expected: "@media (max-width: 600px) { body { color:red; } }"
+			});
+		},
+
+		"includes complex media queries": function(test) {
+			testDefs(test, {
+				original: readTestCSSFile("media"),
+				critical: readTestCSSFile("media-critical"),
+				expected: readTestCSSFile("media-expected")
+			});
+		},
+
+		"includes nested rules": function(test) {
+			testDefs(test, {
+				original: readTestCSSFile("nested"),
+				critical: readTestCSSFile("nested-critical"),
+				expected: readTestCSSFile("nested-expected")
+			});
+		}
+	};
+}(typeof exports === "object" && exports || this));