fix(css): leave tailwind theme vars on :root so obsidian's accent wins inside the panel

This commit is contained in:
hh
2026-08-29 19:42:55 +02:00
parent ab22efff7b
commit 353ee143f6
2 changed files with 7 additions and 10 deletions
+5 -8
View File
@@ -12,8 +12,9 @@ import { transform } from "lightningcss";
* 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.
* Tailwind's own theme variables stay on `:root, :host`: moved onto the view
* root they would sit above Obsidian's `body` values, and `--color-accent`
* is a name both sides use — the accent would turn into the hover grey.
*/
const ROOT = "beaver-root";
@@ -52,12 +53,8 @@ function mentions(selector, name) {
}
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 (isPseudo(selector, "root") || isPseudo(selector, "host")) {
return selector;
}
if (mentions(selector, ROOT)) {
return selector;
+2 -2
View File
@@ -42,9 +42,9 @@ describe("scoping the built stylesheet", () => {
expect(out).not.toContain("*)*");
});
it("moves theme variables from :root onto the view root", () => {
it("leaves tailwind's theme variables on :root, under obsidian's body values", () => {
expect(one(":root,:host{--spacing:.25rem}")).toBe(
".beaver-root { --spacing: .25rem; }"
":root, :host { --spacing: .25rem; }"
);
});