Implement approved specification #32 and tickets #33-#37. Keep host authentication server-verified and pin session interaction language. Compile scoped base selectors for browser compatibility and retain full gutters during CSS pruning.
28 lines
1.2 KiB
JavaScript
28 lines
1.2 KiB
JavaScript
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);
|
|
});
|
|
},
|
|
};
|
|
}
|