Create 02_04b.sql

sql/2019/02_CSS/02_04b.sql

@@ -0,0 +1,36 @@
+#standardSQL
+# 02_04b: Top blend modes
+CREATE TEMPORARY FUNCTION getBlendModes(css STRING)
+RETURNS ARRAY<STRING> LANGUAGE js AS '''
+try {
+  var reduceValues = (values, rule) => {
+    if ('rules' in rule) {
+      return rule.rules.reduce(reduceValues, values);
+    }
+    if (!('declarations' in rule)) {
+      return values;
+    }
+
+    return values.concat(rule.declarations.filter(d => d.property.endsWith('blend-mode')).map(d => d.property.toLowerCase()));
+  };
+  var $ = JSON.parse(css);
+  return $.stylesheet.rules.reduce(reduceValues, []);
+} catch (e) {
+  return [];
+}
+''';
+
+SELECT
+  client,
+  blend_mode,
+  COUNT(0) AS freq,
+  SUM(COUNT(0)) OVER (PARTITION BY client) AS total,
+  ROUND(COUNT(0) * 100 / SUM(COUNT(0)) OVER (PARTITION BY client), 2) AS pct
+FROM
+  `httparchive.almanac.parsed_css`,
+  UNNEST(getBlendModes(css)) AS blend_mode
+GROUP BY
+  client,
+  blend_mode
+ORDER BY
+  freq / total DESC