rails_critical_css 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: bd4b7e4c280804bf93b6dd1d53781ded82f99b53ecd91e745eed3720c1c8673a
+  data.tar.gz: 98a1ba570526be8b716cd23ee96e081e598b16a477d8cb5940631dffddf4327c
+SHA512:
+  metadata.gz: a38d5c49bf15e78494cf3c19973aa87b3e5f7db39cb6316a74d0d80c97278106f290a4ab6a5b8dfec3effa022489410e6fafedb306bdaef31715cbe18a5fd0f3
+  data.tar.gz: 8a8843bd2855cf7b04a88c44a97d9a08f8c3216bcf72201ca1a69999e65373e45c85187c8dc929a616d85870679723b0492dc98a6eb4ee14ef0688e1510d6191

data/.gitignore

@@ -0,0 +1,67 @@
+*.rbc
+capybara-*.html
+.rspec
+/db/*.sqlite3
+/db/*.sqlite3-journal
+/db/*.sqlite3-[0-9]*
+/public/system
+/coverage/
+/spec/tmp
+*.orig
+rerun.txt
+pickle-email-*.html
+
+# Ignore all logfiles and tempfiles.
+/log/*
+/tmp/*
+!/log/.keep
+!/tmp/.keep
+
+# TODO Comment out this rule if you are OK with secrets being uploaded to the repo
+config/initializers/secret_token.rb
+config/master.key
+
+# Only include if you have production secrets in this file, which is no longer a Rails default
+# config/secrets.yml
+
+# dotenv
+# TODO Comment out this rule if environment variables can be committed
+.env
+
+## Environment normalization:
+/.bundle
+/vendor/bundle
+
+# these should all be checked in to normalize the environment:
+# Gemfile.lock, .ruby-version, .ruby-gemset
+
+# unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
+.rvmrc
+
+# if using bower-rails ignore default bower_components path bower.json files
+/vendor/assets/bower_components
+*.bowerrc
+bower.json
+
+# Ignore pow environment settings
+.powenv
+
+# Ignore Byebug command history file.
+.byebug_history
+
+# Ignore node_modules
+node_modules/
+
+# Ignore precompiled javascript packs
+/public/packs
+/public/packs-test
+/public/assets
+
+# Ignore yarn files
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity
+
+# Ignore uploaded files in development
+/storage/*
+!/storage/.keep

data/Gemfile

@@ -0,0 +1 @@
+source 'https://rubygems.org'

data/Gemfile.lock

@@ -0,0 +1,11 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+
+PLATFORMS
+  x86_64-linux
+
+DEPENDENCIES
+
+BUNDLED WITH
+   2.2.21

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Mateusz Bagiński
+
+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,69 @@
+# rails-critical-css
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/mati365/rails-critical-css?style=flat-square)
+![GitHub issues](https://img.shields.io/github/issues/mati365/rails-critical-css?style=flat-square)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+Generate on demand critical css for component actions with minimum effort.
+
+## Installation
+
+```bash
+gem 'rails_critical_css'
+```
+
+## Usage
+
+Install `penthouse` NPM package in your project. Be sure that node_modules/ directory is present on production builds.
+
+In initializer:
+
+```ruby
+CriticalCssGenerator.config do |c|
+  c.keep_larger_media_queries = true
+  c.height = 19999 # prevent CLS on for example footer
+end
+```
+
+In controller:
+
+```ruby
+  class ExampleController < ApplicationController
+    action_critical_css :show, cache_key: :critical_css_cache_key
+    # or
+    action_critical_css :show, cache_key: -> { 'cache_key' }
+    # or
+    action_critical_css :show, cache_key: 'cache_key'
+
+    ...
+
+    def critical_css_cache_key
+      "some-dynamic-key-#{random_variable}"
+    end
+  end
+```
+
+In template:
+
+```slim
+  = critical_css_asset file: 'some-file-to-be-prepended-to-criticals', critical: true
+  = critical_css_tags
+    link rel="stylesheet" href="css/vendors.css" rel='stylesheet' type='text/css'
+    link rel="stylesheet" href="css/app.css" rel='stylesheet' type='text/css'
+```
+
+## Testing
+
+Enable redis caching on localhost and precompile locally assets. Critical CSS are generated using background job so they are injected to HTML after next requests (it takes around 3s)
+
+## License
+
+The MIT License (MIT)
+Copyright (c) 2021 Mateusz Bagiński
+
+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/Rakefile

@@ -0,0 +1,3 @@
+require 'bundler/gem_tasks'
+
+task :gem => :build

data/lib/critical_css_generator/actions/after_render.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module CriticalCssGenerator::Actions
+  class AfterRender
+    include CriticalCssGenerator::Actions::Helpers
+
+    def initialize(filter_options)
+      @packed_options = filter_options.slice(
+        :css, :cache_key, :cache_store, :cache_prefix
+      )
+    end
+
+    def after(controller)
+      return if controller.critical_css_cache.present?
+
+      @controller = controller
+      options = eval_options(controller, @packed_options)
+      cache_path = gen_critical_css_cache_path(options, options[:cache_key])
+
+      return if cache_path == false
+
+      CriticalCssGenerator::Jobs::Extractor.perform_if_semaphore_is_released(
+        html: controller.full_html_response,
+        cache: {
+          path: cache_path,
+          store: options[:cache_store],
+        },
+        css: {
+          assets: assets_mapped_paths,
+        },
+      )
+    end
+
+    private
+
+      def assets_mapped_paths
+        items = group_assets_by_type(@controller.critical_css_assets)
+        output = items[:inline] || []
+
+        if items[:files]
+          output += items[:files].map do |i|
+            file = Rails.env.development? ? i[:file] : Rails.application.assets_manifest.assets["#{i[:file]}.css"]
+
+            {
+              critical: i[:critical],
+              file: absolute_asset_file_path(@controller, file, 'css')
+            }
+          end
+        end
+
+        output
+      rescue
+        []
+      end
+  end
+end

data/lib/critical_css_generator/actions/before_render.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module CriticalCssGenerator::Actions
+  class BeforeRender
+    include CriticalCssGenerator::Actions::Helpers
+
+    def initialize(filter_options)
+      @packed_options = filter_options.slice(:css, :cache_key, :cache_prefix)
+    end
+
+    def around(controller)
+      @controller = controller
+
+      options = eval_options(controller, @packed_options)
+      cache_path = gen_critical_css_cache_path(options, options[:cache_key])
+
+      # load already compiled css from cache
+      critical_css_cache = cache_path.presence && Rails.cache.read(cache_path)
+      controller.critical_css_cache = critical_css_cache
+      controller.critical_css_enabled = true
+
+      yield
+      return unless css_extracting_allowed?
+
+      if critical_css_cache.present? && critical_css_cache[:lazy_css_blocks].present?
+        controller.response.body = inject_lazy_css_to_footer(critical_css_cache[:lazy_css_blocks])
+      end
+    end
+
+    private
+
+      def css_extracting_allowed?
+        @controller.request.get? \
+          && @controller.response.status == 200 \
+          && @controller.full_html_response.present?
+      end
+
+      def inject_lazy_css_to_footer(css)
+        html = @controller.full_html_response
+        lazy_css_injection_index = html.index('</body>')
+
+        [
+          html[0..lazy_css_injection_index - 1],
+          css,
+          html[lazy_css_injection_index..-1],
+        ].join('')
+      end
+  end
+end

data/lib/critical_css_generator/actions/helpers.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module CriticalCssGenerator::Actions::Helpers
+  def group_assets_by_type(assets)
+    return [] unless assets.present?
+
+    assets.group_by do |item|
+      item[:file].present? ? :files : :inline
+    end
+  end
+
+  def eval_options(controller, packed_options)
+    packed_options.transform_values do |option|
+      eval_option(controller, option)
+    end
+  end
+
+  def eval_option(controller, option)
+    option = option.to_proc if option.is_a?(Symbol)
+
+    if option.is_a?(Proc)
+      case option.arity
+      when -2, -1, 1
+        controller.instance_exec(controller, &option)
+      when 0
+        controller.instance_exec(&option)
+      end
+    elsif option.respond_to?(:call)
+      option.call(controller)
+    else
+      option
+    end
+  end
+
+  def absolute_asset_file_path(controller, asset, extension = nil)
+    return nil unless asset.present?
+
+    suffix = extension ? ".#{extension}" : ''
+    suffixed_asset_name = asset.include?('.') ? asset : asset + suffix
+
+    if Rails.env.development?
+      filename = controller.view_context.asset_path(suffixed_asset_name)
+      File.join(Rails.public_path, filename)
+    else
+      File.join(Rails.public_path, Rails.application.config.assets.prefix, suffixed_asset_name)
+    end
+  end
+
+  def gen_critical_css_cache_path(options, path)
+    return nil unless path
+
+    controller, action = @controller.request.path_parameters.values_at(:controller, :action)
+    path = eval_option(controller, path)
+
+    "#{options[:cache_prefix]}-#{controller}##{action}#{path}"
+  end
+end

data/lib/critical_css_generator/actions.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module CriticalCssGenerator::Actions
+  extend ActiveSupport::Concern
+
+  included do
+    include CriticalCssGenerator::Helpers
+
+    attr_accessor :lazy_css_blocks,
+                  :critical_css_assets,
+                  :critical_css_cache,
+                  :critical_css_enabled
+
+    helper_method :append_critical_css_asset,
+                  :append_css_tags_assets
+  end
+
+  def extract_assets_from_css_tags(str)
+    return [] unless str.present?
+
+    str
+      .scan(/assets\/([^?"]*)-[^?-]+.css/)
+      .flatten
+      .map { |i| i.sub('.self', '') }
+  end
+
+  def append_critical_css_asset(file:, critical: false)
+    (@critical_css_assets ||= []) << {
+      file: file,
+      critical: critical,
+    }
+  end
+
+  def append_css_tags_assets(str)
+    extract_assets_from_css_tags(str).each do |asset|
+      append_critical_css_asset file: asset
+    end
+  end
+
+  def full_html_response
+    response.body
+  end
+
+  class_methods do
+    def action_critical_css(*actions)
+      options = actions.extract_options!
+      return unless cache_configured?
+
+      options[:unless] ||= -> { request.query_string.present? }
+      options[:cache_prefix] ||= 'critical-css'
+
+      filter_options = options.extract!(:if, :unless).merge(only: actions)
+      around_action CriticalCssGenerator::Actions::BeforeRender.new(options), filter_options
+      after_action CriticalCssGenerator::Actions::AfterRender.new(options), filter_options
+    end
+  end
+end

data/lib/critical_css_generator/config.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module CriticalCssGenerator
+  class Config
+    class << self
+      attr_writer :width, :height, :keep_larger_media_queries,
+                  :render_wait_time, :penthouse_options
+
+      def width
+        @width ||= 1200
+      end
+
+      def height
+        @height ||= 900
+      end
+
+      def render_wait_time
+        @render_wait_time ||= 2000
+      end
+
+      def keep_larger_media_queries
+        @keep_larger_media_queries ||= false
+      end
+
+      def as_json_config(props = {})
+        {
+          width: width,
+          height: height,
+          keepLargerMediaQueries: keep_larger_media_queries,
+          renderWaitTime: render_wait_time,
+        }
+          .merge!(@penthouse_options || {})
+          .merge!(props)
+      end
+    end
+  end
+end

data/lib/critical_css_generator/extractor.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module CriticalCssGenerator
+  class Extractor
+    include CriticalCssGenerator::Actions::Helpers
+
+    def initialize(options)
+      @html, @css = options.values_at(:html, :css)
+    end
+
+    def try_extract
+      tmp_html_file = tmp_extractor_file(@html, extension: 'html')
+      tmp_css_file = tmp_concat_assets_array(@css[:assets], extension: 'css')
+      return nil unless tmp_html_file.present? && tmp_css_file.present?
+
+      stdout, stderr = Open3.capture2e(
+        'node lib/critical_css_generator/js/css-extractor.js',
+        stdin_data: Extractor.extractor_process_input(
+          html_path: tmp_html_file.path,
+          css_path: tmp_css_file.path,
+        )
+      )
+
+      if stderr.try(:success?) && !stdout.try(:include?, 'UnhandledPromiseRejectionWarning')
+        [
+          extract_critical_assets(@css[:assets]),
+          stdout.try(:gsub, /src:[^;]+;/, ''),
+        ].join(' ')
+      else
+        nil
+      end
+    rescue
+      nil
+    ensure
+      tmp_html_file&.delete
+      tmp_css_file&.delete
+    end
+
+    def self.extractor_process_input(html_path:, css_path:)
+      config = ::CriticalCssGenerator::Config.as_json_config({
+        url: "file://#{html_path}",
+        css: css_path,
+      })
+
+      JSON.generate(config)
+    end
+
+    private
+
+      def extract_critical_assets(assets)
+        return '' unless assets.present?
+
+        critical_assets = assets.filter { |item| item[:critical] }
+        critical_assets
+          .map { |asset| File.read(asset[:file]) }
+          .compact
+          .join(' ')
+      end
+
+      def tmp_dir
+        File.join(Rails.root, 'tmp')
+      end
+
+      def tmp_extractor_file(content = nil, extension: nil)
+        f = Tempfile.new(['critical-css-tmp', ".#{extension || 'bin'}"], tmp_dir, encoding: 'utf-8')
+        if content.present?
+          f.write(content)
+          f.rewind
+        end
+
+        f.close
+        f
+      end
+
+      def tmp_concat_assets_array(assets, extension: nil)
+        return nil unless assets.present?
+
+        items = group_assets_by_type(assets)
+        file = tmp_extractor_file(
+          (items[:inline] || []).join('\n'),
+          extension: extension
+        )
+
+        paths = (items[:files] || []).map { |asset| asset[:file] }.compact
+        unless paths.empty?
+          Open3.pipeline_w(['cat', *paths], out: file.path)
+        end
+
+        file
+      end
+  end
+end

data/lib/critical_css_generator/helpers.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module CriticalCssGenerator::Helpers
+  def critical_css
+    @critical_css_cache.try(:[], :css)
+  end
+
+  def critical_css_enabled?
+    @critical_css_enabled
+  end
+
+  def critical_css?
+    critical_css.present? && critical_css.instance_of?(String)
+  end
+
+  def critical_css_asset(attrs)
+    append_critical_css_asset(attrs)
+    nil
+  end
+
+  def critical_css_tags(preserve_content: true, &block)
+    content = capture(&block)
+
+    if critical_css_enabled? && critical_css?
+      css_tags = content_tag(:style, critical_css.html_safe, type: 'text/css')
+      css_tags = "#{css_tags}#{content}".html_safe if preserve_content
+      css_tags.html_safe
+    else
+      append_css_tags_assets(content)
+      content
+    end
+  end
+end

data/lib/critical_css_generator/jobs/extractor.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module CriticalCssGenerator::Jobs
+  class Extractor < ActiveJob::Base
+    class << self
+      def semaphore_key(cache_path)
+        "semaphore-#{cache_path}"
+      end
+
+      def perform_if_semaphore_is_released(attrs)
+        semaphore = semaphore_key(attrs[:cache][:path])
+        return if Rails.cache.exist?(semaphore)
+
+        Rails.cache.write(semaphore, '1', { expires_in: 15.minutes })
+        perform_later(attrs)
+      end
+    end
+
+    def perform(cache:, css:, html:)
+      semaphore = self.class.semaphore_key(cache[:path])
+      critical_css = ::CriticalCssGenerator::Extractor.new(css: css, html: html).try_extract
+
+      # store it as wrapped css, do not regenerate for
+      # each request critical_css if something go wrong
+      # with css-extractor
+      Rails.cache.write(
+        cache[:path],
+        {
+          css: critical_css,
+        },
+        cache[:store]
+      )
+
+      Rails.cache.delete(semaphore)
+    end
+  end
+end

data/lib/critical_css_generator.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require 'open3'
+require 'critical_css_generator/config'
+require 'critical_css_generator/actions'
+require 'critical_css_generator/actions/helpers'
+require 'critical_css_generator/extractor'
+require 'critical_css_generator/jobs/extractor'
+require 'critical_css_generator/actions/after_render'
+require 'critical_css_generator/actions/before_render'
+require 'critical_css_generator/helpers'
+
+module CriticalCssGenerator
+  def self.config
+    yield CriticalCssGenerator::Config
+  end
+end
+
+ActionController::Base.send(:include, CriticalCssGenerator::Actions)
+ActionView::Base.send(:include, CriticalCssGenerator::Helpers)

data/lib/js/css-extractor.js

@@ -0,0 +1,20 @@
+const penthouse = require('penthouse');
+const process = require('process');
+const fs = require('fs');
+
+const FD = {
+  STDIN: 0,
+  STDOUT: 1,
+  STDERR: 2,
+};
+
+const config = JSON.parse(fs.readFileSync(FD.STDIN, 'utf-8'));
+
+penthouse(config)
+  .then((criticalCss) => {
+    fs.writeSync(FD.STDOUT, criticalCss);
+  })
+  .catch((err) => {
+    fs.writeSync(FD.STDERR, err);
+    process.exit(1);
+  })

data/rails_critical_css.gemspec

@@ -0,0 +1,14 @@
+Gem::Specification.new do |s|
+  s.name = 'rails_critical_css'
+  s.version = '0.1.0'
+  s.summary = 'Critical CSS rails generator'
+  s.authors = ['Mateusz Bagiński']
+
+  s.license = 'MIT'
+  s.email = 'cziken58@gmail.com'
+  s.homepage = 'https://github.com/Mati365/rails-critical-css'
+  s.files = `git ls-files`.split($/)
+
+  s.require_paths << 'lib'
+  s.required_ruby_version = '>= 2.4.0'
+end

metadata

@@ -0,0 +1,60 @@
+--- !ruby/object:Gem::Specification
+name: rails_critical_css
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Mateusz Bagiński
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2021-10-31 00:00:00.000000000 Z
+dependencies: []
+description: 
+email: cziken58@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- Gemfile.lock
+- LICENSE
+- README.md
+- Rakefile
+- lib/critical_css_generator.rb
+- lib/critical_css_generator/actions.rb
+- lib/critical_css_generator/actions/after_render.rb
+- lib/critical_css_generator/actions/before_render.rb
+- lib/critical_css_generator/actions/helpers.rb
+- lib/critical_css_generator/config.rb
+- lib/critical_css_generator/extractor.rb
+- lib/critical_css_generator/helpers.rb
+- lib/critical_css_generator/jobs/extractor.rb
+- lib/js/css-extractor.js
+- rails_critical_css.gemspec
+homepage: https://github.com/Mati365/rails-critical-css
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.4.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.2.5
+signing_key: 
+specification_version: 4
+summary: Critical CSS rails generator
+test_files: []