How prevalent are empty custom properties in CSS?

Analysis
2

While we wait for newer data to become available, I took a look at the 2020 data to get a preview of where we’re at.

I based this off of the all_properties.sql query used by the 2020 Web Almanac’s CSS chapter:

#standardSQL
CREATE TEMPORARY FUNCTION getProperties(css STRING) RETURNS ARRAY<STRING> LANGUAGE js AS '''
try {
	function compute(ast) {
		let ret = {};
		walkDeclarations(ast, ({property, value}) => {
      if (property == '--') {
        incrementByKey(ret, property);
      }
		});
		return ret;
	}
	let ast = JSON.parse(css);
	let props = compute(ast);
	return Object.entries(props).flatMap(([prop, freq]) => {
		return Array(freq).fill(prop);
	});
}
catch (e) {
	return [];
}
'''
OPTIONS (library="gs://httparchive/lib/css-utils.js");
SELECT
  *
FROM (
  SELECT
    client,
    prop,
    ARRAY_AGG(DISTINCT page) pages,
    COUNT(DISTINCT page) AS num_pages,
    COUNT(0) AS freq,
    SUM(COUNT(0)) OVER (PARTITION BY client) AS total,
    COUNT(0) / SUM(COUNT(0)) OVER (PARTITION BY client) AS pct
  FROM
    `httparchive.almanac.parsed_css`,
    UNNEST(getProperties(css)) AS prop
  WHERE
    date = '2020-08-01'
  GROUP BY
    client,
    prop)
ORDER BY
  pct DESC

The results show that the empty custom property is only used on 4 pages a total of 17 times, in the desktop and mobile datasets equally:

https://conquistaimoveisbrasil.com.br/
https://marcioluizcorretor.com.br/
https://unitedbyblue.com/
https://www.yumekoubou.or.jp/

So to answer the top question, it’s not very prevalent at all! It would be interesting to see if there are any major differences in the 2021 data, which I hope to have in a month or two.