The fix for T356540 changed the cdx-mixin-css-icon mixin to use mask-image instead of background-image. As part of that change, the output is now much larger, in part because it contains three copies of the icon SVG, instead of one.
Before (532 bytes):
.minerva-icon--download { background-position: center; background-repeat: no-repeat; background-size: calc(max(1.25em, 20px)); min-width: 20px; min-height: 20px; width: 1.25em; height: 1.25em; display: inline-block; vertical-align: text-bottom; background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"%2354595d\"><path d=\"M17 12v5H3v-5H1v5a2 2 0 002 2h14a2 2 0 002-2v-5z\"/><path d=\"M15 9h-4V1H9v8H5l5 6z\"/></svg>") }
After (1977 bytes):
.minerva-icon--download { min-width: 20px; min-height: 20px; width: 1.25em; height: 1.25em; display: inline-block; vertical-align: text-bottom } @supports not ((-webkit-mask-image:none) or (mask-image:none)) { .minerva-icon--download { background-position: center; background-repeat: no-repeat; background-size: calc(max(1.25em, 20px)) } } @supports (-webkit-mask-image:none) or (mask-image:none) { .minerva-icon--download { -webkit-mask-size: calc(max(1.25em, 20px)); mask-size: calc(max(1.25em, 20px)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } } @supports not ((-webkit-mask-image:none) or (mask-image:none)) { .minerva-icon--download { background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"%23000000\"><path d=\"M17 12v5H3v-5H1v5a2 2 0 002 2h14a2 2 0 002-2v-5z\"/><path d=\"M15 9h-4V1H9v8H5l5 6z\"/></svg>"); filter: invert(0); opacity: 0.87 } .cdx-button:not(.cdx-button--weight-quiet):disabled .minerva-icon--download, .cdx-button--weight-primary.cdx-button--action-progressive .minerva-icon--download, .cdx-button--weight-primary.cdx-button--action-destructive .minerva-icon--download { filter: invert(1) } } @supports (-webkit-mask-image:none) or (mask-image:none) { .minerva-icon--download { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"%23000000\"><path d=\"M17 12v5H3v-5H1v5a2 2 0 002 2h14a2 2 0 002-2v-5z\"/><path d=\"M15 9h-4V1H9v8H5l5 6z\"/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"%23000000\"><path d=\"M17 12v5H3v-5H1v5a2 2 0 002 2h14a2 2 0 002-2v-5z\"/><path d=\"M15 9h-4V1H9v8H5l5 6z\"/></svg>"); background-color: #54595d } }
The output size necessarily increases because we now have to have rules for both background-image and mask-image, but we should try to reduce this as much as possible.
Possible ideas for reduction
- The same data URI repeats three times (for background-image, -webkit-mask-image, and mask-image). Maybe it could be deduplicated by putting it in a CSS variable?
- Evaluation: This would actually increase the size after gzip as we'd introduce new code. Aside of that, there's also the bigger question if such custom properties weren't better off as global ones and not internally scoped.
- The cdx-button-related rules should not be output if param-is-button-icon is set to false, as it is here
- There are 2 @supports blocks and 2 @supports not blocks, perhaps they could be consolidated into 1 block each? (This may be difficult to do given the internal structure of the mixin)
- Evaluation: It seems really difficult to reach this given the current code complexity of the mixin. Also this problem will be reduced massively with T383943 enacted.
- @thiemowmde brought forward the great idea of removing xmls:link from svg root element and only provide it on elements within in the currently 4 icons that need it
Before we get too deep into optimizations, we should check whether the proposed optimization would actually matter after gzip.
Acceptance criteria for done
- Output cdx-button-related rules only if param-is-button-icon is set to false
- Bring mask-* properties in same order as background ones
- Remove xmls:link from svg element (and provide in the inner elements in currently 4 icons that actually make use of it