82 lines
2.5 KiB
JavaScript
82 lines
2.5 KiB
JavaScript
import { transform } from "lightningcss";
|
|
|
|
/**
|
|
* Obsidian loads every plugin's stylesheet into one document, and Tailwind
|
|
* puts its utilities into a cascade layer called `utilities` in each of them.
|
|
* Layers with the same name merge, so another Tailwind plugin's
|
|
* `.hidden{display:none!important}` and this plugin's
|
|
* `@container … .\@min-\[30rem\]\:inline-block{…!important}` end up in the
|
|
* same layer with the same specificity, and whichever plugin loaded last
|
|
* wins. Prefixing every selector with `:is(.beaver-root, .beaver-root *)` adds a
|
|
* class of specificity that no unscoped utility can match, whatever the load
|
|
* order, while still reaching the view root itself and the portal layer,
|
|
* both of which carry `.beaver-root`.
|
|
*
|
|
* Theme variables move from `:root, :host` onto `.beaver-root` for the same
|
|
* reason: a later `:root{--spacing:…}` from someone else must not resize us.
|
|
*/
|
|
|
|
const ROOT = "beaver-root";
|
|
|
|
const SCOPE = {
|
|
kind: "is",
|
|
selectors: [
|
|
[{ name: ROOT, type: "class" }],
|
|
[
|
|
{ name: ROOT, type: "class" },
|
|
{ type: "combinator", value: "descendant" },
|
|
{ type: "universal" },
|
|
],
|
|
],
|
|
type: "pseudo-class",
|
|
};
|
|
|
|
function isPseudo(selector, kind) {
|
|
return (
|
|
selector.length === 1 &&
|
|
selector[0].type === "pseudo-class" &&
|
|
selector[0].kind === kind
|
|
);
|
|
}
|
|
|
|
function mentions(selector, name) {
|
|
for (const part of selector) {
|
|
if (part.type === "class" && part.name === name) {
|
|
return true;
|
|
}
|
|
if (part.selectors?.some((inner) => mentions(inner, name))) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function scopeSelector(selector) {
|
|
if (isPseudo(selector, "root")) {
|
|
return [{ name: ROOT, type: "class" }];
|
|
}
|
|
// `:root, :host` is one rule; the root alone carries it, so :host goes.
|
|
if (isPseudo(selector, "host")) {
|
|
return [];
|
|
}
|
|
if (mentions(selector, ROOT)) {
|
|
return selector;
|
|
}
|
|
// `*` has to open a compound, and :is() takes that place now.
|
|
const rest = selector[0]?.type === "universal" ? selector.slice(1) : selector;
|
|
return [SCOPE, ...rest];
|
|
}
|
|
|
|
/** Rewrites a built stylesheet so its rules only reach the plugin's own DOM. */
|
|
export function scopeCss(code, { minify = false } = {}) {
|
|
// The selector visitor, not the rule one: handing a whole rule back makes
|
|
// lightningcss re-read its declarations, and some of Tailwind's it cannot.
|
|
const result = transform({
|
|
code: Buffer.from(code),
|
|
filename: "styles.css",
|
|
minify,
|
|
visitor: { Selector: scopeSelector },
|
|
});
|
|
return result.code.toString();
|
|
}
|