Merge pull request #39 from TrigenSoftware/blinkless

Page blinking on styles reload is fixed.

.travis.yml

@@ -4,7 +4,7 @@ git:
 language: node_js
 node_js:
   - node
-  - '0.10'
+  - '4.0.0'
 before_script:
   - "npm install -g gulp"
   - "export DISPLAY=:99.0"

dist/index.js

@@ -607,20 +607,104 @@ sync.updateSearch = function(search, key, suffix) {
  * @returns {{elem: HTMLElement, timeStamp: number}}
  */
 sync.swapFile = function (elem, attr, options) {
-
     var currentValue = elem[attr];
     var timeStamp    = new Date().getTime();
     var key          = "rel";
     var suffix       = key + "=" + timeStamp;
     var anchor       = utils.getLocation(currentValue);
     var search       = sync.updateSearch(anchor.search, key, suffix);
+    var newValue     = anchor.href;
+
+    if (options.timestamps !== false) {
+        newValue = newValue.split("?")[0] + search;
+    }
 
-    if (options.timestamps === false) {
-        elem[attr] = anchor.href;
+    if (elem.tagName === "LINK") {
+        elem = sync.swapStyle(elem, newValue);
     } else {
-        elem[attr] = anchor.href.split("?")[0] + search;
+        elem[attr] = newValue;
+        sync.triggerReflow();
     }
 
+    return {
+        elem: elem,
+        timeStamp: timeStamp
+    };
+};
+
+/**
+ * @param link
+ * @param newHref
+ * @returns HTMLElement
+ */
+sync.swapStyle = function (link, newHref) {
+
+    var clone = link.cloneNode(false);
+    clone.href = newHref;
+
+    link.parentNode.insertBefore(clone, link.nextSibling);
+
+    sync.onLinkLoad(clone, function () {
+        if (link.parentNode) {
+            link.parentNode.removeChild(link);
+        }
+    });
+
+    return clone;
+};
+
+/**
+ * @param link
+ * @param onLoad
+ */
+sync.onLinkLoad = function (link, onLoad) {
+
+    var loaded = false;
+
+    function cb() {
+
+        if (loaded) {
+            return;
+        }
+
+        if (link.addEventListener) {
+            link.removeEventListener("load", cb);
+        }
+
+        loaded = true;
+        onLoad();
+    }
+
+    if (link.addEventListener) {
+        link.addEventListener("load", cb);
+    }
+
+    sync.onLinkDefined(link, cb);
+};
+
+/**
+ * @param link
+ * @param onLoad
+ */
+sync.onLinkDefined = function (link, onLoad) {
+
+    var sheets = document.styleSheets,
+        i      = sheets.length;
+
+    while (i--) {
+        if (sheets[i].href === link.href) {
+            onLoad();
+            return;
+        }
+    }
+
+    setTimeout(function () {
+        sync.onLinkDefined(link, onLoad);
+    });
+};
+
+sync.triggerReflow = function() {
+
     var body = document.body;
 
     setTimeout(function () {
@@ -632,11 +716,6 @@ sync.swapFile = function (elem, attr, options) {
             hiddenElem.style.display = "block";
         }
     }, 200);
-
-    return {
-        elem: elem,
-        timeStamp: timeStamp
-    };
 };
 
 sync.getFilenameOnly = function (url) {