<h1><code>CSSRule</code> Debugger</h1>
<p><em>How does a browser interpet your CSS?</em></p>

<h2>Input CSS</h2>

<p>Load one of the pre-built snippets, or write your own <code>CSSRule</code></p>

<button data-id=0>Load snippet #0</button>
<button data-id=1>Load snippet #1</button>
<button data-id=2>Load snippet #2</button>

<style block>.foo {
    width: fit-content;

  @media screen {
    background-color: red;
  }
  
  background-color: green;
}</style>

<h2>Visual output</h2>
<div class="foo">I am foo</div>

<h2>Parsed CSS</h2>
<div class="warning"><p>⚠️ Your browser does not support <code>CSSNestedDeclarations</code> so expect some differences compared to the input.</p></div>
<pre id="parsed"></pre>

<h2>Serialized CSS</h2>
<pre id="serialized"></pre>
<div class="warning warning--info" style="display: block"><p>ℹ️  The <code>specificity</code> and <code>resolvedSelectorText</code> attributes included in the serialized output are not part of the CSSOM’s <code>CSSStyleRule</code> and were added for demonstration purposes.</p></div>

<footer><p>This page is a demo for <a href="https://web.dev/blog/css-nesting-cssnesteddeclarations" target="_top">https://web.dev/blog/css-nesting-cssnesteddeclarations</a></p></footer>

@layer layout {
  @layer general {
    html {
      font-family: sans-serif;
      line-height: 1.42;
    }
    body {
      padding: 3rem 0 10rem;
      width: 90%;
      max-width: 52em;
      margin: 0 auto;
    }
    h2 {
      margin-top: 2em;
    }
    a {
      color: #0000aa;
      text-decoration: none;
      &:hover {
        color: blue;
      }
    }
    footer {
      text-align: center;
      font-style: italic;
      margin: 4em 0;
    }
  }

  @layer code {
    style[contenteditable], script[block], pre {
      display: block;
      white-space: pre;
      border: 1px solid #dedede;
      border-left: 0.5em solid LinkText;
      background: #fafafa;
      padding: 0.75em;
      font-family: monospace;
      overflow-x: auto;
      margin: 1em 0;
      tab-size: 2;
      font-size: 1.25em;
      border-radius: 0.25em;
      tab-size: 2;
    }

    code:not(pre code), /* output:not(code:has(output) output) */ {
      background: #f7f7f7;
      border: 1px solid rgb(0 0 0 / 0.2);
      padding: 0.1rem 0.3rem;
      margin: 0.1rem 0;
      border-radius: 0.2rem;
      display: inline-block;
    }
  }

@layer warning {
    .warning {
      display: none;
      box-sizing: border-box;
      padding: 1em;
      margin: 1em 0;
      border: 1px solid #ccc;
      background: rgba(255 255 205 / 0.8);
    }

    .warning > :first-child {
      margin-top: 0;
    }

    .warning > :last-child {
      margin-bottom: 0;
    }

    .warning a {
      color: blue;
    }
    .warning--info {
      border: 1px solid #123456;
      background: rgb(205 230 255 / 0.8);
    }
    .warning--alarm {
      border: 1px solid red;
      background: #ff000010;
    }
  }
}

import { format } from "https://esm.sh/@projectwallace/format-css@1";
import Specificity from "https://esm.sh/@bramus/specificity@2";

// Show warning when there is no `CSSNestedDeclarations` support.
if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {
  document.querySelector('.warning').style.display = 'block';
}

const examples = [
  `
  .foo {
    width: fit-content;

    @media screen {
      background-color: red;
    }

    background-color: green;
  }
  `,
  `
  #foo,
  .foo,
  .foo::before {
    width: fit-content;
    background-color: red;

    @media screen {
      background-color: green;
    }
  }
  .foo::before {
    content: '(before)';
    margin-right: 1ch;
  }
  `,
  `
  .foo {
    width: fit-content;
    background-color: green;

    @starting-style {
      opacity: 0;
      scale: 0.5;
    }
      
    transition: all 0.5s ease;
    opacity: 1;
    scale: 1;
  }
  `
];

const go = (exampleIndex = 0) => {
  console.clear();
  
  // Use the CSS in the document.
  // Use @projectwallace/format-css for the formatting.
  const $input = document.querySelector('style[block]');
  $input.innerText = format(examples[exampleIndex]);
    
  process();
};

