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
Remove loop
  • Loading branch information
@adamwathan
adamwathan committed Sep 23, 2024
commit 04f6b8bf388fc40e13be79670f28479d10ecf6b0
99 changes: 42 additions & 57 deletions packages/tailwindcss/src/variants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,63 +413,48 @@ export function createVariants(theme: Theme): Variants {
)
}

let pseudos: [name: string, selector: string][] = [
// Positional
['first', '&:first-child'],
['last', '&:last-child'],
['only', '&:only-child'],
['odd', '&:nth-child(odd)'],
['even', '&:nth-child(even)'],
['first-of-type', '&:first-of-type'],
['last-of-type', '&:last-of-type'],
['only-of-type', '&:only-of-type'],

// State
// TODO: Remove alpha vars or no?
['visited', '&:visited'],

['target', '&:target'],
['open', '&:is([open], :popover-open)'],

// Forms
['default', '&:default'],
['checked', '&:checked'],
['indeterminate', '&:indeterminate'],
['placeholder-shown', '&:placeholder-shown'],
['autofill', '&:autofill'],
['optional', '&:optional'],
['required', '&:required'],
['valid', '&:valid'],
['invalid', '&:invalid'],
['in-range', '&:in-range'],
['out-of-range', '&:out-of-range'],
['read-only', '&:read-only'],

// Content
['empty', '&:empty'],

// Interactive
['focus-within', '&:focus-within'],
[
'hover',
(r) => {
r.nodes = [rule('&:hover', [rule('@media (hover: hover)', r.nodes)])]
},
],
['focus', '&:focus'],
['focus-visible', '&:focus-visible'],
['active', '&:active'],
['enabled', '&:enabled'],
['disabled', '&:disabled'],
]

for (let [key, value] of pseudos) {
if (typeof value === 'string') {
staticVariant(key, [value])
} else {
variants.static(key, value)
}
}
// Positional
staticVariant('first', ['&:first-child'])
staticVariant('last', ['&:last-child'])
staticVariant('only', ['&:only-child'])
staticVariant('odd', ['&:nth-child(odd)'])
staticVariant('even', ['&:nth-child(even)'])
staticVariant('first-of-type', ['&:first-of-type'])
staticVariant('last-of-type', ['&:last-of-type'])
staticVariant('only-of-type', ['&:only-of-type'])

// State
staticVariant('visited', ['&:visited'])
staticVariant('target', ['&:target'])
staticVariant('open', ['&:is([open], :popover-open)'])

// Forms
staticVariant('default', ['&:default'])
staticVariant('checked', ['&:checked'])
staticVariant('indeterminate', ['&:indeterminate'])
staticVariant('placeholder-shown', ['&:placeholder-shown'])
staticVariant('autofill', ['&:autofill'])
staticVariant('optional', ['&:optional'])
staticVariant('required', ['&:required'])
staticVariant('valid', ['&:valid'])
staticVariant('invalid', ['&:invalid'])
staticVariant('in-range', ['&:in-range'])
staticVariant('out-of-range', ['&:out-of-range'])
staticVariant('read-only', ['&:read-only'])

// Content
staticVariant('empty', ['&:empty'])

// Interactive
staticVariant('focus-within', ['&:focus-within'])
variants.static('hover', (r) => {
r.nodes = [rule('&:hover', [rule('@media (hover: hover)', r.nodes)])]
})
Comment on lines +450 to +452
Copy link
Member Author

@adamwathan adamwathan Sep 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the only important change — dropped the loop because the signature of this one is different now and we never needed to store all this stuff in an array for any other reason anyways.

staticVariant('focus', ['&:focus'])
staticVariant('focus-visible', ['&:focus-visible'])
staticVariant('active', ['&:active'])
staticVariant('enabled', ['&:enabled'])
staticVariant('disabled', ['&:disabled'])

staticVariant('inert', ['&:is([inert], [inert] *)'])

Expand Down