Skip to content

Commit

Permalink
fix(accidental-hover): support shorthand media features
Browse files Browse the repository at this point in the history
Media Queries Level 4
(https://drafts.csswg.org/mediaqueries-4/#mq-features) provides a
shorthand syntax for boolean media features such as (hover: hover) -
you can omit the feature value and write it simply as (hover).
  • Loading branch information
robintown committed Sep 23, 2023
1 parent b079486 commit 56b6c29
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 1 deletion.
5 changes: 4 additions & 1 deletion src/rules/use-defensive-css/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,10 @@ function traverseParentRules(parent) {
}

if (parent.parent.type === 'atrule') {
if (parent.parent.params && parent.parent.params.includes('hover: hover')) {
if (
parent.parent.params &&
/\(hover(: hover)?\)/.test(parent.parent.params)
) {
isWrappedInHoverAtRule = true;
} else {
traverseParentRules(parent.parent);
Expand Down
4 changes: 4 additions & 0 deletions src/rules/use-defensive-css/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ testRule({
code: `@media (hover: hover) { .btn:hover { color: black; } }`,
description: 'Use media query for button hover state.',
},
{
code: `@media (hover) { .btn:hover { color: black; } }`,
description: 'Use shorthand media query for button hover state.',
},
{
code: `@media (min-width: 1px) { @media (hover: hover) { .btn:hover { color: black; } } }`,
description: 'Use nested media queries for button hover state.',
Expand Down

0 comments on commit 56b6c29

Please sign in to comment.