collectStylesheet = (root) => {
  /** @type {import('./types.js').StylesheetRule[]} */
  const rules = [];
  /** @type {Map<import('./types.js').XastElement, import('./types.js').XastParent>} */
  const parents = new Map();

  visit(root, {
    element: {
      enter: (node, parentNode) => {
        parents.set(node, parentNode);

        if (node.name !== 'style') {
          return;
        }

        if (
          node.attributes.type == null ||
          node.attributes.type === '' ||
          node.attributes.type === 'text/css'
        ) {
          const dynamic =
            node.attributes.media != null && node.attributes.media !== 'all';

          for (const child of node.children) {
            if (child.type === 'text' || child.type === 'cdata') {
              rules.push(...parseStylesheet(child.value, dynamic));
            }
          }
        }
      },
    },
  });
  // sort by selectors specificity
  rules.sort((a, b) => compareSpecificity(a.specificity, b.specificity));
  return { rules, parents };
}
@param {import('./types.js').XastRoot} root
@returns {import('./types.js').Stylesheet}