Caching Issues with Local Storage in Production

Edit: There's 2 easily reproducible problems with globalVars and imports, but it reveals a much bigger issue with the local storage cache.

Using the following: https://gist.github.com/andrewwakeling/7748745

1. Ensure your local storage is clean.
2. Load problem.html and verify that the background is grey.
3. Change useGlobalVars to false, reload the page and verify that the background is still grey.
4. Clear out local storage and reload the page. Verify that the page is now white.

The local storage is storing a "pair" of values:

• transformed CSS
• date/time

When retrieving LESS templates, the date/time will be come from the "Last-Modified" header.
Any globalVars are being prepended onto the template ( https://github.com/less/less.js/blob/master/lib/less/browser.js#L510 ) and then the createCSS will eventually cache that transformed CSS against the "Last-Modified" header.

This reveals a bigger problem in that before modifyVars and globalVars, it was somewhat realistic to be able to cache transformed CSS against the last modified date of the original template.

If modifyVars or globalVars are present and used when transforming a template, then you should remove the cached entry instead of using the current date/time.( https://github.com/less/less.js/blob/master/lib/less/browser.js#L502 ).
It isn't possible to retrieve these entries because there's no other variables holding the generated time, nor what the varsPre or newVars are.

A possible solution may include:

• ensure that the cache date/time is always linked with a snapshot of the LESS template
• use a hash calculated from varsPre/newVars to detect when the cache is invalid

Thoughts?

Start with the reproduction in the linked gist and inspect lib/less/browser.js around lines 502 and 510, where cache entries and globalVars are handled. Reproduce the local-storage behavior with the listed steps, then verify that transformed CSS cache entries are not incorrectly reused when variable inputs change.