"save-used" for style images and fonts missing resources referred via a CSS variable

[danny0838]

It's currently extremely hard to detect whether a font or a style image is actually used if it is referred indirectly via a CSS variable.

For a simple case like:

:root { --var-1: url("var1.bmp"); }
#var1 { background: var(--var-1); }

will work in many cases, as WSB assumes any URL used by a none selector pseudoclass as used.

There is not luck for more complicated cases, though:

@font-face { font-family: var2; src: url("var2.woff"); }
:root { --var-2: var2; }
#var2 { font: 1.1em var(--var-2); }

@keyframes var3 {
  from { background-image: url("var3.bmp"); }
  to { transform: translateX(40px); }
}
:root { --var-3: var3; }
#var3 { animation: var(--var-3) 3s linear infinite; }

In such cases an element has refers to a CSS variable which points to a keyframes or font, causing WSB failed to detect whether the keyframes or font is used, and the resources used by them are thus considered (incorrectly) as unused and not captured.

It is currently very hard to trace the cascaded CSS value of a CSS variable. For example, the value of a CSS variable --var-3 referred by a html > body > div#var3 element can be taken from #var3, div, or even inherted from an ancestor such as body, html, *, or :root.

Reading the computedStyle also don't work as the computed value can be changing if there's an animation. In the above example, the computedStyle of background-image of #var3 toggles between url(".../var3.bmp") and none over time.

Furthermore, resolving the absolute URL for a CSS variable is also difficult. In the above example, the resolved URL of --var-3 whose value is url("var3.bmp") can vary, depending on the stylesheet or document where var(--var-3) is used.