less.render() in browser becomes async with @import

According to the docs, calling less.render() with a callback allows synchronous processing of the resulting CSS code:

If you specify a callback then a promise will not be returned, where as if you do not specify a callback a promise will be given. Under the hood, the callback version is used so that less can be used synchronously.

This works in both environments, NodeJS and browser, until I use an @import statement and the browser starts to behave asynchronously. (NodeJS still renders synchronously using the syncImport option.)

  var css1;
  var css2;

  var less1 = '@import (less, reference) "./defaults.css";';
  var less2 = '@color: yellow;';
  var less3 = 'body { background-color: @color; }';
  
  var lessConfig = {
    syncImport: true
  };
  
  less.render(less1 + less2 + less3, function(error, result) {
   css1 = result.css;
  });

  less.render(less2 + less3, function(error, result) {
   css2 = result.css;
  });

  output1.innerHTML = 'css1: ' +  css1;
  output2.innerHTML = 'css2: ' +  css2;

In the example code above, css1 will show undefined while css2 shows the expected CSS code body { background-color: yellow; }.

I created a Thimble to demonstrate the issue: https://thimbleprojects.org/p3k/509773/

What am I missing here?

[matthew-dean]

The browser cannot do synchronous rendering if an import is present. The contents of that import has to be fetched over the network, and that is always an async operation.

What @rjgotten said. Sync imports used to be used in Less in the browser, but browsers are phasing out the ability to do XHR sync requests at all, because it kills your webpage. EVERYTHING stops processing / evaluating until the file is returned. When your files are all local (on Node), it’s less of a problem.

[matthew-dean]

@p3k Even if Less allowed it, the browsers will not at some point, so it effectively wouldn’t matter. See: https://developers.google.com/web/updates/2012/01/Getting-Rid-of-Synchronous-XHRs