Caching Issues with Local Storage in Production

[andrewwakeling]

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?

[andrewwakeling]

The same incorrect behaviour also occurs if use @import in your LESS template. Any variables which are initialized will be cached in local storage. Changing variables in the imported LESS template won't invalidate the cache because it is only checking the last modified of the parent template.

Caching LESS templates which rely on imported templates might be possible if:

• we store the "import" dependencies of each template and the order in which each loads
• store the last modified date of imported templates

[nvaken]

I guess my issue #1900 is related to this issue.

Edit: Purely referencing my issue so the correlation between the two is noted.

[matthew-dean]

If this issue is still relevant, can it be re-written to make it a clearer case of problem/suggested solution?