Debugging LESS files from Bootswatch for OJS3 - Source Maps?

I’d like to use source mapping in Chrome Dev Tools / Firefox Inspector to map compiled css to the original LESS files. My local OJS3 instance runs on virtualbox, though. Is this possible? If so, how? If not, how do other users debug their less files?

Hi @barto,

We use the lessphp compiler, [CORRECTION: See below!] which is called from lib/pkp/classes/template/PKPTemplateManager.inc.php in the compileLess function. You can see there that the compress option is currently turned on – I’d suggest turning that off if you want the compiled CSS to be more readable. If you also call setPreserveComments, it’ll cause code headers to remain in the compiled CSS, and those include pathnames for the source .less files.

Don’t forget to nuke the compiled CSS from your cache subdirectory to cause the compiler to kick into action!

Regards,
Alec Smecher
Public Knowledge Project Team

thanks, @asmecher.

The CSS now is more readable, but I still don’t get direct source mapping to the uncompiled less files.

But after some googling, it has become apparent that lessphp doesn’t support source mapping: Source-Map Support · Issue #531 · leafo/lessphp · GitHub

However, “less.php” does GitHub - oyejorge/less.php: less.js ported to PHP.

It would be so much easiert to customize OJS themes if we could have proper source maps. Also, lessphp hasn’t received any updates in a long time, whereas less.php is being actively developed.

Maybe consider switching less compilers.

Hi @barto,

Ah, my mistake! We’re actually already using the oyejorge compiler, not the leafo one. Have you tried configuring it for source maps?

Regards,
Alec Smecher
Public Knowledge Project Team

No, I haven’t as I don’t know enough php. But it seems like these four lines should be included in the compileLess function

$options = array( 'sourceMap' => true );
$parser = new Less_Parser($options);
$parser->parseFile( '/var/www/mysite/bootstrap.less', '/mysite/' );
$css = $parser->getCss();

with the correct paths to get source maps. Right?

Hi @barto,

All you’ll need to do is adjust the options array being given to the Less_Parser constructor. That’s in the function identified above (where e.g. the compress option is already specified).

Regards,
Alec Smecher
Public Knowledge Project Team

Would someone be able to provide the code to implement this properly as Source Maps are basically essential to be able to do theme updates on a remote location (as opposed to a dev version locally)

Cheers - Marc

Hi @mbehiels,

The Less compiler is initialized at pkp-lib/PKPTemplateManager.inc.php at ojs-3_1_0-0 · pkp/pkp-lib · GitHub. The available options are documented on the LessCSS documentation on source maps.

Regards,
Alec Smecher
Public Knowledge Project Team

I think it’d be good if we did this by default. I’ve filed an issue for future consideration: