Topic on Project:Support desk

[RESOLVED] Resource Loader adds CSS in style tag not load.php?

5
Subfader (talkcontribs)

I'm not sure if I'm using the Ressource Loader correctly.

I have 4 KB worth of CSS for my Special:Search. Since it's only used on that page I don't want to add the CSS to MediaWiki:Common.css.

How can I add it to RL via an extension?

That's my setup:

 $wgResourceModules['MyExt.onSpecialSearch'] = array(
 	'styles' => 'modules/MyExt.onSpecialSearch.css',
 	'localBasePath' => __DIR__,
 	'remoteExtPath' => '/',
 );
 
 //  onBeforePageDisplay ...
 
 if( $title == "Special:Search" ) {
   $out->addModules( 'MyExt.onSpecialSearch' );
 }

This way my CSS is added as a dynamic style tag in the DOM so my CSS rules only apply after the page is painted already with the default CSS.

That's annoying so maybe I do it wrong. I expected the CSS to be added to one of the top load.php link tags.

88.130.101.238 (talkcontribs)

If I understand your question correctly, the problem is not to get the module included on only and exactly Special:Search. That is working correctly. Instead the problem is the order in which your module gets added (after other modules).

According to Manual:$wgResourceModules you can define a key position => top for your module. Maybe you will then have to give your styles a high specificity so that they are not overwritten by those styles, which are loaded after that, but as far as I understand it, this should basically make your styles apply first and only.

Ciencia Al Poder (talkcontribs)

Looking at the documentation, I'd say you should use addModuleStyles instead of addModules

TheDJ (talkcontribs)

Exactly. All CSS that do not belong to JS modules should be loaded using addModuleStyles

Subfader (talkcontribs)

Thanks, now I understand! Will use addModuleStyles for CSS only additions. It adds the code to load.php as expected :)

Reply to "[RESOLVED] Resource Loader adds CSS in style tag not load.php?"