Skip to content

Instantly share code, notes, and snippets.

@croxton
Last active November 3, 2020 08:30
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save croxton/dde57d5c7f65932e2fbacee54326c448 to your computer and use it in GitHub Desktop.
Save croxton/dde57d5c7f65932e2fbacee54326c448 to your computer and use it in GitHub Desktop.
Inline critical CSS with JS (Craft CMS)
{% set _inline_css_block = block('_inline_css') %}
{% if _inline_css_block is not empty %}
<script>
(function() {
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
!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);
!function(t){"use strict";t.loadCSS||(t.loadCSS=function(){});var e=loadCSS.relpreload={};if(e.support=function(){var e;try{e=t.document.createElement("link").relList.supports("preload")}catch(a){e=!1}return function(){return e}}(),e.bindMediaToggle=function(t){function e(){t.media=a}var a=t.media||"all";t.addEventListener?t.addEventListener("load",e):t.attachEvent&&t.attachEvent("onload",e),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(e,3e3)},e.poly=function(){if(!e.support())for(var a=t.document.getElementsByTagName("link"),n=0;n<a.length;n++){var o=a[n];"preload"!==o.rel||"style"!==o.getAttribute("as")||o.getAttribute("data-loadcss")||(o.setAttribute("data-loadcss",!0),e.bindMediaToggle(o))}},!e.support()){e.poly();var a=t.setInterval(e.poly,500);t.addEventListener?t.addEventListener("load",function(){e.poly(),t.clearInterval(a)}):t.attachEvent&&t.attachEvent("onload",function(){e.poly(),t.clearInterval(a)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:t.loadCSS=loadCSS}("undefined"!=typeof global?global:this);
/* Has CSS been cached? */
function getCookie(name) {
match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
if (match) {
return match[2];
}
return '';
}
var cacheVal = getCookie('critical-css');
var css = '';
if (cacheVal != '{{ staticAssetsVersion }}') {
/* set cookie */
document.cookie = "critical-css={{ staticAssetsVersion }}";
/* inline critical CSS in the page and load our main CSS file asynchronously */
css += '{{ _inline_css_block | raw |e("js") }}';
css += '<link rel="preload" href="/dist/css/global.css?v={{ staticAssetsVersion }}" as="style" onload="this.rel=\'stylesheet\'" />';
} else {
/* link to main CSS file */
css += '<link rel="stylesheet" href="/dist/css/global.css?v={{ staticAssetsVersion }}" />';
}
document.write(css);
})();
</script>
<noscript>
<link rel="stylesheet" href="/dist/css/global.css?v={{ staticAssetsVersion }}">
</noscript>
{% else %}
<link rel="stylesheet" href="/dist/css/global.css?v={{ staticAssetsVersion }}">
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment