diff --git a/src/compiler/__tests__/media-query.test.ts b/src/compiler/__tests__/media-query.test.ts index a9a3ff1e..0a1a80a7 100644 --- a/src/compiler/__tests__/media-query.test.ts +++ b/src/compiler/__tests__/media-query.test.ts @@ -61,3 +61,27 @@ describe.skip("platform media queries", () => { }); }); }); + +test("@media (hover: hover)", () => { + const compiled = compile(` + @media (hover: hover) { + .my-class { color: red; } + } + `); + + expect(compiled.stylesheet()).toStrictEqual({ + s: [ + [ + "my-class", + [ + { + s: [2, 1], + d: [{ color: "#f00" }], + m: [["=", "hover", "hover"]], + v: [["__rn-css-color", "#f00"]], + }, + ], + ], + ], + }); +}); diff --git a/src/runtime/native/conditions/media-query.ts b/src/runtime/native/conditions/media-query.ts index c56e70fc..57d1b476 100644 --- a/src/runtime/native/conditions/media-query.ts +++ b/src/runtime/native/conditions/media-query.ts @@ -38,6 +38,8 @@ function testComparison(mediaQuery: MediaCondition, get: Getter): Boolean { const right = mediaQuery[2]; switch (mediaQuery[1]) { + case "hover": + return true; case "platform": return right === "native" || right === Platform.OS; case "prefers-color-scheme": {