Note: High priority as we are currently hacking around this inside Minerva. We should look to fix that ASAP.
ResourceLoaderImageModule powerfully allows setting the color of an icon via the ResourceLoader module definition. This is powerful as it lets you vary an icons color e.g. destructive; constructive; black; inverted
However, if you only need an icon in one of the variant forms, you end up with 2 definitions in the CSS - one for black and one for the variant.
In Minerva we have various icons which are only needed in the constructive form, but there is no way to ship the icon css without the black version which bloats the CSS unnecessarily.
In this example, 4 css rules are created when only 2 identical CSS rules are needed (the standard color):
"skins.minerva.content.styles.images": { "class": "ResourceLoaderImageModule", "selectorWithoutVariant": "a.{name}", "selectorWithVariant": "a.{name}", "variants": { "standard": { "color": "#36c", "global": true } }, "images": { "external": { "file": { "ltr": "resources/skins.minerva.content.styles.images/link-external-ltr.svg", "rtl": "resources/skins.minerva.content.styles.images/link-external-rtl.svg" } }, "extiw": { "file": { "ltr": "resources/skins.minerva.content.styles.images/link-internal-ltr.svg", "rtl": "resources/skins.minerva.content.styles.images/link-internal-rtl.svg" } } } },
Proposed:
It should be possible to either
- define defaultColor on a ResourceLoaderImage module definition (The default icon takes this color.)
- disable any default definitions.
- Be smart enough to know when selectorWithVariant and selectorWithoutVariant are identical or selector field is used only to generate one css rule.
https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/skin.json#L178
Let's go with option 1.
This will require a change to the ResourceLoaderImageModule in core.
Acceptance criteria
- Apply defaultColor field to the default image when present
- PHPUnit Tests
- Update docs @ https://www.mediawiki.org/wiki/ResourceLoader/Images
- Update Minerva to use the new mechanism.