webperf-snippets 1.15.0 → 1.17.0

package/snippets/Loading/CSS-Media-Queries-Analysis.js

@@ -1,211 +1,213 @@
 // Analyze CSS @media rules for viewports bigger than a specified breakpoint
 // Default minWidth = 768 (px), but you can customize it
 
-async function analyzeCSSMediaQueries(minWidth = 768) {
-  // @shared ownRequestUrl
-  // The URL a snippet requests when it reads a file of the page itself (fetch, a HEAD request,
-  // new Image()). The fragment never reaches the server or the HTTP cache key, so the file still
-  // comes from the cache, but it stays in the name of the Resource Timing entry of the request,
-  // which is how isOwnRequest leaves these requests out of what the page loaded.
-  function ownRequestUrl(url) {
-    try {
-      const parsed = new URL(url, location.href);
-      if (!/^https?:$/.test(parsed.protocol)) return url;
-      parsed.hash = "webperf-snippets";
-      return parsed.href;
-    } catch {
-      return url;
-    }
-  }
-  // @end-shared ownRequestUrl
-
-  const SCRIPT = "CSS-Media-Queries-Analysis";
-  const MAX_ITEMS = 50;
-  const WARNING_BYTES = 50 * 1024;
-  const stylesheets = [...document.styleSheets];
-  const rules = []; // one per @media rule: { source, inline, mediaQuery, classes, properties, bytes }
-  let corsBlockedCount = 0;
-
-  // Helper to check if media query targets bigger than specified breakpoint
-  function isBiggerThanBreakpoint(mediaText) {
-    if (!mediaText) return false;
-
-    // Check for min-width greater than specified breakpoint
-    const minWidthMatch = mediaText.match(/min-width:\s*(\d+)(px|em|rem)/i);
-    if (minWidthMatch) {
-      const value = parseInt(minWidthMatch[1]);
-      const unit = minWidthMatch[2].toLowerCase();
-
-      if (unit === "px" && value > minWidth) return true;
-      if (unit === "em" && value > minWidth / 16) return true; // Convert to em
-      if (unit === "rem" && value > minWidth / 16) return true; // Convert to rem
+(() => {
+  async function analyzeCSSMediaQueries(minWidth = 768) {
+    // @shared ownRequestUrl
+    // The URL a snippet requests when it reads a file of the page itself (fetch, a HEAD request,
+    // new Image()). The fragment never reaches the server or the HTTP cache key, so the file still
+    // comes from the cache, but it stays in the name of the Resource Timing entry of the request,
+    // which is how isOwnRequest leaves these requests out of what the page loaded.
+    function ownRequestUrl(url) {
+      try {
+        const parsed = new URL(url, location.href);
+        if (!/^https?:$/.test(parsed.protocol)) return url;
+        parsed.hash = "webperf-snippets";
+        return parsed.href;
+      } catch {
+        return url;
+      }
     }
+    // @end-shared ownRequestUrl
+
+    const SCRIPT = "CSS-Media-Queries-Analysis";
+    const MAX_ITEMS = 50;
+    const WARNING_BYTES = 50 * 1024;
+    const stylesheets = [...document.styleSheets];
+    const rules = []; // one per @media rule: { source, inline, mediaQuery, classes, properties, bytes }
+    let corsBlockedCount = 0;
+
+    // Helper to check if media query targets bigger than specified breakpoint
+    function isBiggerThanBreakpoint(mediaText) {
+      if (!mediaText) return false;
+
+      // Check for min-width greater than specified breakpoint
+      const minWidthMatch = mediaText.match(/min-width:\s*(\d+)(px|em|rem)/i);
+      if (minWidthMatch) {
+        const value = parseInt(minWidthMatch[1]);
+        const unit = minWidthMatch[2].toLowerCase();
+
+        if (unit === "px" && value > minWidth) return true;
+        if (unit === "em" && value > minWidth / 16) return true; // Convert to em
+        if (unit === "rem" && value > minWidth / 16) return true; // Convert to rem
+      }
 
-    // max-width only queries are for smaller viewports
-    return false;
-  }
+      // max-width only queries are for smaller viewports
+      return false;
+    }
 
-  // Classes and declarations inside the rule, not in its media query. A class starts with a
-  // letter, an underscore or a hyphen, so values such as 1.5rem do not count
-  function countClassesAndProperties(innerCss) {
-    const classMatches = innerCss.match(/\.-?[_a-zA-Z][\w-]*/g) || [];
-    const propertyMatches = innerCss.match(/[a-z-]+\s*:/g) || [];
-    return { classes: classMatches.length, properties: propertyMatches.length };
-  }
+    // Classes and declarations inside the rule, not in its media query. A class starts with a
+    // letter, an underscore or a hyphen, so values such as 1.5rem do not count
+    function countClassesAndProperties(innerCss) {
+      const classMatches = innerCss.match(/\.-?[_a-zA-Z][\w-]*/g) || [];
+      const propertyMatches = innerCss.match(/[a-z-]+\s*:/g) || [];
+      return { classes: classMatches.length, properties: propertyMatches.length };
+    }
 
-  // Helper to calculate byte size
-  function getByteSize(text) {
-    return new Blob([text]).size;
-  }
+    // Helper to calculate byte size
+    function getByteSize(text) {
+      return new Blob([text]).size;
+    }
 
-  // Helper to format bytes
-  // @shared formatBytes
-  function formatBytes(bytes) {
-    if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
-    if (bytes === 0) return "0 B";
-    const units = ["B", "KB", "MB", "GB"];
-    const i = Math.max(0, Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1));
-    return (bytes / Math.pow(1024, i)).toFixed(1) + " " + units[i];
-  }
-  // @end-shared formatBytes
+    // Helper to format bytes
+    // @shared formatBytes
+    function formatBytes(bytes) {
+      if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return "-";
+      if (bytes === 0) return "0 B";
+      const units = ["B", "KB", "MB", "GB"];
+      const i = Math.max(0, Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1));
+      return (bytes / Math.pow(1024, i)).toFixed(1) + " " + units[i];
+    }
+    // @end-shared formatBytes
 
-  function addRule(source, inline, mediaQuery, fullCss, innerCss) {
-    if (!isBiggerThanBreakpoint(mediaQuery)) return;
-    rules.push({ source, inline, mediaQuery, ...countClassesAndProperties(innerCss), bytes: getByteSize(fullCss) });
-  }
+    function addRule(source, inline, mediaQuery, fullCss, innerCss) {
+      if (!isBiggerThanBreakpoint(mediaQuery)) return;
+      rules.push({ source, inline, mediaQuery, ...countClassesAndProperties(innerCss), bytes: getByteSize(fullCss) });
+    }
 
-  // Parse CSS text to find @media rules, for stylesheets read with fetch
-  function parseMediaQueriesFromCSS(cssText, source) {
-    const mediaRegex = /@media\s*([^{]+)\{((?:[^{}]|\{[^{}]*\})*)\}/g;
-    let match;
-    while ((match = mediaRegex.exec(cssText)) !== null) {
-      addRule(source, false, match[1].trim(), match[0], match[2]);
+    // Parse CSS text to find @media rules, for stylesheets read with fetch
+    function parseMediaQueriesFromCSS(cssText, source) {
+      const mediaRegex = /@media\s*([^{]+)\{((?:[^{}]|\{[^{}]*\})*)\}/g;
+      let match;
+      while ((match = mediaRegex.exec(cssText)) !== null) {
+        addRule(source, false, match[1].trim(), match[0], match[2]);
+      }
     }
-  }
 
-  // Process stylesheets
-  for (let sheetIndex = 0; sheetIndex < stylesheets.length; sheetIndex++) {
-    const sheet = stylesheets[sheetIndex];
-    const inline = !sheet.href;
-    const source = sheet.href || `<style> tag #${sheetIndex}`;
-
-    try {
-      const sheetRules = sheet.cssRules || sheet.rules;
-      if (sheetRules) {
-        [...sheetRules].forEach((rule) => {
-          if (rule.type === CSSRule.MEDIA_RULE) {
-            const inner = [...rule.cssRules].map((r) => r.cssText).join("");
-            addRule(source, inline, rule.media.mediaText, rule.cssText, inner);
+    // Process stylesheets
+    for (let sheetIndex = 0; sheetIndex < stylesheets.length; sheetIndex++) {
+      const sheet = stylesheets[sheetIndex];
+      const inline = !sheet.href;
+      const source = sheet.href || `<style> tag #${sheetIndex}`;
+
+      try {
+        const sheetRules = sheet.cssRules || sheet.rules;
+        if (sheetRules) {
+          [...sheetRules].forEach((rule) => {
+            if (rule.type === CSSRule.MEDIA_RULE) {
+              const inner = [...rule.cssRules].map((r) => r.cssText).join("");
+              addRule(source, inline, rule.media.mediaText, rule.cssText, inner);
+            }
+          });
+        }
+      } catch {
+        // Cross-origin stylesheet without CORS: try to fetch it
+        if (sheet.href) {
+          try {
+            const response = await fetch(ownRequestUrl(sheet.href));
+            parseMediaQueriesFromCSS(await response.text(), sheet.href);
+          } catch {
+            corsBlockedCount++;
           }
-        });
-      }
-    } catch {
-      // Cross-origin stylesheet without CORS: try to fetch it
-      if (sheet.href) {
-        try {
-          const response = await fetch(ownRequestUrl(sheet.href));
-          parseMediaQueriesFromCSS(await response.text(), sheet.href);
-        } catch {
-          corsBlockedCount++;
         }
       }
     }
-  }
 
-  // --- One item per distinct query ------------------------------------------------------
-
-  const byQuery = new Map();
-  for (const r of rules) {
-    const q = byQuery.get(r.mediaQuery) ?? { mediaQuery: r.mediaQuery, rules: 0, sources: new Set(), classes: 0, properties: 0, bytes: 0 };
-    q.rules++;
-    q.sources.add(r.source);
-    q.classes += r.classes;
-    q.properties += r.properties;
-    q.bytes += r.bytes;
-    byQuery.set(r.mediaQuery, q);
-  }
-  const queries = [...byQuery.values()]
-    .map(({ sources, ...q }) => ({
-      mediaQuery: q.mediaQuery,
-      rules: q.rules,
-      files: sources.size,
-      classes: q.classes,
-      properties: q.properties,
-      bytes: q.bytes,
-    }))
-    .sort((a, b) => b.bytes - a.bytes);
-
-  const bySourceMap = new Map();
-  for (const r of rules) {
-    const s = bySourceMap.get(r.source) ?? { source: r.source, inline: r.inline, rules: 0, bytes: 0 };
-    s.rules++;
-    s.bytes += r.bytes;
-    bySourceMap.set(r.source, s);
-  }
-  const bySource = [...bySourceMap.values()];
-
-  const totalBytes = rules.reduce((sum, r) => sum + r.bytes, 0);
-  const uniquenessRatio = rules.length ? Math.round((queries.length / rules.length) * 1000) / 1000 : 0;
-
-  // --- Issues ----------------------------------------------------------------------------
-
-  const issues = [];
-  if (rules.length === 0) {
-    issues.push({ code: "no-wide-rules", severity: "info", message: `No @media rules for viewports wider than ${minWidth}px` });
-  } else {
-    issues.push({
-      code: "wide-rules",
-      severity: totalBytes > WARNING_BYTES ? "warning" : "info",
-      message: `${rules.length} @media rules for viewports wider than ${minWidth}px add ${formatBytes(totalBytes)} of CSS that narrower screens download and parse without using. Move them to a stylesheet with a media attribute, such as <link rel="stylesheet" href="wide.css" media="(min-width: ${minWidth + 1}px)">, which narrower screens fetch at low priority without blocking rendering`,
-    });
-    if (rules.length >= 20 && uniquenessRatio < 0.1) {
+    // --- One item per distinct query ------------------------------------------------------
+
+    const byQuery = new Map();
+    for (const r of rules) {
+      const q = byQuery.get(r.mediaQuery) ?? { mediaQuery: r.mediaQuery, rules: 0, sources: new Set(), classes: 0, properties: 0, bytes: 0 };
+      q.rules++;
+      q.sources.add(r.source);
+      q.classes += r.classes;
+      q.properties += r.properties;
+      q.bytes += r.bytes;
+      byQuery.set(r.mediaQuery, q);
+    }
+    const queries = [...byQuery.values()]
+      .map(({ sources, ...q }) => ({
+        mediaQuery: q.mediaQuery,
+        rules: q.rules,
+        files: sources.size,
+        classes: q.classes,
+        properties: q.properties,
+        bytes: q.bytes,
+      }))
+      .sort((a, b) => b.bytes - a.bytes);
+
+    const bySourceMap = new Map();
+    for (const r of rules) {
+      const s = bySourceMap.get(r.source) ?? { source: r.source, inline: r.inline, rules: 0, bytes: 0 };
+      s.rules++;
+      s.bytes += r.bytes;
+      bySourceMap.set(r.source, s);
+    }
+    const bySource = [...bySourceMap.values()];
+
+    const totalBytes = rules.reduce((sum, r) => sum + r.bytes, 0);
+    const uniquenessRatio = rules.length ? Math.round((queries.length / rules.length) * 1000) / 1000 : 0;
+
+    // --- Issues ----------------------------------------------------------------------------
+
+    const issues = [];
+    if (rules.length === 0) {
+      issues.push({ code: "no-wide-rules", severity: "info", message: `No @media rules for viewports wider than ${minWidth}px` });
+    } else {
       issues.push({
-        code: "repeated-queries",
-        severity: "info",
-        message: `${queries.length} distinct queries repeat across ${rules.length} @media blocks, the pattern of component-scoped or compiled CSS. Grouping the rules of each query under one block shortens the stylesheets`,
+        code: "wide-rules",
+        severity: totalBytes > WARNING_BYTES ? "warning" : "info",
+        message: `${rules.length} @media rules for viewports wider than ${minWidth}px add ${formatBytes(totalBytes)} of CSS that narrower screens download and parse without using. Move them to a stylesheet with a media attribute, such as <link rel="stylesheet" href="wide.css" media="(min-width: ${minWidth + 1}px)">, which narrower screens fetch at low priority without blocking rendering`,
       });
+      if (rules.length >= 20 && uniquenessRatio < 0.1) {
+        issues.push({
+          code: "repeated-queries",
+          severity: "info",
+          message: `${queries.length} distinct queries repeat across ${rules.length} @media blocks, the pattern of component-scoped or compiled CSS. Grouping the rules of each query under one block shortens the stylesheets`,
+        });
+      }
+    }
+    if (corsBlockedCount > 0) {
+      issues.push({ code: "unreadable-stylesheets", severity: "info", message: `${corsBlockedCount} cross-origin stylesheet(s) could not be read, so their @media rules are not counted` });
     }
-  }
-  if (corsBlockedCount > 0) {
-    issues.push({ code: "unreadable-stylesheets", severity: "info", message: `${corsBlockedCount} cross-origin stylesheet(s) could not be read, so their @media rules are not counted` });
-  }
 
-  // --- Console output --------------------------------------------------------------------
+    // --- Console output --------------------------------------------------------------------
 
-  console.group(`CSS Media Queries Analysis (min-width > ${minWidth}px)`);
-  console.log(`@media rules: ${rules.length} | distinct queries: ${queries.length} | size: ${formatBytes(totalBytes)}`);
-  if (queries.length > 0) {
-    console.table(
-      queries.map((q) => ({ Query: q.mediaQuery, Rules: q.rules, Files: q.files, Classes: q.classes, Properties: q.properties, Size: formatBytes(q.bytes) }))
-    );
-    console.table(bySource.map((s) => ({ Source: s.source, Rules: s.rules, Size: formatBytes(s.bytes) })));
+    console.group(`CSS Media Queries Analysis (min-width > ${minWidth}px)`);
+    console.log(`@media rules: ${rules.length} | distinct queries: ${queries.length} | size: ${formatBytes(totalBytes)}`);
+    if (queries.length > 0) {
+      console.table(
+        queries.map((q) => ({ Query: q.mediaQuery, Rules: q.rules, Files: q.files, Classes: q.classes, Properties: q.properties, Size: formatBytes(q.bytes) }))
+      );
+      console.table(bySource.map((s) => ({ Source: s.source, Rules: s.rules, Size: formatBytes(s.bytes) })));
+    }
+    issues.forEach((i) => console.log(`[${i.severity}] ${i.message}`));
+    console.groupEnd();
+
+    return {
+      script: SCRIPT,
+      status: "ok",
+      count: queries.length,
+      details: {
+        minWidth,
+        rules: rules.length,
+        totalUnique: queries.length,
+        uniquenessRatio,
+        classes: rules.reduce((sum, r) => sum + r.classes, 0),
+        properties: rules.reduce((sum, r) => sum + r.properties, 0),
+        bytes: totalBytes,
+        bySource: bySource.slice(0, MAX_ITEMS),
+        corsBlockedCount,
+      },
+      items: queries.slice(0, MAX_ITEMS),
+      issues,
+    };
   }
-  issues.forEach((i) => console.log(`[${i.severity}] ${i.message}`));
-  console.groupEnd();
-
-  return {
-    script: SCRIPT,
-    status: "ok",
-    count: queries.length,
-    details: {
-      minWidth,
-      rules: rules.length,
-      totalUnique: queries.length,
-      uniquenessRatio,
-      classes: rules.reduce((sum, r) => sum + r.classes, 0),
-      properties: rules.reduce((sum, r) => sum + r.properties, 0),
-      bytes: totalBytes,
-      bySource: bySource.slice(0, MAX_ITEMS),
-      corsBlockedCount,
-    },
-    items: queries.slice(0, MAX_ITEMS),
-    issues,
-  };
-}
-
-// Run with default breakpoint (768px)
-analyzeCSSMediaQueries();
-
-// Or customize the breakpoint:
-// analyzeCSSMediaQueries(1024);  // for desktop
-// analyzeCSSMediaQueries(480);   // for small tablets
+
+  // The breakpoint is 768px. For another one, call the function from the console:
+  // analyzeCSSMediaQueries(1024);  // for desktop
+  // analyzeCSSMediaQueries(480);   // for small tablets
+  window.analyzeCSSMediaQueries = analyzeCSSMediaQueries;
+
+  return analyzeCSSMediaQueries();
+})();