When in production mode, the @import statements are ignored

[bertrandgorge]

Hello, I'm pretty sure this is not a Chameleon specific issue, but maybe someone here would be able to lead me to the correct place...

I have a SCSS file with an import statement at the top (Google font). It works well while the $wgResourceLoaderDebug = true; is set. In production environment however, the @import statement gets lost in the middle of all concatenated and minimized css, and therefore is ignored (apparently, an import statement must come first, before any css rule in the CSS file).

I tried playing with the position (beforeFunctions) but could not find one that would put the import statement at the top.

The only workaround was to put it in the Mediawiki:Common.css, which works, lucklily.

Thanks for any input about that!

[malberts]

This looks like a difficult problem to solve. You're right the import statement needs to be at the top of the file. I'm not foo familiar with how MediaWiki assembles the final CSS file, but the problem is that it's combining multiple CSS files and that would require some additional processing to move all the imports to the top. The SCSS compiler will produce a CSS file with everything in the right order, which is why it works correctly in debug mode, but once combined your import is out of order. MW is basically combining raw CSS, LESS compiler CSS and SASS compiler CSS. At this point you could now have a few separate CSS files with imports, so it's no longer just as simple as moving one CSS file to the top when combining them. I would argue that's a MW problem then to make sure that the combined CSS is valid.

However, since that doesn't immediately solve the problem, here are some Chameleon workarounds ideas:

1. new LocalSettings.php variable containing a list of web fonts which get loaded separately (I have a rough working example injecting webfont resources with $out->addStyle( $font, 'screen' );)
2. check if it's possible to either ask the SCSS compiler for a list of imports, or scrape it from the raw SCSS or generated CSS, and then inject it as per (1)

I'll also dig a little deeper into how the resource loader works to see if there is another way, but I think that is maybe too much work right now since there is a usable workaround (Common.css).

[bertrandgorge]

I've opened a issue for the ResourceLoader team. Let's hope they can do something about it ? https://phabricator.wikimedia.org/T284629