A partial archive of https://discourse-mediawiki.wmflabs.org as of Saturday May 21, 2022.

Recommendation for dealing with LESS variables

Osnard

Since the introduction of the LESS compiler into ResourceLoader some skins and extensions make use of variables. In most cases those variables are placed in a dedicated file (e.g. variables.less).

As $wgResourceLoaderLESSVars [2][3] is deprecated the only obvious ways to alter the variable values are either by binding to the hook ResourceLoaderGetLessVars [4] or (within a custom RL module) by implementing ResourceLoaderModule::getLessVars. The later one can not be used to actually modify anything outside of that particular module.

So my questions are:

  • Is there a good way to override variables defined by a variables.less file? E.g. if I wanted to derive a new skin from vector but want to change some of the variables.
  • Is there a recommended way to define variables (e.g. in custom skins and extensions) so that they can easily be changed by other skins/extensions or configuration?

[1] https://github.com/wikimedia/mediawiki-skins-Vector/blob/master/variables.less
[2] https://www.mediawiki.org/wiki/Manual:$wgResourceLoaderLESSVars
[3] https://phabricator.wikimedia.org/T140804
[4] https://www.mediawiki.org/wiki/Manual:Hooks/ResourceLoaderGetLessVars

Foxtrott

I am not quite sure that I follow the argument in T140804 (What’s wrong with decoupling stuff?), but it seems that the global variable as well as the hook are or will be deprecated soon. Which leaves ResourceLoaderModule::getLessVars().

The Bootstrap extension just adds LESS variables to a field in the RL module description [1]. It then uses a dedicated RL module that takes variables into account when styles are compiled [2]. I have no idea if using the module description to store additional data is the recommended way to go, but it allows to add LESS variables (and other stuff) dynamically from outside, e.g. from LocalSettings.php.

One difficulty will be that LESS modules are compiled separately, as far as I remember, so you can not just use your own module and add Vector as a dependency. Instead you may need to hijack the Vector module description by doing something like

$GLOBALS[ 'wgResourceModules' ][ 'skins.vector.styles' ][' class' ] = 'FooResourceLoaderModule';

[1] https://github.com/cmln/mw-bootstrap/blob/1.2.4/src/BootstrapManager.php#L162
[2] https://github.com/cmln/mw-bootstrap/blob/1.2.4/src/ResourceLoaderBootstrapModule.php#L169

Osnard

Thanks for the response. Especially for the hint to the phabricator disussion.