Skip to content

Only apply hover on devices that support hover #14500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adamwathan merged 6 commits into from
Sep 24, 2024
Merged

Only apply hover on devices that support hover #14500

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
44aa9d4
Only apply hover on devices that support hover
adamwathan Sep 23, 2024
04f6b8b
Remove loop
adamwathan Sep 23, 2024
f799577
use `data-test:` instead of `hover:`
RobinMalfait Sep 24, 2024
6d9a1eb
Revert "use `data-test:` instead of `hover:`"
RobinMalfait Sep 24, 2024
fc89ad6
update firefox preferences
RobinMalfait Sep 24, 2024
64c1efd
Update changelog [skip ci]
adamwathan Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
use data-test: instead of hover: 
This allows us to just change the data attribute when making a change
instead of relying on `hover:`. In this PR `hover:` will use `@media
(hover: hover)` which is not implemented in Firefox on Linux at the time
of writing this PR.
  • Loading branch information
@RobinMalfait
RobinMalfait committed Sep 24, 2024
commit f7995776b65ae46f6ddb15568d739e4b445a085c
107 changes: 56 additions & 51 deletions packages/tailwindcss/tests/ui.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ const css = String.raw
test('touch action', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`<div id="x" class="touch-pan-x touch-pan-y hover:touch-pinch-zoom">Hello world</div>`,
html`<div id="x" class="touch-pan-x touch-pan-y data-test:touch-pinch-zoom">Hello world</div>`,
)

expect(await getPropertyValue('#x', 'touch-action')).toEqual('pan-x pan-y')

await page.locator('#x').hover()
await page.locator('#x').evaluate((el) => (el.dataset.test = ''))

