Analysis of the top SCSS `if` conditionals using HTTP Archive data from March 2022 (mobile). See the full results at https://docs.google.com/spreadsheets/d/1ZMoqLRu2OpBDi-kLgJdTzAAkZwPeHe5sLHjTjt5vEng/edit?usp=sharing and https://github.com/w3c/csswg-drafts/issues/6684#issuecomment-1076543094 for more context.

getIfConditionals.sql

CREATE TEMPORARY FUNCTION getIfConditionals(payload STRING) RETURNS
ARRAY<STRING> LANGUAGE js AS '''
try {
  var $ = JSON.parse(payload);
  var sass = JSON.parse($['_sass']);

  return sass.scss.stats.ifs.map(i => i.test);
} catch (e) {
  return [];
}
''';


SELECT
  url AS page,
  conditional
FROM
  `httparchive.pages.2022_03_01_mobile`,
  UNNEST(getIfConditionals(payload)) AS conditional

topConditionals.sql

SELECT
  conditional,
  COUNT(0) AS freq,
  COUNT(DISTINCT page) AS pages
FROM
  # Temporary table representing the output of getIfConditionals.sql
  `httparchive._891e3b4658e43551a2162fef8aea726303bb5045.anon87dba83e_2fef_47cd_a62e_38b35547af56`
GROUP BY
  conditional
ORDER BY
  freq DESC