Merge pull request #2735 from less/browser-cache

Fix for #2384 and caching enabled with modifyVars set

lib/less-browser/bootstrap.js

@@ -3,7 +3,7 @@
  * used in the browser distributed version of less
  * to kick-start less using the browser api
  */
-/*global window */
+/*global window, document */
 
 // shim Promise if required
 require('promise/polyfill.js');
@@ -15,11 +15,37 @@ var less = module.exports = require("./index")(window, options);
 
 window.less = less;
 
+var css, head, style;
+
+// Always restore page visibility
+function resolveOrReject(data) {
+    if (data.filename) {
+        console.warn(data);
+    }
+    if (!options.async) {
+        head.removeChild(style);
+    }
+}
+
 if (options.onReady) {
     if (/!watch/.test(window.location.hash)) {
         less.watch();
     }
+    // Simulate synchronous stylesheet loading by blocking page rendering
+    if (!options.async) {
+        css = 'body { display: none !important }';
+        head = document.head || document.getElementsByTagName('head')[0];
+        style = document.createElement('style');
+
+        style.type = 'text/css';
+        if (style.styleSheet) {
+            style.styleSheet.cssText = css;
+        } else {
+            style.appendChild(document.createTextNode(css));
+        }
 
+        head.appendChild(style);
+    }
     less.registerStylesheetsImmediately();
-    less.pageLoadFinished = less.refresh(less.env === 'development');
+    less.pageLoadFinished = less.refresh(less.env === 'development').then(resolveOrReject, resolveOrReject);
 }

lib/less-browser/cache.js

@@ -8,25 +8,32 @@ module.exports = function(window, options, logger) {
         } catch (_) {}
     }
     return {
-        setCSS: function(path, lastModified, styles) {
+        setCSS: function(path, lastModified, modifyVars, styles) {
             if (cache) {
                 logger.info('saving ' + path + ' to cache.');
                 try {
                     cache.setItem(path, styles);
                     cache.setItem(path + ':timestamp', lastModified);
+                    if (modifyVars) {
+                        cache.setItem(path + ':vars', JSON.stringify(modifyVars));
+                    }
                 } catch(e) {
                     //TODO - could do with adding more robust error handling
                     logger.error('failed to save "' + path + '" to local storage for caching.');
                 }
             }
         },
-        getCSS: function(path, webInfo) {
+        getCSS: function(path, webInfo, modifyVars) {
             var css       = cache && cache.getItem(path),
-                timestamp = cache && cache.getItem(path + ':timestamp');
+                timestamp = cache && cache.getItem(path + ':timestamp'),
+                vars      = cache && cache.getItem(path + ':vars');
+
+            modifyVars = modifyVars || {};
 
             if (timestamp && webInfo.lastModified &&
                 (new Date(webInfo.lastModified).valueOf() ===
-                    new Date(timestamp).valueOf())) {
+                    new Date(timestamp).valueOf()) &&
+                (!modifyVars && !vars || JSON.stringify(modifyVars) === vars)) {
                 // Use local copy
                 return css;
             }

lib/less-browser/file-manager.js

@@ -39,7 +39,7 @@ module.exports = function(options, logger) {
     FileManager.prototype.doXHR = function doXHR(url, type, callback, errback) {
 
         var xhr = getXMLHttpRequest();
-        var async = options.isFileProtocol ? options.fileAsync : options.async;
+        var async = options.isFileProtocol ? options.fileAsync : true;
 
         if (typeof xhr.overrideMimeType === 'function') {
             xhr.overrideMimeType('text/css');

lib/less-browser/index.js

@@ -114,14 +114,13 @@ module.exports = function(window, options) {
             if (webInfo) {
                 webInfo.remaining = remaining;
 
-                if (!instanceOptions.modifyVars) {
-                    var css = cache.getCSS(path, webInfo);
-                    if (!reload && css) {
-                        webInfo.local = true;
-                        callback(null, css, data, sheet, webInfo, path);
-                        return;
-                    }
+                var css = cache.getCSS(path, webInfo, instanceOptions.modifyVars);
+                if (!reload && css) {
+                    webInfo.local = true;
+                    callback(null, css, data, sheet, webInfo, path);
+                    return;
                 }
+
             }
 
             //TODO add tests around how this behaves when reloading
@@ -134,9 +133,7 @@ module.exports = function(window, options) {
                     callback(e);
                 } else {
                     result.css = postProcessCSS(result.css);
-                    if (!instanceOptions.modifyVars) {
-                        cache.setCSS(sheet.href, webInfo.lastModified, result.css);
-                    }
+                    cache.setCSS(sheet.href, webInfo.lastModified, instanceOptions.modifyVars, result.css);
                     callback(null, result.css, data, sheet, webInfo, path);
                 }
             });

package.json

@@ -48,18 +48,18 @@
   "devDependencies": {
     "diff": "^1.0",
     "grunt": "^0.4.5",
+    "grunt-browserify": "~3.5.0",
     "grunt-contrib-clean": "^0.6.0",
     "grunt-contrib-concat": "^0.5.0",
     "grunt-contrib-connect": "^0.9.0",
     "grunt-contrib-jasmine": "^0.8.2",
     "grunt-contrib-jshint": "^0.11.0",
     "grunt-contrib-uglify": "^0.8.0",
     "grunt-jscs": "^1.6.0",
+    "grunt-saucelabs": "^8.3.2",
     "grunt-shell": "^1.1.1",
-    "grunt-browserify": "~3.5.0",
     "jit-grunt": "^0.9.1",
-    "time-grunt": "^1.0.0",
-    "grunt-saucelabs": "^8.3.2"
+    "time-grunt": "^1.0.0"
   },
   "keywords": [
     "compile less",