Less browser: append a new style tag instead of changing the content of existing tags

Hi,

This is a feature request concerning less-browser.

Current behavior

There are currently 2 ways of compiling a less resource to css client-side: either put it in a <style type="text/less"> or href it in a <link type="text/less">. less will react to these two things.

Unfortunately it reacts in two different ways: for <link>, it downloads the resource, compiles it and adds it to a new <style> (see less-browser/index.js#L186). But for <style>, it compiles the content of the tag and replaces it in place (see less-browser/index.js#L68).

Description of the proposed feature

A single behavior would be nicer, and I believe that adding a new <style> tag is the best option (as opposed to changing tags that were put in the DOM by the application using less). With the current behavior indeed, using a <style type="text/less">, forces you to re-append it to the DOM each time that you perform a less.modifyVars.

You might say that if I want the less resource to stay there and be taken into account at each new modifyVars, I can just use a <link> tag. But it's not always handy. For instance, if you develop a library, using a <link> forces projects using you to maintain a custom webpack config, whereas using a <style> lets you bundle the resource yourself.

If changing the behavior is not possible, it could be enough to add a convention for it (for instance, if the style tag containing the less resource has an id, then it could remain untouched in the DOM and another style tag with the compiled css could be appended by less)

I hope that this is helpful. Anyway, thanks for the great tool!

Start in lib/less-browser/index.js at the linked handling for inline style tags around line 68 and linked resources around line 186. Trace how compilation and less.modifyVars update the DOM. Done means inline text/less tags remain unchanged while compiled CSS is added in a new style tag, with the existing linked-resource behavior preserved.