const process = () => {
  // The CSSRule to process
  const cssRule = document.styleSheets[1].cssRules[0];
  console.log(cssRule);
  
  // Re-insert .foo to make sure things like starting-style are visible
  const $newFoo = document.createElement('div');
  $newFoo.classList.add('foo');
  $newFoo.innerText = 'I am foo';
  document.querySelector('.foo').replaceWith($newFoo);

  // Get the parsed CSS from the cssRule’s cssText.
  // Use @projectwallace/format-css for the formatting.
  const $parsed = document.querySelector('pre#parsed');
  $parsed.innerText = format(cssRule?.cssText ?? '');

  // Manually build the structure of the cssRule
  const $serialized = document.querySelector('pre#serialized');
  $serialized.innerText = serialize(cssRule);
}

const ruleTypes = {
  1: 'STYLE_RULE',
  2: 'CHARSET_RULE',
  3: 'IMPORT_RULE',
  4: 'MEDIA_RULE',
  5: 'FONT_FACE_RULE',
  6: 'PAGE_RULE',
  9: 'MARGIN_RULE',
  10: 'NAMESPACE_RULE',
};

const extractDeclarationsFromStyle = (style) => {
  return Array.from(style)
    .map(p => `${p}: ${style[p]}`)
};

// Polyfill for https://github.com/w3c/csswg-drafts/issues/10246
const resolveSelector = (cssRule) => {
  let selector = '';

  const selectorTexts = [];
  do {
    if (cssRule.selectorText) {
      selectorTexts.unshift(cssRule.selectorText);
    }
    cssRule = cssRule.parentRule;
  } while (cssRule);

  for (let selectorText of selectorTexts) {
    selector = selectorText.replaceAll('&', `:is(${selector})`);
  }

  return selector;
};

const padLines = (text, level = 0) => {
  if (level == 0) return text;
  return text.split('\n').map(l => ' '.repeat((level) * 2) + l).join('\n');
};

const serialize = (cssRule, level = 0) => {
  if (!cssRule) return null;
  
  const { type, selectorText, style, cssRules } = cssRule;

  let toReturn = `↳ ${cssRule.constructor.name}\n`;
  
  if (type) {
    toReturn += `  .type = ${ruleTypes[type]}\n`;
  }

  if (selectorText) {
    const resolvedSelectorText = resolveSelector(cssRule);
    const specificity = Specificity.calculate(resolvedSelectorText);
    toReturn += `  .selectorText = "${selectorText}"\n`;
    toReturn += `  .resolvedSelectorText = "${resolvedSelectorText}"\n`;
    toReturn += `  .specificity = ${specificity}\n`;
  }
  
  if (style && style.length) {
    toReturn += `  .style (CSSStyleDeclaration, ${style.length}) =\n`;
    const declarations = extractDeclarationsFromStyle(style);
    for (let declaration of declarations) {
      toReturn += `    - ${declaration}\n`;
    }
    // toReturn += `  \n`;
  }
  
  if (cssRules && cssRules.length) {
    toReturn += `  .cssRules (CSSRuleList, ${cssRules.length}) =\n`;
    for (let childCssRule of cssRules) {
      toReturn += `    ${serialize(childCssRule, level + 1)}\n`;
    }
    toReturn += `  \n`;
  }
  
  return padLines(toReturn, level).trim('\n');
}

const $buttons = document.querySelectorAll('button');
$buttons.forEach($button => {
  $button.addEventListener('click', (e) => {
    e.preventDefault();
    go(parseInt($button.dataset.id, 10));
  });
});

go(new URL(window.location).searchParams.get('demo') ?? 0);

// Allow live editing of the CSS
// The logic is explained in https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/
const codeBlock = document.querySelector('style[block]');

// Allow only plaintext editing
// Firefox doesn’t do 'plaintext-only', but does do 'true'
codeBlock.setAttribute('contenteditable', 'plaintext-only');
if (codeBlock.contentEditable != 'plaintext-only') {
  codeBlock.setAttribute('contenteditable', 'true');
}

codeBlock.addEventListener('keyup', () => {
  process();
});

codeBlock.addEventListener('keydown', e => {
  // The tab key should insert a tab character
  if (e.keyCode == 9) {
    document.execCommand('insertHTML', false, ' ');
    e.preventDefault();
  }
});