fix(desktop): don't gate hover-reveal on the hover media query
Tailwind v4 wraps hover:/group-hover: in @media (hover: hover). Windows hosts with a digitizer often answer false even with a mouse, so those controls stay opacity-0 — clickable, invisible. Trust :hover itself. Co-authored-by: xxxigm <54813621+xxxigm@users.noreply.github.com>
This commit is contained in:
committed by
brooklyn!
parent
be7eefec8d
commit
2f87fa66ad
40
apps/desktop/src/hover-variant.test.ts
Normal file
40
apps/desktop/src/hover-variant.test.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
// @vitest-environment node
|
||||
import { dirname } from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
|
||||
import { compile } from '@tailwindcss/node'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
const SRC = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const CANDIDATES = ['hover:opacity-100', 'group-hover/attachment:opacity-100', 'group-hover/code:opacity-100']
|
||||
|
||||
async function utilitiesFor(css: string): Promise<string> {
|
||||
const { build } = await compile(css, { base: SRC, onDependency() {} })
|
||||
const out = build(CANDIDATES)
|
||||
const start = out.indexOf('@layer utilities {')
|
||||
expect(start).toBeGreaterThanOrEqual(0)
|
||||
return out.slice(start)
|
||||
}
|
||||
|
||||
function gatesHoverOnCapabilityQuery(css: string): boolean {
|
||||
return /@media\s*\(\s*hover\s*:\s*hover\s*\)/.test(css)
|
||||
}
|
||||
|
||||
describe('hover variant (Windows hover-reveal)', () => {
|
||||
it('still wraps hover utilities in the capability query without an override', async () => {
|
||||
const utilities = await utilitiesFor('@import "tailwindcss";\n')
|
||||
|
||||
expect(utilities).toContain('group-hover')
|
||||
expect(gatesHoverOnCapabilityQuery(utilities)).toBe(true)
|
||||
})
|
||||
|
||||
it('does not wrap the app stylesheet hover utilities in the capability query', async () => {
|
||||
const utilities = await utilitiesFor('@import "./styles.css";\n')
|
||||
|
||||
expect(utilities).toContain('.group-hover\\/attachment\\:opacity-100')
|
||||
expect(utilities).toContain('.group-hover\\/code\\:opacity-100')
|
||||
expect(utilities).toContain('.hover\\:opacity-100')
|
||||
expect(gatesHoverOnCapabilityQuery(utilities)).toBe(false)
|
||||
})
|
||||
})
|
||||
@@ -10,6 +10,10 @@
|
||||
font-size: var(--titlebar-icon-size);
|
||||
}
|
||||
|
||||
/* v4 gates hover: on @media (hover: hover). Some Windows hosts with a
|
||||
digitizer answer false even with a mouse, so hover-reveal controls stay
|
||||
opacity-0 (clickable, invisible). Trust :hover itself. */
|
||||
@custom-variant hover (&:hover);
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* Blanket reduced-motion override: kill ALL CSS animations and transitions
|
||||
|
||||
Reference in New Issue
Block a user