Houdini CSS.registerProperty() and custom property animation

[LeaVerou]

In addition to how this is used, we can also study whether custom properties are present in @keyframes. How many of those are actually declared, and how many fail to animate?

[LeaVerou]

We know which ones of the properties that are actually applied have been registered via CSS.registerProperty() from the cssvars custom metric (they have a "type"). However, this will not tell us anything about properties that are only used in animation and not applied anywhere else, unless the animation was actually playing at the moment the var tree was created. We could also just look for CSS.registerProperty( in JS files.

For custom property animation, we can traverse rules with "type": "keyframes", then look in rule.keyframes.declarations.property and store those that start with "--".

[LeaVerou]

I just pushed JS for which custom properties are animated, but we should also write some JS that operates on the cssvars custom metric to extract CSS properties with a type. That's sufficiently simple that it can be done directly in the SQL.

[rviscomi]

Since you have a good idea of the JS implementation, would you be able to write the script portion of the "extract CSS properties with a type" query? TBH I don't understand the custom metric result structure very well.

[LeaVerou]

Sure! I'll remove the Has JS label, I think that was added just because there is JS for the custom metric. Btw, is it possible to correlate the custom metric with the AST in a query?

[rviscomi]

Btw, is it possible to correlate the custom metric with the AST in a query?

The custom metric is aggregated at the page level and the ASTs are at the stylesheet level, so we'd need to aggregate the AST to page-level before joining together. I'd need to see what you had in mind to be sure, but conceptually it's possible.

[LeaVerou]

Well, it's the AST that tells us which custom properties are present in keyframes, and it's the custom metric that tells us which of those are actually registered. So, to answer the titular question, we'd need both.

[LeaVerou]

So, there's already js/03-custom-prop-animation.js which returns an array of animated custom properties. I just pushed vars/registered.js which returns an array of registered custom properties that had a computed style at the time the custom metric was computed. This would be interesting to run in its own right, but also to correlate with js/03-custom-prop-animation.js (though there will be false negatives if an animation was not currently run, and it used a custom property that was not used anywhere else)

[rviscomi]

I've run registered.js but it's not producing any results. Is that plausible given very low adoption, or could there be a bug in the JS? It seems like && o.type is never true.

https://github.com/LeaVerou/css-almanac/blob/master/vars/registered.js#L26

[LeaVerou]

I'd expect adoption to be low but not zero. At the very least, it should produce results on my website, lea.verou.me, so if it produces zero results something is off.

[rviscomi]

Thanks, I was able to work this out. There are only 2 desktop pages and 1 mobile page that animate custom properties with computed styles. Incidentally, both pages belong to you! 😆

client	page	prop
desktop	https://lea.verou.me/	--number
desktop	http://lea.verou.me/	--number
mobile	http://lea.verou.me/	--number

[LeaVerou]

Oh wow. I expected it to be low but not that low. Btw are these all the pages that use registered custom properties at all? Or those that also animate them?

[rviscomi]

Both registered and animated. You can also refer to the comment in each sheet for the intended interpretation. There are separate sheets for only registered and only animated.