Compile a collection of stringified LESS styles directly in the browser

compile-less.js

/**
 * Compile a collection of stringified LESS styles directly in the browser
 * @param {string} less
 *
 * e.g. compileLess('body { div { border: 2px solid aqua; } }');
 */
function compileLess(less)
{
  var style = document.createElement('style');
  style.type = 'text/less';
  style.innerHTML = less;

  var lessScript = document.createElement('script');
  lessScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.0/less.min.js';

  document.body.appendChild(style);
  document.body.appendChild(lessScript);

  // clear out weird script that gets added after less script runs
  setTimeout(function() {
    var headScripts = document.head.querySelectorAll('style');
    headScripts[headScripts.length - 1].remove();
  }, 1000);
}