From 1ed8f5dabac08e916bd0877236b2edb2ca72103a Mon Sep 17 00:00:00 2001 From: Jack Morgan Date: Wed, 24 Jun 2026 23:57:48 -0700 Subject: [PATCH] Fix invalid media query (not(hover)) -> (hover: none) `@media (not(hover))` is not valid CSS. The `not` keyword in a media query must be followed by whitespace per Media Queries Level 4, so `not(hover)` parses as a function and is rejected. PostCSS (used by this repo's build) tolerates it, but stricter tools do not, so the published file can't be consumed in practice: - Dart Sass (Next.js, Vite, etc.) throws "Expected whitespace", breaking `@include meta.load-css(...)` scoping (#223) - Lightning CSS reports InvalidMediaQuery, preventing import (#218) - The W3C validator rejects it (#218) `(hover: none)` expresses the same intent (target devices whose primary input cannot hover) without the `not` keyword, and parses cleanly in PostCSS, Dart Sass, and Lightning CSS. Fixes #218, #223 --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 8c74873..1116767 100644 --- a/style.css +++ b/style.css @@ -184,7 +184,7 @@ input[type="reset"].default:not(:disabled):active { box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner); } -@media (not(hover)) { +@media (hover: none) { button:not(:disabled):hover, input[type="submit"]:not(:disabled):hover, input[type="reset"]:not(:disabled):hover {