Currently it's not possible for Vector to override certain rules in MediaWiki core defined by ResourceLoader that are scoped to @screen. Without fixing this Vector is forced to write overly-specific CSS rules or use !important which can have consequences on other extension styles that we'd like to avoid. This is expanded upon later in the ticket in the Example section.
Given the following "skin feature" definitions in SkinModule.php along with the skin.json config in Vector 2022
// NOTE: The order of the keys defines the order in which the styles are output. private const FEATURE_FILES = [ 'normalize' => [ 'all' => [ 'resources/src/mediawiki.skinning/normalize.less' ], ], 'elements' => [ 'screen' => [ 'resources/src/mediawiki.skinning/elements.less' ], 'print' => [ 'resources/src/mediawiki.skinning/elements-print.less' ], ], 'content-links' => [ 'screen' => [ 'resources/src/mediawiki.skinning/content.links.less' ] ], ];
"skins.vector.styles": { class: "ResourceLoaderSkinModule", features: { "normalize": true, "elements": true, "content-links": true }, styles: [ "resources/skins.vector.styles/skin.less" ] }
CSS is output in the following order
- normalize /* with "all" media type, no @media block */ - resources/skins.vector.styles/skin.less /* 👈 no specified media block, treated as "all" */ @media screen { - elements /*(screen specific)*/ - content-links } @media print { - elements /*(print specific)*/ }
Styles are grouped by media-query type (all, screen, print), with FEATURE_FILES maintaining the order defined in SkinModule.php and skin related styles coming last in the "all" block if they don't define a media query type.
This output order makes it hard for skins to override core styles because styles in the @screen block can override them with source order. This forces the skin to increase specificity instead of leveraging the cascade. Preferably, if a skin doesn't specified a media query type, it should be placed at the end of the skin output.
- normalize /* with "all" media type, no @media block */ @media screen { - elements /*(screen specific)*/ - content-links } @media print { - elements /*(print specific)*/ } - resources/skins.vector.styles/skin.less /* 👈 Placed at end of CSS output, after core styles */
Example
- Create a ResourceLoaderSkiNModule using the content-links and normalize ResourceLoader features.
- Define a rule like so in a "styles": [ "foo.css" ]
where foo.css is:
a.new {
color: yellow;
}Expected: all links will be yellow. The normalize CSS should appear first.
Actual: Links remain @color-red - this is because the foo.css rule is defined to apply without @screen and @screen rules are added after skin rules.
QA
- no pixel regressions
- remove the !important in typography.less and ensure no regressions (search for "// FIXME: Remove !important with T354975" comment)
Verifying in production
- Use https://en.wikipedia.org/wiki/Wikipedia:Requests_for_adminship/2024_review/Phase_I
- Confirm h2 font size is 24px in standard mode, 21px in small mode.
- Double check: Inspect the h2 it should say font: inherit;
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ❓ | T354975#9614127 |
| 2 | ✅ | T354975#9614127 |