expect([
// `manipulation` is an alias for `pan-x pan-y pinch-zoom` and some engines
Expand Down Expand Up @@ -71,7 +71,7 @@ test('background gradient, going from 2 to 3', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`
<div id="x" class="bg-gradient-to-r from-red-500 hover:via-green-500 to-blue-500">
<div id="x" class="bg-gradient-to-r from-red-500 data-test:via-green-500 to-blue-500">
Hello world
</div>
`,
Expand All @@ -81,7 +81,7 @@ test('background gradient, going from 2 to 3', async ({ page }) => {
'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(59, 130, 246) 100%)',
)

await page.locator('#x').hover()
await page.locator('#x').evaluate((el) => (el.dataset.test = ''))

expect(await getPropertyValue('#x', 'background-image')).toEqual(
'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(34, 197, 94) 50%, rgb(59, 130, 246) 100%)',
Expand All @@ -92,7 +92,10 @@ test('background gradient, going from 3 to 2', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`
<div id="x" class="bg-gradient-to-r from-red-500 via-green-500 hover:via-none to-blue-500">
<div
id="x"
class="bg-gradient-to-r from-red-500 via-green-500 data-test:via-none to-blue-500"
>
Hello world
</div>
`,
Expand All @@ -102,7 +105,7 @@ test('background gradient, going from 3 to 2', async ({ page }) => {
'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(34, 197, 94) 50%, rgb(59, 130, 246) 100%)',
)

await page.locator('#x').hover()
await page.locator('#x').evaluate((el) => (el.dataset.test = ''))

expect(await getPropertyValue('#x', 'background-image')).toEqual(
'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(59, 130, 246) 100%)',
Expand Down Expand Up @@ -223,8 +226,8 @@ test('shadow colors', async ({ page }) => {
<div id="a" class="shadow shadow-red-500"></div>
<div id="b" class="shadow-xl shadow-red-500"></div>
<div id="c" class="shadow-[0px_2px_4px] shadow-red-500"></div>
<div id="d" class="shadow shadow-red-500 hover:shadow-xl">Hello world</div>
<div id="e" class="shadow shadow-red-500 hover:shadow-xl hover:shadow-initial">
<div id="d" class="shadow shadow-red-500 data-test:shadow-xl">Hello world</div>
<div id="e" class="shadow shadow-red-500 data-test:shadow-xl data-test:shadow-initial">
Hello world
</div>
`,
Expand Down Expand Up @@ -268,7 +271,7 @@ test('shadow colors', async ({ page }) => {
].join(', '),
)

await page.locator('#d').hover()
await page.locator('#d').evaluate((el) => (el.dataset.test = ''))

expect(await getPropertyValue('#d', 'box-shadow')).toEqual(
[
Expand All @@ -290,7 +293,7 @@ test('shadow colors', async ({ page }) => {
].join(', '),
)

await page.locator('#e').hover()
await page.locator('#e').evaluate((el) => (el.dataset.test = ''))

expect(await getPropertyValue('#e', 'box-shadow')).toEqual(
[
Expand All @@ -310,10 +313,12 @@ test('inset shadow colors', async ({ page }) => {
<div id="a" class="inset-shadow-sm inset-shadow-red-500"></div>
<div id="b" class="inset-shadow inset-shadow-red-500"></div>
<div id="c" class="inset-shadow-[0px_3px_6px] inset-shadow-red-500"></div>
<div id="d" class="inset-shadow-sm inset-shadow-red-500 hover:inset-shadow">Hello world</div>
<div id="d" class="inset-shadow-sm inset-shadow-red-500 data-test:inset-shadow">
Hello world
</div>
<div
id="e"
class="inset-shadow-sm inset-shadow-red-500 hover:inset-shadow hover:inset-shadow-initial"
class="inset-shadow-sm inset-shadow-red-500 data-test:inset-shadow data-test:inset-shadow-initial"
>
Hello world
</div>
Expand Down Expand Up @@ -358,7 +363,7 @@ test('inset shadow colors', async ({ page }) => {
].join(', '),
)

await page.locator('#d').hover()
await page.locator('#d').evaluate((el) => (el.dataset.test = ''))

expect(await getPropertyValue('#d', 'box-shadow')).toEqual(
[
Expand All @@ -380,7 +385,7 @@ test('inset shadow colors', async ({ page }) => {
].join(', '),
)

await page.locator('#e').hover()
await page.locator('#e').evaluate((el) => (el.dataset.test = ''))

expect(await getPropertyValue('#e', 'box-shadow')).toEqual(
[
Expand All @@ -405,14 +410,14 @@ test('outline style is optional', async ({ page }) => {
test('outline style is preserved when changing outline width', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`<div id="x" class="outline-2 outline-dotted outline-white hover:outline-4">
html`<div id="x" class="outline-2 outline-dotted outline-white data-test:outline-4">
Hello world
</div>`,
)

expect(await getPropertyValue('#x', 'outline')).toEqual('rgb(255, 255, 255) dotted 2px')

await page.locator('#x').hover()
await page.locator('#x').evaluate((el) => (el.dataset.test = ''))

expect(await getPropertyValue('#x', 'outline')).toEqual('rgb(255, 255, 255) dotted 4px')
})
Expand All @@ -429,40 +434,40 @@ test('borders can be added without a border-style utility', async ({ page }) =>
test('borders can be added to a single side without a border-style utility', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`<div id="x" class="text-black border-r-2 border-dashed hover:border-r-4">
html`<div id="x" class="text-black border-r-2 border-dashed data-test:border-r-4">
Hello world
</div>`,
)
expect(await getPropertyValue('#x', 'border-right')).toEqual('2px dashed rgb(0, 0, 0)')

await page.locator('#x').hover()
await page.locator('#x').evaluate((el) => (el.dataset.test = ''))

expect(await getPropertyValue('#x', 'border-right')).toEqual('4px dashed rgb(0, 0, 0)')
})

test('dividers can be added without setting border-style', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`<div id="a" class="divide-y-2 divide-dashed hover:divide-y-4">
html`<div id="a" class="divide-y-2 divide-dashed data-test:divide-y-4">
<div id="b">First</div>
<div>Second</div>
</div>`,
)
expect(await getPropertyValue('#b', 'border-bottom')).toEqual('2px dashed rgb(0, 0, 0)')

await page.locator('#a').hover()
await page.locator('#a').evaluate((el) => (el.dataset.test = ''))

expect(await getPropertyValue('#b', 'border-bottom')).toEqual('4px dashed rgb(0, 0, 0)')
})

test('scale can be a number or percentage', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`<div id="x" class="scale-[50%] hover:scale-[1.5]">Hello world</div>`,
html`<div id="x" class="scale-[50%] data-test:scale-[1.5]">Hello world</div>`,
)
expect(await getPropertyValue('#x', 'scale')).toEqual('0.5')

await page.locator('#x').hover()
await page.locator('#x').evaluate((el) => (el.dataset.test = ''))

expect(await getPropertyValue('#x', 'scale')).toEqual('1.5')
})
Expand All @@ -471,12 +476,12 @@ test('scale can be a number or percentage', async ({ page }) => {
test('content-none persists when conditionally styling a pseudo-element', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`<div id="x" class="after:content-none after:hover:underline">Hello world</div>`,
html`<div id="x" class="after:content-none after:data-test:underline">Hello world</div>`,
)

expect(await getPropertyValue(['#x', '::after'], 'content')).toEqual('none')

await page.locator('#x').hover()
await page.locator('#x').evaluate((el) => (el.dataset.test = ''))

expect(await getPropertyValue(['#x', '::after'], 'content')).toEqual('none')
})
Expand All @@ -485,9 +490,9 @@ test('explicit leading utilities are respected when overriding font-size', async
let { getPropertyValue } = await render(
page,
html`
<div id="x" class="text-sm hover:text-xl">Hello world</div>
<div id="y" class="text-sm leading-tight hover:text-xl">Hello world</div>
<div id="z" class="text-sm leading-[10px] hover:text-xl">Hello world</div>
<div id="x" class="text-sm data-test:text-xl">Hello world</div>
<div id="y" class="text-sm leading-tight data-test:text-xl">Hello world</div>
<div id="z" class="text-sm leading-[10px] data-test:text-xl">Hello world</div>
`,
css`
@theme {
Expand All @@ -501,25 +506,25 @@ test('explicit leading utilities are respected when overriding font-size', async
)

expect(await getPropertyValue('#x', 'line-height')).toEqual('16px')
await page.locator('#x').hover()
await page.locator('#x').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#x', 'line-height')).toEqual('24px')

expect(await getPropertyValue('#y', 'line-height')).toEqual('8px')
await page.locator('#y').hover()
await page.locator('#y').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#y', 'line-height')).toEqual('8px')

expect(await getPropertyValue('#z', 'line-height')).toEqual('10px')
await page.locator('#z').hover()
await page.locator('#z').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#z', 'line-height')).toEqual('10px')
})

test('explicit leading utilities are overridden by line-height modifiers', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`
<div id="x" class="text-sm hover:text-xl/[100px]">Hello world</div>
<div id="y" class="text-sm leading-tight hover:text-xl/[100px]">Hello world</div>
<div id="z" class="text-sm leading-[10px] hover:text-xl/[100px]">Hello world</div>
<div id="x" class="text-sm data-test:text-xl/[100px]">Hello world</div>
<div id="y" class="text-sm leading-tight data-test:text-xl/[100px]">Hello world</div>
<div id="z" class="text-sm leading-[10px] data-test:text-xl/[100px]">Hello world</div>
`,
css`
@theme {
Expand All @@ -533,25 +538,25 @@ test('explicit leading utilities are overridden by line-height modifiers', async
)

expect(await getPropertyValue('#x', 'line-height')).toEqual('16px')
await page.locator('#x').hover()
await page.locator('#x').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#x', 'line-height')).toEqual('100px')

expect(await getPropertyValue('#y', 'line-height')).toEqual('8px')
await page.locator('#y').hover()
await page.locator('#y').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#y', 'line-height')).toEqual('100px')

expect(await getPropertyValue('#z', 'line-height')).toEqual('10px')
await page.locator('#z').hover()
await page.locator('#z').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#z', 'line-height')).toEqual('100px')
})

test('explicit tracking utilities are respected when overriding font-size', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`
<div id="x" class="text-sm hover:text-xl">Hello world</div>
<div id="y" class="text-sm tracking-tight hover:text-xl">Hello world</div>
<div id="z" class="text-sm tracking-[3px] hover:text-xl">Hello world</div>
<div id="x" class="text-sm data-test:text-xl">Hello world</div>
<div id="y" class="text-sm tracking-tight data-test:text-xl">Hello world</div>
<div id="z" class="text-sm tracking-[3px] data-test:text-xl">Hello world</div>
`,
css`
@theme {
Expand All @@ -563,25 +568,25 @@ test('explicit tracking utilities are respected when overriding font-size', asyn
)

expect(await getPropertyValue('#x', 'letter-spacing')).toEqual('5px')
await page.locator('#x').hover()
await page.locator('#x').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#x', 'letter-spacing')).toEqual('10px')

expect(await getPropertyValue('#y', 'letter-spacing')).toEqual('1px')
await page.locator('#y').hover()
await page.locator('#y').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#y', 'letter-spacing')).toEqual('1px')

expect(await getPropertyValue('#z', 'letter-spacing')).toEqual('3px')
await page.locator('#z').hover()
await page.locator('#z').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#z', 'letter-spacing')).toEqual('3px')
})

test('explicit font-weight utilities are respected when overriding font-size', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`
<div id="x" class="text-sm hover:text-xl">Hello world</div>
<div id="y" class="text-sm font-bold hover:text-xl">Hello world</div>
<div id="z" class="text-sm font-[900] hover:text-xl">Hello world</div>
<div id="x" class="text-sm data-test:text-xl">Hello world</div>
<div id="y" class="text-sm font-bold data-test:text-xl">Hello world</div>
<div id="z" class="text-sm font-[900] data-test:text-xl">Hello world</div>
`,
css`
@theme {
Expand All @@ -592,15 +597,15 @@ test('explicit font-weight utilities are respected when overriding font-size', a
)

expect(await getPropertyValue('#x', 'font-weight')).toEqual('100')
await page.locator('#x').hover()
await page.locator('#x').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#x', 'font-weight')).toEqual('200')

expect(await getPropertyValue('#y', 'font-weight')).toEqual('700')
await page.locator('#y').hover()
await page.locator('#y').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#y', 'font-weight')).toEqual('700')

expect(await getPropertyValue('#z', 'font-weight')).toEqual('900')
await page.locator('#z').hover()
await page.locator('#z').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#z', 'font-weight')).toEqual('900')
})

Expand All @@ -612,7 +617,7 @@ test('explicit duration and ease utilities are respected when overriding transit
html`
<div
id="x"
class="ease-[linear] duration-500 transition-[opacity] hover:transition-[background-color]"
class="ease-[linear] duration-500 transition-[opacity] data-test:transition-[background-color]"
>
Hello world
</div>
Expand All @@ -621,7 +626,7 @@ test('explicit duration and ease utilities are respected when overriding transit

expect(await getPropertyValue('#x', 'transition-timing-function')).toEqual('linear')
expect(await getPropertyValue('#x', 'transition-duration')).toEqual('0.5s')
await page.locator('#x').hover()
await page.locator('#x').evaluate((el) => (el.dataset.test = ''))
expect(await getPropertyValue('#x', 'transition-timing-function')).toEqual('linear')
expect(await getPropertyValue('#x', 'transition-duration')).toEqual('0.5s')
})
Expand Down Expand Up @@ -663,7 +668,7 @@ async function render(page: Page, content: string, extraCss: string = '') {
content: optimizeCss(build(candidates)),
})

await page.locator('#mouse-park').hover()
await page.locator('#mouse-park').evaluate((el) => (el.dataset.test = ''))

return {
getPropertyValue(selector: string | [string, string], property: string) {
Expand Down