diff --git a/src/rules/use-defensive-css/index.js b/src/rules/use-defensive-css/index.js index 88bda0a..9f790ab 100644 --- a/src/rules/use-defensive-css/index.js +++ b/src/rules/use-defensive-css/index.js @@ -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); diff --git a/src/rules/use-defensive-css/index.test.js b/src/rules/use-defensive-css/index.test.js index 340041e..f708e17 100644 --- a/src/rules/use-defensive-css/index.test.js +++ b/src/rules/use-defensive-css/index.test.js @@ -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.',