Disallow the same data URL from being used more than once.
thing {
-webkit-mask-image: url(data:image/svg+xml,...);
mask-image: url(data:image/svg+xml,...);
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
}Repeating a large data URL increases file size unnecessarily. Store the data URL in a custom property once and reuse it with var().
The following are considered problems:
thing {
-webkit-mask-image: url(data:image/svg+xml,%3Csvg%3E%3C/svg%3E);
mask-image: url(data:image/svg+xml,%3Csvg%3E%3C/svg%3E);
}The following patterns are not considered problems:
:root {
--icon: url(data:image/svg+xml,%3Csvg%3E%3C/svg%3E);
}
thing {
-webkit-mask-image: var(--icon);
mask-image: var(--icon);
}- stylelint's
declaration-no-importantand similar deduplication rules