CSS Media Queries Analysis

// Analyze CSS @media rules for viewports bigger than a specified breakpoint
// Default minWidth = 768 (px), but you can customize it
 
function analyzeCSSMediaQueries(minWidth = 768) {
  const stylesheets = [...document.styleSheets];
  const inlineMediaQueries = [];
  const fileMediaQueries = [];
  let inlineTotalClasses = 0;
  let inlineTotalProperties = 0;
  let filesTotalClasses = 0;
  let filesTotalProperties = 0;
  let inlineTotalBytes = 0;
  let filesTotalBytes = 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
    }
 
    // Check for max-width to exclude (mobile-only queries)
    const maxWidthMatch = mediaText.match(/max-width:\s*(\d+)(px|em|rem)/i);
    if (maxWidthMatch && !minWidthMatch) {
      return false; // max-width only queries are for smaller viewports
    }
 
    return false;
  }
 
  // Helper to count classes and properties in CSS text
  function countClassesAndProperties(cssText) {
    const classMatches = cssText.match(/\.[a-zA-Z0-9_-]+/g) || [];
    const propertyMatches = cssText.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 format bytes
  function formatBytes(bytes) {
    if (bytes === 0) return "0 Bytes";
    const k = 1024;
    const sizes = ["Bytes", "KB", "MB"];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
  }
 
  // Iterate through all stylesheets
  stylesheets.forEach((sheet, sheetIndex) => {
    try {
      const rules = sheet.cssRules || sheet.rules;
      if (!rules) return;
 
      const isInline = !sheet.href;
      const source = sheet.href || `<style> tag #${sheetIndex}`;
 
      [...rules].forEach((rule) => {
        // Check if it's a media rule
        if (rule.type === CSSRule.MEDIA_RULE) {
          const mediaText = rule.media.mediaText;
 
          if (isBiggerThanBreakpoint(mediaText)) {
            const cssText = rule.cssText;
            const counts = countClassesAndProperties(cssText);
            const byteSize = getByteSize(cssText);
 
            const mediaQueryData = {
              source: source,
              mediaQuery: mediaText,
              classes: counts.classes,
              properties: counts.properties,
              bytes: byteSize,
              bytesFormatted: formatBytes(byteSize),
            };
 
            if (isInline) {
              inlineMediaQueries.push(mediaQueryData);
              inlineTotalClasses += counts.classes;
              inlineTotalProperties += counts.properties;
              inlineTotalBytes += byteSize;
            } else {
              fileMediaQueries.push(mediaQueryData);
              filesTotalClasses += counts.classes;
              filesTotalProperties += counts.properties;
              filesTotalBytes += byteSize;
            }
          }
        }
      });
    } catch (e) {
      console.warn(`Cannot access stylesheet ${sheetIndex}:`, e.message);
    }
  });
 
  const totalBytes = inlineTotalBytes + filesTotalBytes;
 
  // Display results
  console.group(`📊 CSS Media Queries Analysis (min-width > ${minWidth}px)`);
  console.log(`Total @media rules found: ${inlineMediaQueries.length + fileMediaQueries.length}`);
  console.log(`Total classes: ${inlineTotalClasses + filesTotalClasses}`);
  console.log(`Total properties: ${inlineTotalProperties + filesTotalProperties}`);
  console.groupEnd();
 
  // Mobile Savings Estimate
  console.group("💾 POTENTIAL MOBILE SAVINGS");
  console.log(
    `%cEstimated CSS bytes that mobile doesn't need: ${formatBytes(totalBytes)}`,
    "font-weight: bold; color: #22c55e; font-size: 14px;",
  );
  console.log(`  └─ From inline CSS: ${formatBytes(inlineTotalBytes)}`);
  console.log(`  └─ From external files: ${formatBytes(filesTotalBytes)}`);
  console.log("");
  console.log("💡 By splitting these styles into separate files with media queries,");
  console.log("   mobile users won't need to download, parse, or process this CSS.");
  console.groupEnd();
 
  // Inline CSS Results
  console.group("🔷 INLINE CSS (<style> tags)");
  console.log(`Media queries: ${inlineMediaQueries.length}`);
  console.log(`Classes: ${inlineTotalClasses}`);
  console.log(`Properties: ${inlineTotalProperties}`);
  console.log(`Total size: ${formatBytes(inlineTotalBytes)}`);
  if (inlineMediaQueries.length > 0) {
    // console.table(inlineMediaQueries, [
    //   "source",
    //   "mediaQuery",
    //   "classes",
    //   "properties",
    //   "bytesFormatted",
    // ]);
  } else {
    console.log(`No inline media queries found for viewports > ${minWidth}px.`);
  }
  console.groupEnd();
 
  // External Files Results
  console.group("📁 EXTERNAL FILES (.css files)");
  console.log(`Media queries: ${fileMediaQueries.length}`);
  console.log(`Classes: ${filesTotalClasses}`);
  console.log(`Properties: ${filesTotalProperties}`);
  console.log(`Total size: ${formatBytes(filesTotalBytes)}`);
  if (fileMediaQueries.length > 0) {
    // console.table(fileMediaQueries, [
    //   "source",
    //   "mediaQuery",
    //   "classes",
    //   "properties",
    //   "bytesFormatted",
    // ]);
  } else {
    console.log(`No external file media queries found for viewports > ${minWidth}px.`);
  }
  console.groupEnd();
 
  return {
    summary: {
      total: {
        mediaQueries: inlineMediaQueries.length + fileMediaQueries.length,
        classes: inlineTotalClasses + filesTotalClasses,
        properties: inlineTotalProperties + filesTotalProperties,
        bytes: totalBytes,
        bytesFormatted: formatBytes(totalBytes),
      },
      inline: {
        mediaQueries: inlineMediaQueries.length,
        classes: inlineTotalClasses,
        properties: inlineTotalProperties,
        bytes: inlineTotalBytes,
        bytesFormatted: formatBytes(inlineTotalBytes),
      },
      files: {
        mediaQueries: fileMediaQueries.length,
        classes: filesTotalClasses,
        properties: filesTotalProperties,
        bytes: filesTotalBytes,
        bytesFormatted: formatBytes(filesTotalBytes),
      },
    },
    details: {
      inline: inlineMediaQueries,
      files: fileMediaQueries,
    },
  };
}
 
// Run with default breakpoint (768px)
analyzeCSSMediaQueries();
 
// Or customize the breakpoint:
// analyzeCSSMediaQueries(1024);  // for desktop
// analyzeCSSMediaQueries(480);   // for small tablets

// Analyze media queries bigger than 1024px (desktop)
analyzeCSSMediaQueries(1024);
 
// Analyze media queries bigger than 480px (small tablets)
analyzeCSSMediaQueries(480);
 
// Analyze media queries bigger than 1440px (large desktop)
analyzeCSSMediaQueries(1440);