Given the following "skin feature" definitions in `SkinModule.php` along with the `skin.json` config in Vector 2022
```name=core/includes/ResourceLoader/SkinModule.php,lang=php
// 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' ]
],
];
```
```name=Vector/skin.json,lang=json
"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
```lang=css, name=Current CSS output
- 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.
```lang=css, name=Preferred CSS 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 */
```
== QA
- no pixel regressions
- remove the !important in typography.less and ensure no regressions (search for "// FIXME: Remove !important with T354975" comment)