critical-path-css-rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c7c88b5a77a5230fc8b1f7d39cedb1fb818bc786
+  data.tar.gz: f7ba36dd7fe8c3392745205be27647b2a93bda70
+SHA512:
+  metadata.gz: 3101d6628e5433b0d236a4541b68f1dd9d6b46f7e22b5d7b638216c6f07bf4697c6ebd7b4105bd01e2d19296f40bd389ed59c39d77dac911455422cea824fc3d
+  data.tar.gz: 6dc6cc6732ed93a6932dc9288ac0acb81d82cf0806343e60ffdee71c5b729243113ce699a6356896409d99c85193f70c062197eda9ec71610148826c8ccfe557

data/.gitignore

@@ -0,0 +1,19 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+
+.DS_Store

data/.rubocop.yml

@@ -0,0 +1,12 @@
+inherit_from: .rubocop_todo.yml
+
+AllCops:
+  Exclude:
+    - '*.gemspec'
+    - 'spec/*_helper.rb'
+    - 'Gemfile'
+    - 'Rakefile'
+    - 'Vagrantfile'
+
+Documentation:
+    Enabled: false

data/.rubocop_todo.yml

@@ -0,0 +1,12 @@
+# This configuration was generated by
+# `rubocop --auto-gen-config`
+# on 2015-09-19 12:37:55 -0500 using RuboCop version 0.34.1.
+# The point is for the user to remove these configuration records
+# one by one as the offenses are removed from the code base.
+# Note that changes in the inspected code, or installation of new
+# versions of RuboCop, may require this file to be generated again.
+
+# Offense count: 2
+# Configuration parameters: AllowURI, URISchemes.
+Metrics/LineLength:
+  Max: 91

data/BACKLOG.md

