Skip to content

Commit ca1823d

Browse files
committed
Add methods to allow generation of critical CSS for a specific route and to allow removal of specific routes from the CSS cache.
1 parent a721db2 commit ca1823d

File tree

5 files changed

+74
-11
lines changed

5 files changed

+74
-11
lines changed

README.md

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,16 @@ This gem assumes that you'll load the rest of the CSS asyncronously. At the mome
88

99
This gem uses [PhantomJS](https://github.com/colszowka/phantomjs-gem) and [Penthouse](https://github.com/pocketjoso/penthouse) to generate the critical CSS.
1010

11+
## Update
12+
13+
Version 0.3.0 is not compatible with previous versions. Please read the Upgrading from Previous Versions section below for more information.
1114

1215
## Installation
1316

1417
Add `critical-path-css-rails` to your Gemfile:
1518

1619
```
17-
gem 'critical-path-css-rails', '~> 0.2.0'
20+
gem 'critical-path-css-rails', '~> 0.3.0'
1821
```
1922

2023
Download and install by running:
@@ -65,20 +68,56 @@ To load the generated critical CSS into your layout, in the head tag, insert:
6568
</style>
6669
```
6770

68-
A simple example using loadcss-rails looks like:
71+
A simple example using [loadcss-rails](https://github.com/michael-misshore/loadcss-rails) looks like:
6972

7073
```HTML+ERB
7174
<style>
72-
<%= CriticalPathCss.fetch(request.path) %>
75+
<%= CriticalPathCss.fetch(request.path) %>
7376
</style>
74-
<script>
75-
loadCSS("<%= stylesheet_path('application') %>");
76-
</script>
77+
<%= tag :link, as: 'style', href: stylesheet_path('application'), onload: raw("this.rel='stylesheet'"), rel: 'preload' %>
7778
<noscript>
78-
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
79+
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
7980
</noscript>
8081
```
8182

83+
### Route-level Control of CSS Generation and Removal
84+
85+
CriticalPathCss exposes some methods to give the user more control over the generation of Critical CSS and managment of the CSS cache:
86+
87+
``` ruby
88+
CriticalPathCss.generate route # Generates the critical path CSS for the given route (relative path)
89+
90+
CriticalPathCss.generate_all # Generates critical CSS for all routes in critical_path_css.yml
91+
92+
CriticalPathCss.clear route # Removes the CSS for the given route from the cache
93+
94+
CriticalPathCss.clear_matched routes # Removes the CSS for the matched routes from the cache
95+
96+
CriticalPathCss.clear_all # Clears all CSS from the cache
97+
```
98+
99+
In addition to the `critical_path_css:generate` rake task described above, you also have access to task which clears the CSS cache:
100+
101+
```
102+
rake critical_path_css:clear_all
103+
```
104+
105+
Careful use of these methods allows the developer to generate critical path CSS dynamically within the app. The user should strongly consider using a [background job](http://edgeguides.rubyonrails.org/active_job_basics.html) when generating CSS in order to avoid tying up a rails thread. The `generate` method will send a GET request to your server which could cause infinite recursion if the developer is not careful.
106+
107+
A user can use these methods to [dynamically generate critical path CSS](https://gist.github.com/taranda/1597e97ccf24c978b59aef9249666c77) without using the `rake critical_path_css:generate` rake task and without hardcoding the application's routes into `config/critical_path_css.yml`. See [this Gist](https://gist.github.com/taranda/1597e97ccf24c978b59aef9249666c77) for an example of such an implementation.
108+
109+
## Upgrading from Previous Versions
110+
111+
The latest version of Critcal Path CSS Rails changes the functionality of the `generate` method. In past versions,
112+
`generate` would produce CSS for all of the routes listed in `config/critical_path_css.yml`. This functionality has been replaced by the `generate_all` method, and `generate` will only produce CSS for one route.
113+
114+
Developers upgrading from versions prior to 0.3.0 will need to replace `CriticalPathCss:generate` with `CriticalPathCss:generate_all` throughout their codebase. One file that will need updating is `lib/tasks/critical_path_css.rake`. Users can upgrade this file automatically by running:
115+
116+
``` prompt
117+
rails generate critical_path_css:install
118+
```
119+
120+
Answer 'Y' when prompted to overwrite `critical_path_css.rake`. However, overwriting `critical_path_css.yml` is not necessary and not recommended.
82121

83122
## Versions
84123

lib/critical-path-css-rails.rb

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,28 @@ module CriticalPathCss
33

44
CACHE_NAMESPACE = 'critical-path-css'
55

6-
def self.generate
6+
def self.generate(route)
7+
Rails.cache.write(route, CssFetcher.new.fetch_route(route), namespace: CACHE_NAMESPACE)
8+
end
9+
10+
def self.generate_all
711
CssFetcher.new.fetch.each do |route, css|
812
Rails.cache.write(route, css, namespace: CACHE_NAMESPACE)
913
end
1014
end
1115

16+
def self.clear(route)
17+
Rails.cache.delete(route, namespace: CACHE_NAMESPACE)
18+
end
19+
20+
def self.clear_matched(routes)
21+
Rails.cache.delete_matched(routes,namespace: CACHE_NAMESPACE)
22+
end
23+
24+
def self.clear_all
25+
self.clear_matched('*')
26+
end
27+
1228
def self.fetch(route)
1329
Rails.cache.read(route, namespace: CACHE_NAMESPACE) || ''
1430
end

lib/critical_path_css/css_fetcher.rb

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ def fetch
1313
@config.routes.map { |route| [route, css_for_route(route)] }.to_h
1414
end
1515

16-
private
16+
def fetch_route(route)
17+
css_for_route route
18+
end
19+
20+
protected
1721

1822
def css_for_route(route)
1923
Phantomjs.run(PENTHOUSE_PATH, @config.base_url + route, @config.css_path)
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module CriticalPathCSS
22
module Rails
3-
VERSION = '0.2.3'
3+
VERSION = '0.3.0'
44
PENTHOUSE_VERSION = '0.3.4'
55
end
66
end

lib/tasks/critical_path_css.rake

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ require 'critical-path-css-rails'
33
namespace :critical_path_css do
44
desc 'Generate critical CSS for the routes defined'
55
task generate: :environment do
6-
CriticalPathCss.generate
6+
CriticalPathCss.generate_all
7+
end
8+
desc 'Clear all critical CSS from the cache'
9+
task clear_all: :environment do
10+
CriticalPathCss.clear_all
711
end
812
end
913

0 commit comments

Comments
 (0)