Twig template for inlining critical CSS on first visits.

Twig-critical-CSS-test.twig

{% set cssupdate = '20150309' %}
{% if _cookie.csscached == cssupdate %}
<link rel="stylesheet" href="/css/global-min.{{ cssupdate }}.css">
{% else %}
<style>
{% include 'global/critical.css' %}
</style>
<script>
(function (win, doc) {
    'use strict';
    function loadCSS(href) {
        var ss = doc.createElement('link'),
            ref = doc.getElementsByTagName('script')[0],
            sheets = doc.styleSheets;
        ss.rel = 'stylesheet';
        ss.href = href;
        ss.media = 'only x';
        ref.parentNode.insertBefore(ss, ref);
        function toggleMedia() {
            var defined,
                i;
            for (i = 0; i < sheets.length; i = i + 1) {
                if (sheets[i].href && sheets[i].href.indexOf(ss.href) > -1) {
                    defined = true;
                }
            }
            if (defined) {
                ss.media = 'all';
            } else {
                win.setTimeout(toggleMedia);
            }
        }
        toggleMedia();
        return ss;
    }
    loadCSS('/css/global-min.{{ cssupdate }}.css');
    doc.cookie = 'csscached={{ cssupdate }};expires="Tue, 19 Jan 2038 03:14:07 GMT";path=/';
}(this, this.document));
</script>
<noscript>
<link rel="stylesheet" href="/css/global-min.{{ cssupdate }}.css">
</noscript>
{% endif %}