Update to 2.0.1

Gemfile

@@ -1,4 +1,4 @@
 # A sample Gemfile
-source "https://rubygems.org"
+source 'https://rubygems.org'
 
 gem 'rubocop', require: false

README.md

@@ -11,7 +11,7 @@ These pieces of javascript were implemented by [Filament Group](https://github.c
 ## Installation
 
 ```
-gem 'loadcss-rails', '~> 1.2.0'
+gem 'loadcss-rails', '~> 2.0.1'
 ```
 
 The loadCSS and onloadCSS files will be added to the asset pipeline and available for you to use. Add the lines that you need to your application's JS manifest (usually `app/assets/javascripts/application.js`).

lib/loadcss/rails/version.rb

@@ -1,6 +1,6 @@
 module LoadCSS
   module Rails
-    VERSION = '1.3.1'
-    LOADCSS_VERSION = '1.3.1'
+    VERSION = '2.0.1'
+    LOADCSS_VERSION = '2.0.1'
   end
 end

vendor/assets/javascripts/cssrelpreload.js

@@ -1,44 +1,104 @@
-/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
+/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
+/* This file is meant as a standalone workflow for
+- testing support for link[rel=preload]
+- enabling async CSS loading in browsers that do not support rel=preload
+- applying rel preload css once loaded, whether supported or not.
+*/
 (function( w ){
+  "use strict";
   // rel=preload support test
   if( !w.loadCSS ){
-    return;
+    w.loadCSS = function(){};
   }
+  // define on the loadCSS obj
   var rp = loadCSS.relpreload = {};
-  rp.support = function(){
+  // rel=preload feature support test
+  // runs once and returns a function for compat purposes
+  rp.support = (function(){
+    var ret;
     try {
-      return w.document.createElement( "link" ).relList.supports( "preload" );
+      ret = w.document.createElement( "link" ).relList.supports( "preload" );
     } catch (e) {
-      return false;
+      ret = false;
     }
+    return function(){
+      return ret;
+    };
+  })();
+
+  // if preload isn't supported, get an asynchronous load by using a non-matching media attribute
+  // then change that media back to its intended value on load
+  rp.bindMediaToggle = function( link ){
+    // remember existing media attr for ultimate state, or default to 'all'
+    var finalMedia = link.media || "all";
+
+    function enableStylesheet(){
+      link.media = finalMedia;
+    }
+
+    // bind load handlers to enable media
+    if( link.addEventListener ){
+      link.addEventListener( "load", enableStylesheet );
+    } else if( link.attachEvent ){
+      link.attachEvent( "onload", enableStylesheet );
+    }
+
+    // Set rel and non-applicable media type to start an async request
+    // note: timeout allows this to happen async to let rendering continue in IE
+    setTimeout(function(){
+      link.rel = "stylesheet";
+      link.media = "only x";
+    });
+    // also enable media after 3 seconds,
+    // which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
+    setTimeout( enableStylesheet, 3000 );
   };
 
-  // loop preload links and fetch using loadCSS
+  // loop through link elements in DOM
   rp.poly = function(){
+    // double check this to prevent external calls from running
+    if( rp.support() ){
+      return;
+    }
     var links = w.document.getElementsByTagName( "link" );
     for( var i = 0; i < links.length; i++ ){
       var link = links[ i ];
-      if( link.rel === "preload" && link.getAttribute( "as" ) === "style" ){
-        w.loadCSS( link.href, link, link.getAttribute( "media" ) );
-        link.rel = null;
+      // qualify links to those with rel=preload and as=style attrs
+      if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){
+        // prevent rerunning on link
+        link.setAttribute( "data-loadcss", true );
+        // bind listeners to toggle media back
+        rp.bindMediaToggle( link );
       }
     }
   };
 
-  // if link[rel=preload] is not supported, we must fetch the CSS manually using loadCSS
+  // if unsupported, run the polyfill
   if( !rp.support() ){
+    // run once at least
     rp.poly();
-    var run = w.setInterval( rp.poly, 300 );
+
+    // rerun poly on an interval until onload
+    var run = w.setInterval( rp.poly, 500 );
     if( w.addEventListener ){
       w.addEventListener( "load", function(){
         rp.poly();
         w.clearInterval( run );
       } );
-    }
-    if( w.attachEvent ){
+    } else if( w.attachEvent ){
       w.attachEvent( "onload", function(){
+        rp.poly();
         w.clearInterval( run );
-      } )
+      } );
     }
   }
-}( this ));
+
+
+  // commonjs
+  if( typeof exports !== "undefined" ){
+    exports.loadCSS = loadCSS;
+  }
+  else {
+    w.loadCSS = loadCSS;
+  }
+}( typeof global !== "undefined" ? global : this ) );

vendor/assets/javascripts/loadCSS.js

@@ -6,7 +6,7 @@
     // Arguments explained:
     // `href` [REQUIRED] is the URL for your CSS file.
     // `before` [OPTIONAL] is the element the script should use as a reference for injecting our stylesheet <link> before
-      // By default, loadCSS attempts to inject the link after the last stylesheet or script in the DOM. However, you might desire a more specific location in your document.
+    // By default, loadCSS attempts to inject the link after the last stylesheet or script in the DOM. However, you might desire a more specific location in your document.
     // `media` [OPTIONAL] is the media type or query of the stylesheet. By default it will be 'all'
     var doc = w.document;
     var ss = doc.createElement( "link" );