diff --git a/src/styles/40-threads-view.css b/src/styles/40-threads-view.css index 50b6aa83..bb641c48 100644 --- a/src/styles/40-threads-view.css +++ b/src/styles/40-threads-view.css @@ -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)); diff --git a/stylelint.config.mjs b/stylelint.config.mjs index 3cd8b4d4..4620befe 100644 --- a/stylelint.config.mjs +++ b/stylelint.config.mjs @@ -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, { diff --git a/tests/styles.test.ts b/tests/styles.test.ts index 8faa2a96..07706b28 100644 --- a/tests/styles.test.ts +++ b/tests/styles.test.ts @@ -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 \{(?[^}]+)\}/.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\) \{(?[^}]+)\}/.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 \{(?[^}]+)\}/.exec( styles, )?.groups?.["body"] ?? ""; const title = /(?:^|\n\n)\.codex-panel-threads__row-title \{(?[^}]+)\}/.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)"); }); });