cv-site/tests/mjs/debug-css-cascade.mjs

#!/usr/bin/env bun
import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto('http://localhost:1999/');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1000);

  // Get all CSS rules affecting the theme button
  const cssRules = await page.evaluate(() => {
    const btn = document.getElementById('color-theme-switcher');
    if (!btn) return null;

    const matchedRules = [];

    // Get all stylesheets
    for (const sheet of document.styleSheets) {
      try {
        const rules = sheet.cssRules || sheet.rules;
        for (const rule of rules) {
          if (rule.selectorText && btn.matches(rule.selectorText)) {
            matchedRules.push({
              selector: rule.selectorText,
              position: rule.style.position || 'not set',
              bottom: rule.style.bottom || 'not set',
              left: rule.style.left || 'not set',
              source: sheet.href || 'inline',
              cssText: rule.cssText
            });
          }
        }
      } catch (e) {
        // Skip CORS blocked stylesheets
      }
    }

    return matchedRules;
  });

  console.log('📋 CSS Rules matching #color-theme-switcher:');
  console.log(JSON.stringify(cssRules, null, 2));

  await page.waitForTimeout(5000);
  await browser.close();
})();