obsidian-plugin/murashit_codex-panel
1
0
Fork 0
mirror of https://github.com/murashit/codex-panel.git synced 2026-07-22 06:57:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Ban CSS :has selectors

Browse source
This commit is contained in:
murashit 2026-06-03 23:54:13 +09:00
parent dfd51060c2
commit 5eebb315db
3 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/styles/40-threads-view.css
View file

@ -72,10 +72,14 @@
.codex-panel-threads__row:hover,
.codex-panel-threads__row:focus-within {
--codex-panel-threads-row-title-color: var(--nav-item-color-hover, var(--text-normal));
background: var(--background-modifier-hover);
}
.codex-panel-threads__row-title-line:hover .codex-panel-threads__row-title,
.codex-panel-threads__row:focus .codex-panel-threads__row-title {
color: var(--nav-item-color-hover, var(--text-normal));
}
.codex-panel-threads__row--selected {
background: var(--nav-item-background-active, var(--background-modifier-active));
color: var(--nav-item-color-active, var(--text-normal));
@ -87,11 +91,6 @@
background: var(--nav-item-background-active, var(--background-modifier-active));
}
.codex-panel-threads__row:has(.codex-panel-threads__actions:hover),
.codex-panel-threads__row:has(.codex-panel-threads__actions :focus) {
--codex-panel-threads-row-title-color: currentcolor;
}
.codex-panel-threads__row--selected .codex-panel-threads__row-title {
color: var(--nav-item-color-active, var(--text-normal));
font-weight: var(--nav-item-weight-active, var(--font-medium));

7
stylelint.config.mjs
View file

@ -103,6 +103,13 @@ export default {
severity: "warning",
},
],
"selector-disallowed-list": [
["/:has\\(/"],
{
message: "Avoid :has() because it can cause broad selector invalidation.",
severity: "warning",
},
],
"selector-max-universal": [
0,
{

11
tests/styles.test.ts
View file

@ -114,17 +114,18 @@ describe("threads view CSS", () => {
expect(selectedRowHover).not.toContain("nav-item-background-active-hover");
});
it("does not hover-highlight row titles while thread actions are hovered or focused", () => {
it("does not rely on :has() to avoid hover-highlighting action rows", () => {
const rowHover =
/\.codex-panel-threads__row:hover,\n\.codex-panel-threads__row:focus-within \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
const actionHover =
/\.codex-panel-threads__row:has\(\.codex-panel-threads__actions:hover\),\n\.codex-panel-threads__row:has\(\.codex-panel-threads__actions :focus\) \{(?<body>[^}]+)\}/.exec(
const titleHover =
/\.codex-panel-threads__row-title-line:hover \.codex-panel-threads__row-title,\n\.codex-panel-threads__row:focus \.codex-panel-threads__row-title \{(?<body>[^}]+)\}/.exec(
styles,
)?.groups?.["body"] ?? "";
const title = /(?:^|\n\n)\.codex-panel-threads__row-title \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
expect(rowHover).toContain("--codex-panel-threads-row-title-color: var(--nav-item-color-hover, var(--text-normal))");
expect(actionHover).toContain("--codex-panel-threads-row-title-color: currentcolor");
expect(styles).not.toContain(":has(");
expect(rowHover).not.toContain("--codex-panel-threads-row-title-color");
expect(titleHover).toContain("color: var(--nav-item-color-hover, var(--text-normal))");
expect(title).toContain("color: var(--codex-panel-threads-row-title-color)");
});
});