Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Tossing around the idea of allowing server side less.js processing.
Only thing that I think wouldn't work is functions defined through hook_less_functions.
Variables would still work.
Pros:
- Source maps in devel mode.
- Consistency with "mainline" LESS.
- Drop in ability to use any LESS library that is built for less.js.
Cons:
- Functions as they are currently working in 3.0 branch would not work.
- Reliance of server having node.js and less.js installed.
| Comment | File | Size | Author |
|---|---|---|---|
| #20 | less_sourcemaps.png | 43.99 KB | Ghostthinker |
| #20 | admin.png | 14.96 KB | Ghostthinker |
| #20 | less-less-js-integration-2003628-20.patch | 23.54 KB | Ghostthinker |
| #12 | less_lessc_nodejs.patch | 4.35 KB | corey.aufang |
| #1 | less_lessjs.patch | 1.7 KB | corey.aufang |
Comments
Comment #1
corey.aufang CreditAttribution: corey.aufang commentedSuper crude proof of concept patch attached.
This requires having less.js installed, which requires node.js.
Comment #2
corey.aufang CreditAttribution: corey.aufang commentedAdditional things to consider:
It does not allow for the latest hook_functions functionality, but it does work with the variables perfectly.
Also, token support from within less code is out, but can be handled before the variables are passed in.
lessphp might still be a requirement for less devel mode because it provides convenient list of all included files, recursively, which we use for tracking if a file needs to be rebuilt. Processing would still go through less.js .
Comment #3
corey.aufang CreditAttribution: corey.aufang commentedInstallation:
I built the call to lessc under the assumption that the server was configured using the installation instructions at http://lesscss.org/#usage under the "Server-side usage" heading.
I will look into having a configuration that allows for a custom version of the less.js file in a libraries path, but at the moment that functionality does not exist.
Comment #4
kiova CreditAttribution: kiova commentedI re-tried the patch and flushed all files...
so it could not compile again.
Nodejs was running on my server o i just used the steps to install less explained here;
http://julienrenaux.fr/2013/05/16/how-to-install-node-js-coffeescript-le...
But after all i just go on with terminal and try to run the command lessc style.less > style.css
it smoothly creates style.css as expected.
Comment #5
corey.aufang CreditAttribution: corey.aufang commentedDoes the user that the web server is running under have the ability to call lessc from the location that your .less files are?
Comment #6
kiova CreditAttribution: kiova commentedYes i was in less folder under my bootstrap sub-theme when i was runnig the command.
But only i got permission denied when i runned a command to compile less via different name; style.less > test.css
With style.less > style.css there is no error it creates style.css in the folder.
Comment #7
corey.aufang CreditAttribution: corey.aufang commentedThat's really weird.
I don't know why that would be happening.
Did you install less as global (-g) for node?
Comment #8
kiova CreditAttribution: kiova commentedi installed like it explains here;
http://julienrenaux.fr/2013/05/16/how-to-install-node-js-coffeescript-le...
Comment #9
corey.aufang CreditAttribution: corey.aufang commentedAre you able to compile non-bootstrap files without the patch using lessphp?
Comment #10
kiova CreditAttribution: kiova commentedDear corey,
In next 12 hours i ll be doing a detailed test with checking syslog and inform you better.
Comment #11
kiova CreditAttribution: kiova commentedi could not found any error log in syslog...
Comment #12
corey.aufang CreditAttribution: corey.aufang commentedLatest work on this.
Comment #13
corey.aufang CreditAttribution: corey.aufang commentedThis assumes that you have installed less for node.js such that it is available globally from the command line as 'lessc'.
I installed it using NPM with the command:
npm install -g lessAll testing has been done using the NPM installed version.
Also, LESS Watch does not currently work with the node.js version.
Comment #14
justinlevi CreditAttribution: justinlevi commentedJust for clarity, are you suggesting that using Node.js is preferable to the lessphp at this time?
From what I can tell, lessphp is still struggling with a few critical issues. Apologies if I'm missing this answer in the above comments
https://github.com/leafo/lessphp/issues/432
Comment #15
corey.aufang CreditAttribution: corey.aufang commentedNo.
lessphp is still the preferred library to use with this module.
This issue is purely for tracking experimental functionality to add the option of choosing lessphp or lessjs.
lessphp is a pure php solution that works in most cases and doesnt require special server configuration to work.
lessjs is the mainline implementation of the LESS language and as such doesnt have to take time to catch-up to spec, but it requires that node and less have been installed on the server to function.
If you want to test the patch supplied in this ticket, feel free. But I am not supporting it as I do other released features of this module.
I also do not provide support for issues with the lessphp library.
If there is a bug you are having with the module, I will help as much as I can. But, if the bug is determined to be in the lessphp library, all I can do is point you to the lessphp issue queue on github.
Comment #16
oyejorge CreditAttribution: oyejorge commentedI've been working on a less compiler in php that you might like. It's essentially a translation of the less.js project so the compiled css is nearly identical to results from the official compiler. It's currently compatible with less.js 1.5.1 and 1.6.1 is in the works.
Comment #17
corey.aufang CreditAttribution: corey.aufang commentedI'll take a look.
Comment #18
zirafa CreditAttribution: zirafa commentedCould this work with Grunt? I've been playing around with grunt-contrib-watch and grunt-contrib-less to automatically compile files, but would like to take advantage of some of the features of this module, particularly the ability to expose LESS variables through the Drupal UI.
Comment #19
corey.aufang CreditAttribution: corey.aufang commentedI don't think this could work with Grunt.
When using lessjs as the processor for the Less module, lessjs is not writing files to disk. The output is returned to the module and then processed for path corrections and then written to disk. This also ensures that the permissions on the file are fully accessible to the web server.
So Grunt sitting and watching for changes would most likely run into the pathing and permissions problems.
Also, there is the less watch functionality built into the latest version of the module and works specifically with lessphp. It automatically checks for changes and inline-reloads the compiled styles in the browser.
I'm going to be writing a function that will give me a list of dependent files. This will allow the less watch functionality to work with the lessjs processor as well.
Comment #20
Ghostthinker CreditAttribution: Ghostthinker commentedHi,
I made this patch integrate with teh admin settings so you can chose the compiler. very basic, but wirking for me:
There is also an option to embed source maps in the css
I had some Problmes with my editor removing whitespace only lines, so the diff is hard to read. My setup is
Would be great if this kind auf function could find a way into your great module.
Comment #21
corey.aufang CreditAttribution: corey.aufang commentedI actually have something very similar to that in my local development copy.
I've been focusing on my FPA module (https://drupal.org/project/fpa) but will be swinging back around to this in the next week or so.
Comment #22
Ghostthinker CreditAttribution: Ghostthinker commentedHi, some update from my side. I've been using the less.js now for over two weeks and it works great. My designer sent me flowers and kisses for the source map support :)
@corey contact me if you need any assitance in putting this into the module.
Comment #23
corey.aufang CreditAttribution: corey.aufang commentedMy work on my FPA module is pretty much complete for now so I will be using my time for LESS now.
I have less.js running now in a bit cleaner method rather than using the STDIN approach I was using before.
I currently have source maps automatically enabled if you are in "LESS developer mode".
Should it be a separate checkbox?
When enabled, they are generated at the bottom of the compiled source and don't really interfere with viewing the compiled output directly.
I also think I have found a way to have the LESS watch mode work even when using less.js.
http://lesscss.org/usage/#command-line-usage-makefile
When this argument is used, a space separated list of @import'd files is returned, or at least that's how it appears.
Any other thoughts or ideas?
Comment #25
corey.aufang CreditAttribution: corey.aufang commentedI'm going to be abstracting the calls to proc_open into a class in order to reduce the chance of exploitation.
Just a little extra warranted paranoia.
Comment #26
Ghostthinker CreditAttribution: Ghostthinker commentedThe abstraction is a good idea. One should always be carefull when calling system function with dynamic parameters is required.
I think yes. In my modified version it did this because some of my developers didn't want it, is makes the result ing css quite big.
Comment #27
corey.aufang CreditAttribution: corey.aufang commentedI just checked your patch and I think you were seeing drastically inflated .css files is because you were using the --source-map-less-inline option, which appends the entire source file for .less file, including any that are @import'ed.
In my latest code I have it working without including the entire .less source, so it's only the actual mapping information, and then it links back to the original file.
I also have this working for @import'ed files that are added through import path functionality: #988552: add import paths
I'm not sure if the current 7.x-3.x-dev is completely functional at the moment, but I have minimal source maps working on my local copy.
I would prefer to have as few options as needed on the configuration page that apply to LESS developer mode, but I'm not completely opposed to to having a separate checkbox.
I just did think of one thing that sways favor towards having the checkbox, even with minimal maps, is that Chrome doesn't allow inspection of the compiled output by default if a source map is detected, and having a separate option would allow you to inspect the generated .css file.
Comment #29
corey.aufang CreditAttribution: corey.aufang commentedNeed to make it so users can download and run server side lessc from the libraries directory.
This is for OS's that might have old versions in their default repos, or shared hosting that has node but not a newer version of lessc.
I tested locally and it seems to work.
Comment #30
corey.aufang CreditAttribution: corey.aufang commentedIn regards to #2003628-29: Add ability to use node.js version of LESS, that is a bad idea.
Shell commands should not be run on scripts that can be set in the libraries folder.
Requiring it to be installed through NPM would be far safer.
Comment #32
corey.aufang CreditAttribution: corey.aufang commentedI think the latest work in Dev is "Pretty Good&tm;".
If anyone has input, please add it here.
Comment #36
corey.aufang CreditAttribution: corey.aufang commentedGah, automated testing doesn't work here yet....
Comment #37
ckngProbably some notes and documentation would help.
I tested latest 7.x-3.x-dev and 7.x-4.x-dev, both have the same issue.
+ original lessphp (http://leafo.net/lessphp/):
no longer detected, was working in 7.x.-3.0
+ less.php - http://lessphp.gpeasy.com/:
detected and working
+ less.js - http://lesscss.org/:
not detected
nodejs and lessc accessible to all users including apache/php user. Tested with lessc version 1.5.1, 1.7.5 and 2.0.0
Comment #38
corey.aufang CreditAttribution: corey.aufang commentedCheck your PATH.
Currently less.js is run by calling the command 'lessc' and does not use an absolute path, so your apache user might not have lessc in its path.
Comment #39
ckngThe path is correct and all users including apache/php has access to the lessc command. This is on Ubuntu 12.04.
Comment #40
corey.aufang CreditAttribution: corey.aufang commentedI just pushed a bunch of changes to the 4.x branch to clean up a lot of the implementations for each possible engine.
Please download and check to see if you are still getting the error.
Comment #41
ckngTested latest dev, working fine for node.js
Additional notes for Debian/Ubuntu user/server, probably could add to README.
Apache with mod_php:
- edit /etc/apache2/envvars
- add
Apache with php-fpm:
- edit /etc/php5/fpm/pool.d/www.conf
- add
/path/to/node_modules/bin as in path to lessc.
For lessc to work, I also have to add
npm install -g autoprefixerComment #42
corey.aufang CreditAttribution: corey.aufang commentedI found and fixed an issue that was requiring less.js and autoprefixer to be installed in all situations.
You should be able to use less.js without having to install autoprefixer now.
Comment #43
corey.aufang CreditAttribution: corey.aufang commentedMarking as fixed as 7.x-4.0 will be released soon.
If you are having any issues with less.js support through this module, please open a new ticket.