Page MenuHomePhabricator

Implement support for LESS pre-processor in ResourceLoader
Closed, ResolvedPublic

Description

The mobile team is currently using lesscss [1] to maintain CSS. Without less things were quickly becoming messy.

Currently as part of the workflow a Makefile [2] is used to generate less files to css and both CSS and Less files need to be committed to the repository.

It would be awesome if less files could be added directly into ResourceLoader and ResourceLoader could do the compiling on my behalf.

It seems there is a php port [3] so this seems feasible. Thoughts?

[1] http://lesscss.org/
[2] https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/extensions/MobileFrontend.git;a=blob;f=Makefile;h=a6787d2c1ecaf4eaf0304c7e8197db782a3d7dac;hb=HEAD
[3] http://leafo.net/lessphp/


Version: 1.21.x
Severity: enhancement
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=46545

Details

Reference
bz40964

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 1:14 AM
bzimport set Reference to bz40964.
bzimport added a subscriber: Unknown Object (MLST).

This was proposed before, however (though I can't find the bug at the moment) there were two reasons to not implement it:

  • (blocking)

The LESS compiler was too slow to be usable for ResourceLoader. One of the greatest strengths of ResourceLoader is that there is no "build" or "make" process. Instead resources are put through the post-processor(s) and packagers on-demand in the cache miss response. It has very strong caching, so misses are rare. But when it does miss, we need to be able to generate the response in reasonable time (that is < 1 second for all N files).

  • (non-blocking, but depending)

Our current debug mode loads files raw from disk. There is currently (for debug, among other reasons) the paradigm that the post-processor only enhances scripts/styles, never as a requirement for it to be functional. So in the current way of things, any pre-processor wouldn't be an option.

  • (trivial)

There were some voices regarding treatment towards others popular CSS libraries besides LESS (Sass, SCSS, Compass, Bless, ..) etc.

See also the "Caching" and "Notes" section on https://www.mediawiki.org/wiki/ResourceLoader/Features.

lessphp seems to perform rather well. I ran it against several files in the MobileFrontend extension: here's a representative example, mf-settings.less, which is 184 lines / 3097 bytes:

$ time { ~/wiki/lessphp/plessc mf-settings.less &>/dev/null ; }

real	0m0.068s
user	0m0.056s
sys	0m0.009s

FYI we are building the new Agora CSS styles (mw-ui-button, mw-ui-formlist) using Compass. For now the scss source files are in the Agora extension; like Jon we have a Makefile to compile to CSS and commit the results to the repository.

Running make which invokes compass which uses Ruby is pretty slow.
real 0m0.378s
user 0m0.340s
sys 0m0.024s

for 377 lines in 16 sccs files, and twice a long if there's no .sass-cache.

Do we want MediaWiki to support both LESS and SASS/Compass? They seem to fill the same niche, so I'm not sure supporting both in MediaWiki core makes sense. I'm not sure the cost of doubling the code complexity (i.e., supporting both) is worth the benefit, but I'd be interested in what others think.

(Punting and putting both in MediaWiki extensions rather than in MediaWiki core could be an option.)

(In reply to comment #6)

Do we want MediaWiki to support both LESS and SASS/Compass? They seem to fill
the same niche, so I'm not sure supporting both in MediaWiki core makes
sense.

We don't support SASS. We compile SASS by hand and commit both the generated CSS and original SASS source into core. Ditto LESS.

We don't want to continue using two CSS preprocessor languages; that'd be silly. If my patch is merged, we'd settle on LESS, and convert our existing SASS code.

Why LESS and not SASS? Simply because its PHP implementation is decidedly more robust and has a good track record of active development.

(In reply to comment #7)

We don't support SASS. We compile SASS by hand and commit both the generated
CSS and original SASS source into core. Ditto LESS.

Sorry, I was viewing this bug in the context of (the arguably competing) bug 46545. I should have made that clearer in my comment. My view currently is that only this bug or bug 46545 should be resolved/fixed (in MediaWiki core), which I think from reading your comment, you agree with.

Support in core is now under discussion at this MediaWiki RFC:
http://www.mediawiki.org/wiki/Requests_for_comment/LESS

(In reply to comment #8)

My view currently is that only this bug or bug 46545 should be resolved/fixed
(in MediaWiki core), which I think from reading your comment, you agree with.

Yep.

Change 78669 had a related patch set uploaded by Ori.livneh:
Support LESS stylesheets in ResourceLoader

https://gerrit.wikimedia.org/r/78669

Change 78669 merged by Brion VIBBER:
Support LESS stylesheets in ResourceLoader

https://gerrit.wikimedia.org/r/78669