rails_critical_css 0.3.6 → 0.3.7
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/README.md +19 -4
- data/lib/rails_critical_css/helpers.rb +8 -0
- data/lib/rails_critical_css/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 77467407b3faaca39cea6db6b578d6cefa0635ccc221bb53087a9ac348840b62
|
|
4
|
+
data.tar.gz: f8e5c8caccdcefa8265d5756c2b9780aa11fd74bfc0557ae325583e4ad1eff09
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b4c47e5b244785bdc403d2267fc198fc18040ee65cb38ea1ecebfe501b7a8d922d0706a93110d0a093a0cf6fe889be33c1b4b06d3a3edf17686620ce9bb07c26
|
|
7
|
+
data.tar.gz: 0a9f6cc4626c8c9bfcb3a091f0b30439bb826b35e35ca9544391b7b1c49eb4589460b6ecec7340cfe2f869caf76dc9efb8cfe6a2e3b2f53586b0148b583b6ee2
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
|
|
6
6
|
[](http://makeapullrequest.com)
|
|
7
7
|
|
|
8
|
-
Generate on demand critical css for component actions with minimum effort. It is pretty similar to
|
|
8
|
+
Generate on demand critical css for component actions with minimum effort. It is pretty similar to other rails critical css gems but instead of pregenerating critical css in job this gem generates them in fly, dynamically and allows to prepend custom SCSS files to generated critical bundle.
|
|
9
9
|
|
|
10
10
|
## Installation
|
|
11
11
|
|
|
12
|
-
Be sure that NPM and Node is installed in your system
|
|
12
|
+
Be sure that NPM and Node is installed in your system and add to Gemfile:
|
|
13
13
|
|
|
14
14
|
```bash
|
|
15
15
|
gem 'rails_critical_css'
|
|
@@ -49,10 +49,25 @@ In controller:
|
|
|
49
49
|
In template:
|
|
50
50
|
|
|
51
51
|
```slim
|
|
52
|
+
# These files will be prepended to critical css generator output, it can be normal scss file from assets
|
|
53
|
+
# critical_css_asset outputs nothing, it will be not appended to your html in link tag
|
|
52
54
|
= critical_css_asset file: 'some-file-to-be-prepended-to-criticals', critical: true
|
|
55
|
+
= critical_css_asset file: 'hide-some-js-blocks', critical: true
|
|
56
|
+
|
|
57
|
+
# depending on critical_css? flag (it returns false if critical css is being generated)
|
|
58
|
+
# it emits link(href="your_file" rel="stylesheet") or link(href="your_file" rel="preload" onload="this.rel = 'stylesheet'")
|
|
59
|
+
= critical_css_link href: 'css/vendors.css'
|
|
60
|
+
|
|
61
|
+
# If you have custom link helper (which for example loads css tag after GDPR accept) you can use helper below
|
|
62
|
+
# Generator will extract hrefs from emitted html and generate stylesheet output
|
|
63
|
+
# if critical css is compiled successfully it will emit critical css
|
|
64
|
+
# and if preserve_content: true (which is default) arg is provided it will preserve provided content
|
|
53
65
|
= critical_css_tags
|
|
54
|
-
|
|
55
|
-
|
|
66
|
+
= your_custom_link_helper "css/vendors.css"
|
|
67
|
+
= your_custom_link_helper "css/app.css"
|
|
68
|
+
|
|
69
|
+
- unless crticial_css?
|
|
70
|
+
div Critical css is being generated...
|
|
56
71
|
```
|
|
57
72
|
|
|
58
73
|
## Testing
|
|
@@ -30,4 +30,12 @@ module RailsCriticalCss::Helpers
|
|
|
30
30
|
content
|
|
31
31
|
end
|
|
32
32
|
end
|
|
33
|
+
|
|
34
|
+
def critical_css_link(href:, media: nil)
|
|
35
|
+
if critical_css?
|
|
36
|
+
link_to href: href, rel: 'preload', as: 'style', media: media, onload: "this.rel = 'stylesheet'"
|
|
37
|
+
else
|
|
38
|
+
link_to href: href, rel: 'stylesheet', media: media
|
|
39
|
+
end
|
|
40
|
+
end
|
|
33
41
|
end
|