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

[p3k]

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?

[rjgotten]

What am I missing here?

Nothing.
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.

The documentation should probably be updated to reflect that.

[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]

Closing as designed. Please open a ticket at https://github.com/less/less-docs re: the documentation.

[p3k]

Thanks for the quick replies. I get the reasoning but would argue that still a switch to force sync behaviour would be nice. In my case it would only apply during development, anyway. However, as you mention even browser makers are phasing out the sync option I feel there is not much to argue about, anymore… 😺

[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