This is going to require https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates

I've moved the quote box 'hacks' into https://en.wikipedia.org/wiki/Template:Quote_box/styles.css
Will move to getting that deployed, so that we can remove that specific hack from less.css

In T66578#5385918, @Jdlrobson wrote:

@Ladsgroup I saw you were thinking of doing something TemplateStyles related as part of Wikimania. Is this task in scope for you and something we could collaborate on remotely?

Sure. It might be more complex as we need to make sure all wikis have these styles before removing them from code. If I understood this issue correctly.

http://git.wikimedia.org/blob/mediawiki%2Fextensions%2FMobileFrontend/8d9184c2d4af6e460ccea44be32b88db6565afc7/less%2Fcommon%2Fhacks.less

This link doesn't work. I couldn't find it in the whole mobile frontend extension. I found only this file which seems pretty small to me.

In a more general note, It would be great if I can understand this task better so I can help more efficiently with less chance of breaking everything.

See also: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MinervaNeue/+/df7abeae25914d741168e9d9b77359de76505d91/resources/skins.minerva.content.styles/hacks.less

I think if you can empty MediaWiki:Mobile.css which is similar to Common that would be good progress here Ladsgroup.

In T66578#5405247, @Jdlrobson wrote:

I think if you can empty MediaWiki:Mobile.css which is similar to Common that would be good progress here Ladsgroup.

Sure, do you know if there's a proper support TemplateStyles for mobile? I couldn't find anything in the help page.

Clearing Mobile.css of TemplateStyles requires the same level of effort as cleaning Common.css, more-or-less. As I've described elsewhere and multiple times over, there are multiple cases (hlist, navbox, infobox classes as examples) where classes are being defined in-page, not in a template, nor remotely near any template, and relying on Common.css to provide the related CSS.

I have also requested feedback on how best to implement TemplateStyles for the metatemplates that we have, and no-one got back to me. I consider that discussion a blocker for moving the CSS for those items out. See this archived discussion with nary a single response.

In T66578#5405652, @Ladsgroup wrote:

In T66578#5405247, @Jdlrobson wrote:

I think if you can empty MediaWiki:Mobile.css which is similar to Common that would be good progress here Ladsgroup.

Sure, do you know if there's a proper support TemplateStyles for mobile? I couldn't find anything in the help page.

Theres no magic here. You can use media queries in template styles, so mobile support= mobile styles by default and use media queries for the desktop view. For Minerva specific issues you can use:

body.skin-minerva

defined in-page, not in a template, nor remotely near any template, and relying on Common.css to provide the related CSS.

That's what this bug is about :). Those styles once defined in a template can be disabled on the wiki by disabling $wgMinervaTemplateHacks (mobile doesn't load Mediawiki:Common.css)

In T66578#5405702, @Izno wrote:

Clearing Mobile.css of TemplateStyles requires the same level of effort as cleaning Common.css, more-or-less. As I've described elsewhere and multiple times over, there are multiple cases (hlist, navbox, infobox classes as examples) where classes are being defined in-page, not in a template, nor remotely near any template, and relying on Common.css to provide the related CSS.

In the T228604: Clean up party of Mediawiki:Common.css at Wikimania 2019, we explicitly addressed your concerns, for example we explicitly say we should not move hlist or Make sure the class is only used in the fixed templates. Some times might copy and need the styles too..

Making the common.css or mobile.css completely empty has never been my intention. I'm focusing on reducing the size drastically but still keeping it as much as possible.

I have also requested feedback on how best to implement TemplateStyles for the metatemplates that we have, and no-one got back to me. I consider that discussion a blocker for moving the CSS for those items out. See this archived discussion with nary a single response.

I have no intention of moving navbar, infobox or sidebar out of common.css for now. I can't give a good answer for your question but I would recommend pining devs on this.

In T66578#5407634, @Jdlrobson wrote:

Theres no magic here. You can use media queries in template styles, so mobile support= mobile styles by default and use media queries for the desktop view. For Minerva specific issues you can use:

body.skin-minerva

All of TemplateStyles are wrapped around .mw-parser-output (T228604#5352013) for security reasons, so I think we can't use body there :(

All of TemplateStyles are wrapped around .mw-parser-output (T228604#5352013) for security reasons, so I think we can't use body there :(

Not if you start with body.class - this exception was added a while back and used in a few places. Referencing body will change the scope for this one use case. See T197617

In T66578#5408171, @Jdlrobson wrote:

All of TemplateStyles are wrapped around .mw-parser-output (T228604#5352013) for security reasons, so I think we can't use body there :(

Not if you start with body.class - this exception was added a while back and used in a few places. Referencing body will change the scope for this one use case. See T197617

oh cool. It wraps everything after that into mw-parser-output. That's good enough for our usecase.