LeaVerou
commented
4 years ago A few thoughts on how we could calculate these metrics:
- Most popular property names can easily be determined from the Rework AST, by counting distinct property names that start with
--. Not sure if we should take times used in the stylesheet into account and weigh them higher if they are used more times. Also, if we adapt Greg's script to count custom properties, this may be even easier, since the count will already be there. - Same as above for values, though we may want to do some kind of normalization first
- Where are CSS properties most used? Count property names that include
var()calls and exclude custom properties. Similarly, count functions that contain avar()call. - What are CSS properties used for? The metric above will answer this to some extent. Another approach would be to try and parse custom property values, or regexp match for common types (e.g. for colors we could color function names, hex, named colors etc), though that would be inaccurate in cases where a variable is used for part of a type, e.g. the hue in
hsl()colors. But it would still be useful to see what % are numbers, strings, whole colors etc - Are they set in JS? This is trickier but both
parsed_cssandsummary_response_bodiescontain aurlfield, so we can join on that to find JS and CSS that are applied to the same page. Or maybe we don't need to, since often custom properties are set in JS and used in JS. Maybe we should just search JS for something like\.style\.setProperty\(['"]--|.css\(\{?['"]--. Of course it misses all the various helpers that may be used to set properties, but perhaps we can still get enough data. Would be good to extract the custom property names and measure most popular property names that are set via JS, and see how it differs from those we found in CSS. - Do they use the fallback parameter? Search values for
var\(.+?\)to find all uses ofvar()(Greg's script could be useful here too), how many matches contain a comma? What are the most popular fallbacks? @supportsis easy, something like (see pen):
for (let rule of ast.stylesheet.rules) {
if (rule.type === "supports" && rule.supports.indexOf("(--") > -1) {
let [,property, value] = rule.supports.match(/\(--(\w+)(?::\s*(.+?))?\)/);
console.log({property, value});
}
}- How frequently are variables explicitly reset to
initial? This should also be easy, we just iterate, and count declarations where the property starts with--and the value isinitial - What is the depth of the dependency graph? Are there any cycles? This is the trickiest of all, but also most illuminating. As a bare minimum we can easily detect cycles where a variable is referencing itself in the same declaration, but going beyond that and building a dependency graph to measure depth is tricky due to the way they cascade, so it's very complicated to figure this out from the parsed CSS. Perhaps we could walk the DOM and read the computed style, which will more reliably tell us what the dependencies are, but that is O(N) on the number of elements. 😢 I'm going to continue thinking on this one.
dooman87
rviscomi
I see last year we only calculated how many websites use custom properties (5%).
This year, I would like to go a lot deeper. E.g.:
var()only, or both? (via custom metric):rootlike static variables? (via custom metric)@supports? If so, what property name do they test for? (via AST)initial? (via custom metric or AST)