import postcss from "postcss";

const mount = ":where(#root, [data-base-ui-portal])";

/** Compile our Tailwind base into ordinary selectors, without native @scope. */
export default function scopedBase() {
  return {
    postcssPlugin: "thoth-scoped-base",
    OnceExit(root) {
      root.walkAtRules("thoth-base", boundary => {
        boundary.walkRules(rule => {
          // Keyframe selectors are animation offsets, not document selectors.
          if (rule.parent.type === "atrule" && /keyframes$/.test(rule.parent.name)) return;
          rule.selector = postcss.list.comma(rule.selector).map(selector => {
            // Authored tokens already target the mount, including host dark ancestors.
            if (selector.includes("#root") || selector.includes("[data-base-ui-portal]")) return selector;
            if (["html", ":host", "body", ":root"].includes(selector)) return mount;
            if (selector === "*") return `${mount}, ${mount} *`;
            if (/^::?(?:before|after|backdrop)$/.test(selector)) return `${mount}${selector}, ${mount} ${selector}`;
            return `${mount} ${selector}`;
          }).join(", ");
        });
        boundary.replaceWith(...boundary.nodes);
      });
    },
  };
}