@@ -0,0 +1,10 @@
+# Backlog
+
+## Tests
+- Add a testing suite (preferably rspec)
+
+## Features
+- Allow the user to pass arguments to Penthouse.js, i.e. Viewport size, etc. For a list of the configurable options, please see [Penthouse](https://github.com/pocketjoso/penthouse)
+- Improve installation process, if necessary
+- Improve manual processes, if possible (i.e having to run the rake task to generate the the critical CSS)
+- Improve implementation. Is their a better solution then using Rails.cache?

data/Gemfile

@@ -0,0 +1,4 @@
+# A sample Gemfile
+source "https://rubygems.org"
+
+gem 'rubocop', require: false

data/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) [2015] [Mudbug Media, Michael Misshore]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,97 @@
+# critical-path-css-rails
+
+Only load the CSS you need for the initial viewport in Rails!
+
+This gem give you the ability to load only the CSS you *need* on an initial page view. This gives you blazin' fast rending as there's no initial network call to grab your application's CSS.
+
+This gem assumes that you'll load the rest of the CSS asyncronously. At the moment, the suggested way is to use the [loadcss-rails](https://github.com/michael-misshore/loadcss-rails) gem.
+
+This gem uses [PhantomJS](https://github.com/colszowka/phantomjs-gem) and [Penthouse](https://github.com/pocketjoso/penthouse) to generate the critical CSS.
+
+
+## Installation
+
+Add `critical-path-css-rails` to your Gemfile:
+
+```
+gem 'critical-path-css-rails', '~> 0.1.0'
+```
+
+Download and install by running:
+
+```
+bundle install
+```
+
+Create the rake task that will generate your critical CSS
+
+```
+rails generator critical_path_css:install
+```
+
+This adds the following file:
+
+* `lib/tasks/critical_path_css.rake`
+
+
+## Usage
+
+First, you'll need to configue a few variables in the rake task: `lib/tasks/critical_path_css.rake`
+
+* `@base_url`: Change the url's here to match your Production and Development base URL, respectively.
+* `@routes`: List the routes that you would like to generate the critical CSS for. (i.e. /resources, /resources/show/1, etc.)
+* `@main_css_path`: Inside of the generate task, you'll need to define the path to the application's main CSS. The gem assumes your CSS lives in `RAILS_ROOT/public`. If your main CSS file is in `RAILS_ROOT/public/assets/main.css`, you would set the variable to `/assets/main.css`.
+
+
+Before generating the CSS, ensure that your application is running (viewable from a browser) and the main CSS file exists. Then in a separate tab, run the rake task to generate the critical CSS.
+
+If your main CSS file does not already exist, and you are using the Asset Pipeline, generate the main CSS file.
+```
+rake assets:precompile
+```
+Generate the critical path CSS:
+```
+rake critical_path_css:generate
+```
+
+
+To load the generated critical CSS into your layout, in the head tag, insert:
+
+```html
+<style>
+  <%= CriticalPathCss.fetch(request.path) %>
+</style>
+```
+
+A simple example using loadcss-rails looks like:
+
+```html
+<style>
+    <%= CriticalPathCss.fetch(request.path) %>
+</style>
+<script>
+    loadCSS("<%= stylesheet_path('application') %>");
+</script>
+<noscript>
+    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
+</noscript>
+```
+
+
+## Versions
+
+The critical-path-css-rails gem follows these version guidelines:
+
+```
+patch version bump = updates to critical-path-css-rails and patch-level updates to Penthouse and PhantomJS
+minor version bump = minor-level updates to critical-path-css-rails, Penthouse, and PhantomJS
+major version bump = major-level updates to critical-path-css-rails, Penthouse, PhantomJS, and updates to Rails which may be backwards-incompatible
+```
+
+## Contributing
+
+Feel free to open an issue ticket if you find something that could be improved. A couple notes:
+
+* If the Penthouse.js script is outdated (i.e. maybe a new version of Penthouse.js was released yesterday), feel free to open an issue and prod us to get that thing updated. However, for security reasons, we won't be accepting pull requests with updated Penthouse.js script.
+
+Copyright Mudbug Media and Michael Misshore, released under the MIT License.

data/critical-path-css-rails.gemspec

@@ -0,0 +1,18 @@
+require File.expand_path('../lib/critical_path_css/rails/version', __FILE__)
+
+Gem::Specification.new do |s|
+  s.name        = 'critical-path-css-rails'
+  s.version     = CriticalPathCSS::Rails::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ['Michael Misshore']
+  s.email       = 'mmisshore@gmail.com'
+  s.summary     = 'Critical Path CSS for Rails!'
+  s.description = 'Only load the CSS you need for the initial viewport in Rails!'
+  s.license     = 'MIT'
+
+  s.add_runtime_dependency 'phantomjs', ['~> 1.9']
+
+  s.files        = `git ls-files`.split("\n")
+  s.executables  = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
+  s.require_path = 'lib'
+end

data/lib/critical_path_css/rails/engine.rb

@@ -0,0 +1,6 @@
+module CriticalPathCss
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/critical_path_css/rails/version.rb

@@ -0,0 +1,6 @@
+module CriticalPathCSS
+  module Rails
+    VERSION = '0.1.0'
+    PENTHOUSE_VERSION = '0.3.4'
+  end
+end

data/lib/critical_path_css_rails.rb

@@ -0,0 +1,19 @@
+module CriticalPathCss
+  require 'phantomjs'
+
+  CACHE_NAMESPACE = 'critical-path-css'
+  PENTHOUSE_PATH = "#{File.dirname(__FILE__)}/penthouse/penthouse.js"
+
+  def self.generate(main_css_path, base_url, routes)
+    full_main_css_path = "#{Rails.root}/public#{main_css_path}"
+
+    routes.each do |route|
+      css = Phantomjs.run(PENTHOUSE_PATH, base_url + route, full_main_css_path)
+      Rails.cache.write(route, css, namespace: CACHE_NAMESPACE)
+    end
+  end
+
+  def self.fetch(route)
+    Rails.cache.read(route, namespace: CACHE_NAMESPACE) || ''
+  end
+end

data/lib/generators/critical_path_css/install_generator.rb

@@ -0,0 +1,13 @@
+require 'rails/generators'
+
+module CriticalPathCss
+  class InstallGenerator < Rails::Generators::Base
+    source_root File.expand_path('..', __FILE__)
+
+    # Copy the needed rake task for generating critical CSS
+    def copy_rake_task
+      task_filename = 'critical_path_css.rake'
+      copy_file "../../tasks/#{task_filename}", "lib/tasks/#{task_filename}"
+    end
+  end
+end

data/lib/penthouse/penthouse.js

@@ -0,0 +1,601 @@
+/*
+Penthouse CSS Critical Path Generator
+https://github.com/pocketjoso/penthouse
+Author: Jonas Ohlsson
+License: MIT
+Version: 0.3.4
+
+USAGE:
+    phantomjs penthouse.js [options] <URL to page> <CSS file>
+    Options:
+    --width <width>      The viewport width in pixels. Defaults to 1300
+    --height <height>    The viewport height in pixels. Defaults to 900
+
+    to run on HTTPS sites two flags must be passed in, directly after phantomjs in the call:
+    --ignore-ssl-errors=true --ssl-protocol=tlsv1
+
+DEPENDENCIES
+    + "phantomjs" : "~1.9.7"
+
+*/
+
+
+(function() { "use strict";
+/*
+ * parser for the script - can be used both for the standalone node binary and the phantomjs script
+ */
+
+/*jshint unused:false*/
+
+var usageString = '[--width <width>] [--height <height>] <url> <main.css>';
+
+function buildError(msg, problemToken, args) {
+    var error = new Error(msg + problemToken);
+    error.token = problemToken;
+    error.args = args;
+    throw error;
+}
+
+// Parses the arguments passed in
+// @returns { width, height, url, css }
+// throws an error on wrong options or parsing error
+function parseOptions(argsOriginal) {
+    var args = argsOriginal.slice(0),
+        validOptions = ['--width', '--height'],
+        parsed = {},
+        val,
+        len = args.length,
+        optIndex,
+        option;
+
+    if (len < 2) buildError('Not enough arguments, ', args);
+
+    while (args.length > 2 && args[0].match(/^(--width|--height)$/)) {
+        optIndex = validOptions.indexOf(args[0]);
+        if (optIndex === -1) buildError('Logic/Parsing error ', args[0], args);
+
+        // lose the dashes
+        option = validOptions[optIndex].slice(2);
+        val = args[1];
+
+        parsed[option] = parseInt(val, 10);
+        if (isNaN(parsed[option])) buildError('Parsing error when parsing ', val, args);
+
+        // remove the two parsed arguments from the list
+        args = args.slice(2);
+    }
+    parsed.url = args[0];
+    parsed.css = args[1];
+
+    if (!parsed.url) {
+        buildError('Missing url/path to html file', '', args);
+    }
+
+    if (!parsed.css) {
+        buildError('Missing css file', '', args);
+    }
+
+
+    return parsed;
+}
+
+if (typeof module !== 'undefined') {
+    module.exports = exports = {
+        parse: parseOptions,
+        usage: usageString
+    };
+}
+/*
+module for removing unused fontface rules - can be used both for the standalone node binary and the phantomjs script
+*/
+/*jshint unused:false*/
+
+function unusedFontfaceRemover (css){
+  var toDeleteSections = [];
+
+  //extract full @font-face rules
+  var fontFaceRegex = /(@font-face[ \s\S]*?\{([\s\S]*?)\})/gm,
+    ff;
+
+  while ((ff = fontFaceRegex.exec(css)) !== null) {
+
+    //grab the font name declared in the @font-face rule
+    //(can still be in quotes, f.e. 'Lato Web'
+    var t = /font-family[^:]*?:[ ]*([^;]*)/.exec(ff[1]);
+    if (typeof t[1] === 'undefined')
+      continue; //no font-family in @fontface rule!
+
+    //rm quotes
+    var fontName = t[1].replace(/['"]/gm, '');
+
+    // does this fontname appear as a font-family or font (shorthand) value?
+    var fontNameRegex = new RegExp('([^{}]*?){[^}]*?font(-family)?[^:]*?:[^;]*' + fontName + '[^,;]*[,;]', 'gmi');
+
+
+    var fontFound = false,
+      m;
+
+    while ((m = fontNameRegex.exec(css)) !== null) {
+      if (m[1].indexOf('@font-face') === -1) {
+        //log('FOUND, keep rule');
+        fontFound = true;
+        break;
+      }
+    }
+    if (!fontFound) {
+      //NOT FOUND, rm!
+
+      //can't remove rule here as it will screw up ongoing while (exec ...) loop.
+      //instead: save indices and delete AFTER for loop
+      var closeRuleIndex = css.indexOf('}', ff.index);
+      //unshift - add to beginning of array - we need to remove rules in reverse order,
+      //otherwise indeces will become incorrect again.
+      toDeleteSections.unshift({
+        start: ff.index,
+        end: closeRuleIndex + 1
+      });
+    }
+  }
+  //now delete the @fontface rules we registed as having no matches in the css
+  for (var i = 0; i < toDeleteSections.length; i++) {
+    var start = toDeleteSections[i].start,
+      end = toDeleteSections[i].end;
+    css = css.substring(0, start) + css.substring(end);
+  }
+
+  return css;
+};
+
+
+
+if(typeof module !== 'undefined') {
+    module.exports = unusedFontfaceRemover;
+}
+/*jshint unused:false*/
+
+/* === preFormatCSS ===
+ * preformats the css to ensure we won't run into and problems in our parsing
+ * removes comments (actually would be anough to remove/replace {} chars.. TODO
+ * replaces } char inside content: '' properties.
+ */
+
+function cssPreformatter (css){
+  //remove comments from css (including multi-line coments)
+  css = css.replace(/\/\*[\s\S]*?\*\//g, '');
+
+  //replace Windows \r\n with \n,
+  //otherwise final output might get converted into /r/r/n
+  css = css.replace(/\r\n/gm, '\n');
+
+  //we also need to replace eventual close curly bracket characters inside content: '' property declarations, replace them with their ASCI code equivalent
+  //\7d (same as:   '\' + '}'.charCodeAt(0).toString(16)  );
+
+  var m,
+    regexP = /(content\s*:\s*['"][^'"]*)}([^'"]*['"])/gm,
+    matchedData = [];
+
+  //for each content: '' rule that contains at least one end bracket ('}')
+  while ((m = regexP.exec(css)) !== null) {
+    //we need to replace ALL end brackets in the rule
+    //we can't do it in here, because it will mess up ongoing exec, store data and do after
+
+    //unshift - add to beginning of array - we need to remove rules in reverse order,
+    //otherwise indeces will become incorrect.
+    matchedData.unshift({
+      start: m.index,
+      end: m.index + m[0].length,
+      replaceStr: m[0].replace(/\}/gm, '\\7d')
+    });
+  }
+
+  for (var i = 0; i < matchedData.length; i++) {
+    var item = matchedData[0];
+    css = css.substring(0, item.start) + item.replaceStr + css.substring(item.end);
+  }
+
+  return css;
+};
+
+if(typeof module !== 'undefined') {
+    module.exports = cssPreformatter;
+}
+var standaloneMode = true;
+'use strict';
+var standaloneMode = standaloneMode || false;
+
+var page = require('webpage').create(),
+  fs = require('fs'),
+  system = require('system'),
+  DEBUG = false,
+  stdout = system.stdout; // for using this as a file
+
+var combineArgsString = function(argsArr) {
+  return [].join.call(argsArr, ' ') + '\n';
+};
+
+// monkey patch for directing errors to stderr
+// https://github.com/ariya/phantomjs/issues/10150#issuecomment-28707859
+var errorlog = function() {
+  system.stderr.write(combineArgsString(arguments));
+};
+
+var debug = function() {
+  if (DEBUG) errorlog('DEBUG: ' + combineArgsString(arguments));
+};
+
+// discard stdout from phantom exit;
+var phantomExit = function(code) {
+  if (page) {
+    page.close();
+  }
+  setTimeout(function() {
+    phantom.exit(code);
+  }, 0);
+};
+
+//don't confuse analytics more than necessary when visiting websites
+page.settings.userAgent = 'Penthouse Critical Path CSS Generator';
+
+/* prevent page JS errors from being output to final CSS */
+page.onError = function(msg, trace) {
+  //do nothing
+};
+
+page.onResourceError = function(resourceError) {
+  page.reason = resourceError.errorString;
+  page.reason_url = resourceError.url;
+};
+
+var main = function(options) {
+  debug('main(): ', JSON.stringify(options));
+//final cleanup
+//remove all empty rules, and remove leading/trailing whitespace
+  try {
+    var f = fs.open(options.css, 'r');
+
+    //preformat css
+    var cssPreformat;
+    if (standaloneMode) {
+      cssPreformat = cssPreformatter;
+    } else {
+      cssPreformat = require('./css-preformatter.js');
+    }
+    options.css = cssPreformat(f.read());
+  } catch (e) {
+    errorlog(e);
+    phantomExit(1);
+  }
+
+  // start the critical path CSS generation
+  getCriticalPathCss(options);
+};
+
+function cleanup(css) {
+  //remove all animation rules, as keyframes have already been removed
+  css = css.replace(/(-webkit-|-moz-|-ms-|-o-)?animation[ ]?:[^;{}]*;/gm, '');
+  //remove all empty rules, and remove leading/trailing whitespace
+  return css.replace(/[^{}]*\{\s*\}/gm, '').trim();
+}
+
+/* Final function
+ * Get's called from getCriticalPathCss when CSS extraction from page is done*/
+page.onCallback = function(css) {
+  debug('phantom.onCallback');
+
+  try {
+    if (css) {
+      // we are done - clean up the final css
+      var finalCss = cleanup(css);
+
+      // remove unused @fontface rules
+      var ffRemover;
+      if (standaloneMode) {
+        ffRemover = unusedFontfaceRemover;
+      } else {
+        ffRemover = require('./unused-fontface-remover.js');
+      }
+      finalCss = ffRemover(finalCss);
+
+      if(finalCss.trim().length === 0){
+        errorlog('Note: Generated critical css was empty for URL: ' + options.url);
+      }
+
+      // return the critical css!
+      stdout.write(finalCss);
+      phantomExit(0);
+    } else {
+      // No css. This is not an error on our part
+      // but still safer to warn the end user, in case they made a mistake
+      errorlog('Note: Generated critical css was empty for URL: ' + options.url);
+      // for consisteny, still generate output (will be empty)
+      stdout.write(css);
+      phantomExit(0);
+    }
+
+  } catch (ex) {
+    debug('phantom.onCallback -> error', ex);
+    errorlog('error: ' + ex);
+    phantomExit(1);
+  }
+};
+
+/*
+ * Tests each selector in css file at specified resolution,
+ * to see if any such elements appears above the fold on the page
+ * modifies CSS - removes selectors that don't appear, and empty rules
+ *
+ * @param options.url the url as a string
+ * @param options.css the css as a string
+ * @param options.width the width of viewport
+ * @param options.height the height of viewport
+ ---------------------------------------------------------*/
+function getCriticalPathCss(options) {
+  debug('getCriticalPathCss():', JSON.stringify(options));
+
+  page.viewportSize = {
+    width: options.width,
+    height: options.height
+  };
+
+  page.open(options.url, function(status) {
+    if (status !== 'success') {
+      errorlog('Error opening url \'' + page.reason_url + '\': ' + page.reason);
+      phantomExit(1);
+    } else {
+
+      debug('Starting sandboxed evaluation of CSS\n', options.css);
+      // sandboxed environments - no outside references
+      // arguments and return value must be primitives
+      // @see http://phantomjs.org/api/webpage/method/evaluate.html
+      page.evaluate(function sandboxed(css) {
+        var h = window.innerHeight,
+          renderWaitTime = 100, //ms TODO: user specifiable through options object
+          finished = false,
+          currIndex = 0,
+          forceRemoveNestedRule = false;
+
+        //split CSS so we can value the (selector) rules separately.
+        //but first, handle stylesheet initial non nested @-rules.
+        //they don't come with any associated rules, and should all be kept,
+        //so just keep them in critical css, but don't include them in split
+        var splitCSS = css.replace(/@(import|charset|namespace)[^;]*;/g, '');
+        var split = splitCSS.split(/[{}]/g);
+
+        var getNewValidCssSelector = function(i) {
+          var newSel = split[i];
+          /* HANDLE Nested @-rules */
+
+          /*Case 1: @-rule with CSS properties inside [REMAIN]
+            Can't remove @font-face rules here, don't know if used or not.
+            Another check at end for this purpose.
+          */
+          if (/@(font-face)/gi.test(newSel)) {
+            //skip over this rule
+            currIndex = css.indexOf('}', currIndex) + 1;
+            return getNewValidCssSelector(i + 2);
+          }
+          /*Case 2: @-rule with CSS properties inside [REMOVE]
+            @page
+            This case doesn't need any special handling,
+            as this "selector" won't match anything on the page,
+            and will therefor be removed, together with it's css props
+          */
+
+          /*Case 4: @-rule with full CSS (rules) inside [REMOVE]
+            @media print|speech|aural, @keyframes
+            Delete this rule and all its contents - doesn't belong in critical path CSS
+          */
+          else if (/@(media (print|speech|aural)|(([a-z\-])*keyframes))/gi.test(newSel)) {
+            //force delete on child css rules
+            forceRemoveNestedRule = true;
+            return getNewValidCssSelector(i + 1);
+          }
+
+          /*Case 3: @-rule with full CSS (rules) inside [REMAIN]
+            This test is executed AFTER Case 4,
+            since we here match every remaining @media,
+            after @media print has been removed by Case 4 rule)
+            - just skip this particular line (i.e. keep), and continue checking the CSS inside as normal
+          */
+          else if (/@(media|(-moz-)?document|supports)/gi.test(newSel)) {
+            return getNewValidCssSelector(i + 1);
+          }
+          /*
+            Resume normal execution after end of @-media rule with inside CSS rules (Case 3)
+            Also identify abrupt file end.
+          */
+          else if (newSel.trim().length === 0) {
+            //abrupt file end
+            if (i + 1 >= split.length) {
+              //end of file
+              finished = true;
+              return false;
+            }
+            //end of @-rule (Case 3)
+            forceRemoveNestedRule = false;
+            return getNewValidCssSelector(i + 1);
+          }
+          return i;
+        };
+
+        var removeSelector = function(sel, selectorsKept) {
+          var selPos = css.indexOf(sel, currIndex);
+
+          //check what comes next: { or ,
+          var nextComma = css.indexOf(',', selPos);
+          var nextOpenBracket = css.indexOf('{', selPos);
+
+          if (selectorsKept > 0 || (nextComma > 0 && nextComma < nextOpenBracket)) {
+            //we already kept selectors from this rule, so rule will stay
+
+            //more selectors in selectorList, cut until (and including) next comma
+            if (nextComma > 0 && nextComma < nextOpenBracket) {
+              css = css.substring(0, selPos) + css.substring(nextComma + 1);
+            }
+            //final selector, cut until open bracket. Also remove previous comma, as the (new) last selector should not be followed by a comma.
+            else {
+              var prevComma = css.lastIndexOf(',', selPos);
+              css = css.substring(0, prevComma) + css.substring(nextOpenBracket);
+            }
+          } else {
+            //no part of selector (list) matched elements above fold on page - remove whole rule CSS rule
+            var endRuleBracket = css.indexOf('}', nextOpenBracket);
+
+            css = css.substring(0, selPos) + css.substring(endRuleBracket + 1);
+          }
+        };
+
+
+        var processCssRules = function() {
+          for (var i = 0; i < split.length; i = i + 2) {
+            //step over non DOM CSS selectors (@-rules)
+            i = getNewValidCssSelector(i);
+
+            //reach end of CSS
+            if (finished) {
+              //call final function to exit outside of phantom evaluate scope
+              window.callPhantom(css);
+            }
+
+            var fullSel = split[i];
+            //fullSel can contain combined selectors
+            //,f.e.  body, html {}
+            //split and check one such selector at the time.
+            var selSplit = fullSel.split(',');
+            //keep track - if we remove all selectors, we also want to remove the whole rule.
+            var selectorsKept = 0;
+            var aboveFold;
+
+            for (var j = 0; j < selSplit.length; j++) {
+              var sel = selSplit[j];
+
+              //some selectors can't be matched on page.
+              //In these cases we test a slightly modified selectors instead, temp.
+              var temp = sel;
+
+              if (sel.indexOf(':') > -1) {
+                //handle special case selectors, the ones that contain a semi colon (:)
+                //many of these selectors can't be matched to anything on page via JS,
+                //but that still might affect the above the fold styling
+
+                //these psuedo selectors depend on an element,
+                //so test element instead (would do the same for f.e. :hover, :focus, :active IF we wanted to keep them for critical path css, but we don't)
+                temp = temp.replace(/(:?:before|:?:after)*/g, '');
+
+                //if selector is purely psuedo (f.e. ::-moz-placeholder), just keep as is.
+                //we can't match it to anything on page, but it can impact above the fold styles
+                if (temp.replace(/:[:]?([a-zA-Z0-9\-\_])*/g, '').trim().length === 0) {
+                  currIndex = css.indexOf(sel, currIndex) + sel.length;
+                  selectorsKept++;
+                  continue;
+                }
+
+                //handle browser specific psuedo selectors bound to elements,
+                //Example, button::-moz-focus-inner, input[type=number]::-webkit-inner-spin-button
+                //remove browser specific pseudo and test for element
+                temp = temp.replace(/:?:-[a-z-]*/g, '');
+              }
+
+              if (!forceRemoveNestedRule) {
+                //now we have a selector to test, first grab any matching elements
+                var el;
+                try {
+                  el = document.querySelectorAll(temp);
+                } catch (e) {
+                  //not a valid selector, remove it.
+                  removeSelector(sel, 0);
+                  continue;
+                }
+
+                //check if selector matched element(s) on page..
+                aboveFold = false;
+
+                for (var k = 0; k < el.length; k++) {
+                  var testEl = el[k];
+                  //temporarily force clear none in order to catch elements that clear previous content themselves and who w/o their styles could show up unstyled in above the fold content (if they rely on f.e. 'clear:both;' to clear some main content)
+                  testEl.style.clear = 'none';
+
+                  //check to see if any matched element is above the fold on current page
+                  //(in current viewport size)
+                  if (testEl.getBoundingClientRect().top < h) {
+                    //then we will save this selector
+                    aboveFold = true;
+                    selectorsKept++;
+
+                    //update currIndex so we only search from this point from here on.
+                    currIndex = css.indexOf(sel, currIndex);
+
+                    //set clear style back to what it was
+                    testEl.style.clear = '';
+                    //break, because matching 1 element is enough
+                    break;
+                  }
+                  //set clear style back to what it was
+                  testEl.style.clear = '';
+                }
+              } else {
+                aboveFold = false;
+              } //force removal of selector
+
+              //if selector didn't match any elements above fold - delete selector from CSS
+              if (aboveFold === false) {
+                //update currIndex so we only search from this point from here on.
+                currIndex = css.indexOf(sel, currIndex);
+                //remove seletor (also removes rule, if nnothing left)
+                removeSelector(sel, selectorsKept);
+              }
+            }
+            //if rule stayed, move our cursor forward for matching new selectors
+            if (selectorsKept > 0) {
+              currIndex = css.indexOf('}', currIndex) + 1;
+            }
+          }
+
+          //we're done - call final function to exit outside of phantom evaluate scope
+          window.callPhantom(css);
+        };
+
+        //give some time (renderWaitTime) for sites like facebook that build their page dynamically,
+        //otherwise we can miss some selectors (and therefor rules)
+        //--tradeoff here: if site is too slow with dynamic content,
+        //  it doesn't deserve to be in critical path.
+        setTimeout(processCssRules, renderWaitTime);
+
+      }, options.css);
+    }
+  });
+}
+
+var parser, parse, usage, options;
+
+// test to see if we are running as a standalone script
+// or as part of the node module
+if (standaloneMode) {
+  parse = parseOptions;
+  usage = usageString;
+} else {
+  parser = require('../options-parser');
+  parse = parser.parse;
+  usage = parser.usage;
+}
+
+try {
+  options = parse(system.args.slice(1));
+} catch (ex) {
+
+    errorlog('Caught error parsing arguments: ' + ex.message);
+
+    // the usage string does not make sense to show if running via Node
+    if(standaloneMode) {
+        errorlog('\nUsage: phantomjs penthouse.js ' + usage);
+    }
+
+  phantomExit(1);
+}
+
+// set defaults
+if (!options.width) options.width = 1300;
+if (!options.height) options.height = 900;
+
+main(options);
+})();

data/lib/tasks/critical_path_css.rake

@@ -0,0 +1,15 @@
+require 'critical_path_css_rails'
+
+namespace :critical_path_css do
+  @base_url = Rails.env.production? ? 'http://example.com' : 'http://localhost:3000'
+  @routes = %w(
+    /
+  )
+
+  desc 'Generate critical CSS for the routes defined'
+  task generate: :environment do
+    @main_css_path = ActionController::Base.helpers.stylesheet_path('application.css').to_s
+
+    CriticalPathCss.generate(@main_css_path, @base_url, @routes)
+  end
+end

metadata

@@ -0,0 +1,71 @@
+--- !ruby/object:Gem::Specification
+name: critical-path-css-rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Michael Misshore
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-09-19 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: phantomjs
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.9'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.9'
+description: Only load the CSS you need for the initial viewport in Rails!
+email: mmisshore@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rubocop.yml"
+- ".rubocop_todo.yml"
+- BACKLOG.md
+- Gemfile
+- LICENSE
+- README.md
+- critical-path-css-rails.gemspec
+- lib/critical_path_css/rails/engine.rb
+- lib/critical_path_css/rails/version.rb
+- lib/critical_path_css_rails.rb
+- lib/generators/critical_path_css/install_generator.rb
+- lib/penthouse/penthouse.js
+- lib/tasks/critical_path_css.rake
+homepage: 
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.8
+signing_key: 
+specification_version: 4
+summary: Critical Path CSS for Rails!
+test_files: []