How to deal with custom properties

[bartveneman]

Lately I've been seeing more and more stats with box-shadows, font-sizes and colors reported as var(--baseFontSize) or var(--elevation-1). This is not useful in itself to show in the stats, so I'm wondering:

Should we try to find that custom property up in the CSS cascade to get the actual value and display it in the stats?

There's a risk in that, because the cascase may cause a certain font-size never to be applied. But then again, none of the reported stats is guaranteed to be applied ever.

html {
  --baseFontSize: 16px;
}

main {
  --baseFontSize: 14px;
}

.my_component {
  font-size: var(--baseFontSize); /* Could be 14 or 16, depending on it's location */
}

[hacknug]

I think showing all possible values would make more sense than trying to guess the one that could be used at a given point.

[bartveneman]

So you’d prefer to get the custom properties listed, right?

[hacknug]

Yeah, I think that would be more useful. Even more if next to the property name, we could see a list/array of all possible values found on a site's stylesheets.