rails_critical_css_server 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c4cd2623f5163950279fbc582ad3911a2a8604b1
+  data.tar.gz: d36a67e8ef3581e04ee0d6d17a41b16aeea872b2
+SHA512:
+  metadata.gz: fa61e597e5d44d5e20a566cfb2dabd54613fe9218c7b5e9403809d8e2d4bb95b3abc0dda0b97740ccc87310000d223f2b497ec17c0980e4fcacf585320f84180
+  data.tar.gz: cfc51bd5a8dd02dad385c94e24d2382b86a7c314cbee94aec28901551cfed7d56cc5092017a3dc5dc55f3b68427e825523452aa24b358e72b1e88332e6510aee

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2017 Michael Wheeler
+
+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,86 @@
+# RailsCriticalCssServer
+## Eliminate render-blocking CSS in above-the-fold content in your Rails app
+If you've run [Google Pagespeed Insights](https://developers.google.com/speed/pagespeed/insights/) on your web app, you might have seen this message:
+
+> *Eliminate render-blocking JavaScript and CSS in above-the-fold content*
+>
+> Your page has blocking CSS resources. This causes a delay in rendering your page.
+> None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
+
+This is a Ruby on Rails client for [Critical CSS Server](https://github.com/wheeyls/critical-css-server), designed to solve this problem for you outside of your build process.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'rails_critical_css_server'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install rails_critical_css_server
+```
+
+## Usage
+
+In your application layout, just wrap your CSS in a call to `Rewrite`:
+
+    <%= RailsCriticalCssServer::Rewrite.call self do %>
+      <%= stylesheet_link_tag "application" %>
+    <% end %>
+
+Every time a new controller action is rendered, the server will begin to compile the bare-minimum CSS required to
+render the above the fold content on that page. Eventually, once the CSS is available, the critical portion will
+be injected, and the remainder of your CSS will be lazy-loaded with JavaScript.
+
+#### Before CSS is ready:
+
+The header will be rendered normally:
+
+    <link rel="stylesheet" href="/assets/application.css" />
+
+#### After CSS is compiled:
+
+    <style>/* inline css rules injected here... */</style>
+    <script>// loadCSS injected here...</script>
+    <script>loadCSS("/assets/application.css");</script>
+    <noscript>
+      <link rel="stylesheet" href="/assets/application.css" />
+    </noscript>
+
+#### Busting the Cache
+
+Each time CSS is compile, it is cached using the cache key: `[controller, action, version]`.
+
+By default, we used Heroku's environment variable `HEROKU_RELEASE_VERSION` to bust the version cache. This is available
+through the [Heroku Labs: Dyno Metadata](https://devcenter.heroku.com/articles/dyno-metadata).
+
+If this doesn't work for you, set the `version` flag in config to some other deploy-unique id, so that new CSS can be
+generated for you each time you change your pages.
+
+## Configuration Options
+
+In `config/initializers/critical_css_server.rb`:
+
+    RailsCriticalCssServer.config do |c|
+      c.host = ENV['CRITICAL_CSS_SERVER_URL'] # URL of Critical CSS Server
+      c.auth_token = ENV['CRITICAL_CSS_SERVER_AUTH_TOKEN'] # Credentials for Critical CSS Server
+      c.timeout = 0.05 # Timeout when requested critical CSS in layout.
+      c.version = ENV['HEROKU_RELEASE_VERSION'] # Unique id for the current deploy. Used to bust the cache after changes are made
+      c.width = 900 # width of viewport to optimize CSS for
+      c.height = 1200 # height of viewport to optimize CSS for
+      c.force_selectors = [] # force individual selectors to be included, even if they are not rendered on the first pass. Useful for JavaScript-enabled styles.
+    end
+
+## Under the hood:
+
+* [CriticalCSS](https://github.com/filamentgroup/criticalCSS) - used to generate CSS rules
+* [loadCSS](https://github.com/filamentgroup/loadCSS) - defer loading of remainder of CSS
+
+## License
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,36 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'RailsCriticalCssServer'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/views/rails_critical_css_server/_css_load.html.erb

@@ -0,0 +1,14 @@
+<style type='text/css' id='critical-css-server-inlined'>
+  <%= critical_css.html_safe %>
+</style>
+
+<%= render 'rails_critical_css_server/inline_load_css_script' %>
+<script id='critical-css-server-deferred'>
+  <% css_files.each do |href| %>
+    loadCSS("<%= href %>");
+  <% end %>
+</script>
+
+<noscript>
+<%= original_html.html_safe %>
+</noscript>

data/app/views/rails_critical_css_server/_inline_load_css_script.html

@@ -0,0 +1,4 @@
+<script type='application/javascript'>
+/*! loadCSS: load a CSS file asynchronously. [c]2016 @scottjehl, Filament Group, Inc. Licensed MIT */
+!function(e){"use strict";var n=function(n,t,o){function i(e){return a.body?e():void setTimeout(function(){i(e)})}function r(){l.addEventListener&&l.removeEventListener("load",r),l.media=o||"all"}var d,a=e.document,l=a.createElement("link");if(t)d=t;else{var s=(a.body||a.getElementsByTagName("head")[0]).childNodes;d=s[s.length-1]}var f=a.styleSheets;l.rel="stylesheet",l.href=n,l.media="only x",i(function(){d.parentNode.insertBefore(l,t?d:d.nextSibling)});var u=function(e){for(var n=l.href,t=f.length;t--;)if(f[t].href===n)return e();setTimeout(function(){u(e)})};return l.addEventListener&&l.addEventListener("load",r),l.onloadcssdefined=u,u(r),l};"undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!=typeof global?global:this);
+</script>

data/lib/rails_critical_css_server.rb

@@ -0,0 +1,12 @@
+require 'rails_critical_css_server/engine'
+require 'rails_critical_css_server/callable'
+require 'rails_critical_css_server/config'
+require 'rails_critical_css_server/client'
+require 'rails_critical_css_server/extract_css_from_html'
+require 'rails_critical_css_server/rewrite'
+
+module RailsCriticalCssServer
+  def self.config
+    yield RailsCriticalCssServer::Config
+  end
+end

data/lib/rails_critical_css_server/callable.rb

@@ -0,0 +1,7 @@
+module RailsCriticalCssServer
+  module Callable
+    def call(*args, &block)
+      new(*args, &block).call
+    end
+  end
+end

data/lib/rails_critical_css_server/client.rb

@@ -0,0 +1,52 @@
+require 'httparty'
+
+module RailsCriticalCssServer
+  class Client
+    include HTTParty
+    attr_reader :manifest, :key, :url, :token
+
+    NAMESPACE = 'critical-css:'
+
+    def initialize(key, url, manifest, base_uri: Config.host, timeout: Config.timeout, token: Config.auth_token)
+      @key = key
+      @manifest = manifest
+      @url = url
+      @token = token
+      self.class.base_uri base_uri
+      self.class.default_timeout timeout
+    end
+
+    def read!
+      self.class.post('/api/v1/css',
+                      headers: auth.merge(json_headers),
+                      body: { page: page_data, config: Config.read_options }.to_json)
+    rescue => e
+      log_error e
+      nil
+    end
+
+    def page_data
+      { key: full_key, css: manifest, url: url }
+    end
+
+    def log_error(error)
+      Rails.logger.error error
+    end
+
+    private
+
+    def full_key
+      "#{NAMESPACE}:#{key}"
+    end
+
+    def auth
+      {
+        'x-access-token' => token
+      }
+    end
+
+    def json_headers
+      { 'Content-Type' => 'application/json' }
+    end
+  end
+end

data/lib/rails_critical_css_server/config.rb

@@ -0,0 +1,43 @@
+module RailsCriticalCssServer
+  class Config
+    class << self
+      attr_writer :host, :version, :timeout, :force_selectors, :auth_token, :width, :height
+
+      def timeout
+        @timeout ||= 0.05
+      end
+
+      def host
+        @host ||= ENV['CRITICAL_CSS_SERVER_URL']
+      end
+
+      def version
+        @version ||= ENV['HEROKU_RELEASE_VERSION']
+      end
+
+      def auth_token
+        @auth_token ||= ENV['CRITICAL_CSS_SERVER_AUTH_TOKEN']
+      end
+
+      def force_selectors
+        @force_selectors ||= []
+      end
+
+      def width
+        @width ||= 1200
+      end
+
+      def height
+        @height ||= 900
+      end
+
+      def read_options
+        {
+          'forceInclude' => force_selectors,
+          'width' => width,
+          'height' => height
+        }
+      end
+    end
+  end
+end

data/lib/rails_critical_css_server/engine.rb

@@ -0,0 +1,4 @@
+module RailsCriticalCssServer
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/rails_critical_css_server/extract_css_from_html.rb

@@ -0,0 +1,16 @@
+module RailsCriticalCssServer
+  class ExtractCssFromHtml
+    extend Callable
+    attr_reader :html
+
+    def initialize(html)
+      @html = html
+    end
+
+    def call
+      regex = /<link.+href=\"([^"]+\.css[^"]*)\"/
+
+      html.gsub(/<link/, "\n<link").scan(regex).flatten
+    end
+  end
+end

data/lib/rails_critical_css_server/rewrite.rb

@@ -0,0 +1,83 @@
+module RailsCriticalCssServer
+  class Rewrite
+    extend Callable
+
+    attr_reader :template, :manifest, :version, :block, :skip, :cache
+
+    delegate :request, :params, to: :template
+
+    def initialize(template, manifest: template.asset_url('application.css'), version: Config.version, skip: false, cache: true, &block)
+      @template = template
+      @manifest = manifest
+      @version = version
+      @skip = skip
+      @block = block
+      @cache = cache
+    end
+
+    def call
+      return original_html unless should_run?
+      return cached_value if cache && cached_value.present?
+      return original_html unless content_ready?
+
+      Rails.cache.write(self, rewritten_html) if cache
+      rewritten_html
+    end
+
+    def cache_key
+      [version, manifest, key].join(':')
+    end
+
+    private
+
+    def cached_value
+      return @cached_value if defined? @cached_value
+      @cached_value = Rails.cache.read(self)
+    end
+
+    def content
+      @content ||= client.read!
+    end
+
+    def content_ready?
+      content.present? && content.ok?
+    end
+
+    def original_html
+      return @original_html if defined? @original_html
+      @original_html = template.capture { block.call }
+    end
+
+    def rewritten_html
+      return @rewritten_html if defined? @rewritten_html
+      css_files = ExtractCssFromHtml.call(original_html)
+
+      @rewritten_html = template.capture do
+        template.render 'rails_critical_css_server/css_load',
+                        css_files: css_files,
+                        critical_css: content,
+                        original_html: original_html
+      end
+    end
+
+    def should_run?
+      !skip && !phantomjs_useragent? && Config.host.present?
+    end
+
+    def phantomjs_useragent?
+      request.user_agent.match(/PhantomJS/)
+    end
+
+    def client
+      @client ||= Client.new(key, request.original_url, manifest)
+    end
+
+    def key
+      "#{params[:controller]}##{params[:action]}:#{version}"
+    end
+
+    def to_s
+      self.class.to_s
+    end
+  end
+end

data/lib/rails_critical_css_server/version.rb

@@ -0,0 +1,3 @@
+module RailsCriticalCssServer
+  VERSION = '0.1.0'
+end

data/lib/tasks/rails_critical_css_server_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :rails_critical_css_server do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,102 @@
+--- !ruby/object:Gem::Specification
+name: rails_critical_css_server
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Michael Wheeler
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2017-02-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: httparty
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.13.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.13.3
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Client for critical_css_server. This server generates the critical path
+  CSS for you. It is designed to sit alongside your production app, and prepare the
+  critical CSS asynchronously.
+email:
+- mwheeler@g2crowd.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/views/rails_critical_css_server/_css_load.html.erb
+- app/views/rails_critical_css_server/_inline_load_css_script.html
+- lib/rails_critical_css_server.rb
+- lib/rails_critical_css_server/callable.rb
+- lib/rails_critical_css_server/client.rb
+- lib/rails_critical_css_server/config.rb
+- lib/rails_critical_css_server/engine.rb
+- lib/rails_critical_css_server/extract_css_from_html.rb
+- lib/rails_critical_css_server/rewrite.rb
+- lib/rails_critical_css_server/version.rb
+- lib/tasks/rails_critical_css_server_tasks.rake
+homepage: https://github.com/wheeyls/rails_critical_css_server
+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: Prioritize above-the-fold CSS in a Rails application
+test_files: []