Support @import statements in Less pre-processor

[GoogleCodeExporter]

One of the major benefits in Less is being able to define elements (variables, 
mixins, etc) in files and include them where necessary via the @import 
statement.

We would love to be able to use the Less processor with imports in wro4j 
however the size of our CSS files makes this prohibitively slow as a 
post-processor.

Any chance you / we could work out a pre-processor solution? Less is meant to 
support Rhino and perhaps all we need to do is pass filenames instead of 
resource streams / strings (I obviously need to flesh this idea out).

Your thoughts, Alex?

Original issue reported on code.google.com by gnoodl on 31 Aug 2012 at 1:29

[GoogleCodeExporter]

The @import statements are not supported by LessCssProcessor by default, simply 
because less can't locate resources from arbitrary location (which is a wro4j 
concern). That is why the CssImportPreProcessor exist. 

If you store your variables and mixins in separate files and want to use the 
LessCssProcessor as a preProcessor, you can do that by adding cssImport 
preProcessor before LessCss.

Another way to improve processing time when using less, is to apply the 
processor only on resources having a certain extension (ex: *.less). Thus, the 
LessCssProcessor (which is slow by its nature because of Rhino) will be applied 
only on resources having *.less extension.

From my point of view, this issue has a solution and doesn't require any 
further action. I will close it with WONTFIX resolution. 
Let me know if you manage to use less processor together with cssImport pre 
processor and if it works as expected. Feel free to reopen issue if you don't 
agree.

Original comment by alex.obj...@gmail.com on 31 Aug 2012 at 3:08

• Changed state: WontFix

[GoogleCodeExporter]

Hi Alex

Using the cssImport pre-processor doesn't seem to work (using the Bootstrap 
less files in wro4j-demo). In fact, using this seems to pass various @import-ed 
less files through the lessCss processor as stand-alone resources. This does 
not work as the less parser fails to find mixins and variables

Original comment by gnoodl on 2 Sep 2012 at 11:56

[GoogleCodeExporter]

Indeed, the LessCss processor is applied on each import individually. I'll 
reopen the issue and will provide a way to make it possible to apply LessCss 
processor on the entire css content (original + imported).

Original comment by alex.obj...@gmail.com on 3 Sep 2012 at 6:43

• Changed state: Accepted

[GoogleCodeExporter]

Hi Alex

I've found a solution for handling @import statements in less files when the 
LessCssProcessor is used as a pre-processor.

There were several problems around this but hopefully we can come up with a 
nice implementation.

Problem 1: env.rhino.js sets XHR status to undefined
====================================================

less.js treats this as an XHR error and aborts the request. Either patching 
env.rhino.js or less.js fixes the issue

env.rhino.js
------------
Before
    xhr.status = parseInt(connection.responseCode,10) || undefined;
After
    xhr.status = parseInt(connection.responseCode,10) || 0;

less.js
-------
Before
    if (xhr.status === 0 || (xhr.status >= 200 && xhr.status < 300))
After
    if (xhr.status === 0 || (xhr.status >= 200 && xhr.status < 300) || typeof xhr.status === 'undefined')

Alternatively, less has a specific Rhino build that may be more appropriate to 
use here but I haven't tried it.

Problem 2: window.location.href is set to project dir, resulting in 404s for 
relative URL requests
================================================================================
==================

Setting the location.href property to the resource URI fixes the issue here. In 
my test, I passed the resource URI to LessCss.less() and passed that to the 
lessit() function in run.js. In there, I added this before initialising the 
less parser

    location.href += '/src/main/webapp' + uri;

We'd probably want to pass the build directory in as well but I didn't get that 
far.

Anyway, let me know if this helps.

Original comment by gnoodl on 3 Sep 2012 at 6:56

[GoogleCodeExporter]

That would work only for servletContext relative resources. What about the 
resources located in the classpath or other location? Would less.js be able to 
locate them properly? 

I would still prefer handle the @import statements in wro4j instead of letting 
less do that job, as it cannot locate properly all type of resources.

Original comment by alex.obj...@gmail.com on 3 Sep 2012 at 7:34

[GoogleCodeExporter]

The next release (1.4.10) will use node version of LessCSs as default (if lessc 
is available) and will fallback to rhino otherwise. Thus, you'll get that 
functionality by installing node.js and less npm. 

Hacking the env.js and less.js doesn't work for all cases and is hard to 
maintain when migrating to newer version of less.js or env.js.

Closing this issue with WONTFIX resolution. Feel free to reopen if you don't 
agree.

Original comment by alex.obj...@gmail.com on 18 Sep 2012 at 3:54

• Changed state: WontFix