stylesheet_link_tag + assets_hash and blocking css

#1

I am using

<head>
<%= stylesheet_link_tag "global" %>
</head>

to load my css file and activate :asset_hash for cache invalidation. So the final filename is global-845b7a7f.css

So far, so good. BUT then I would like to follow Google Page Speed suggestion to defer loading of blocking CSS files with the following google script:

 <script>
    var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'stylesheets/global.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
</script>

This will not work because I don’t know which asset_hash append to the css filename.

How can I solve it ?

#2

Instead of asset hashing you could append a query string to the end of the filename?

e.g. global.css?v=1.2.0

I’m not sure if this is possible with the stylesheet_link_tag helpers.
You will also need to ignore that stylesheet from being hashed with something like activate :asset_hash, :ignore => [/global.css/] (untested)

Then simply append the same param to the file in the javascript snippet.