fix(hiccup-css): fix media query not operator

- wrap sub-query in parens - update tests
thi-ng · Dec 22, 2023 · f40800b · f40800b
1 parent 118a345
commit f40800b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/packages/hiccup-css/src/conditional.ts b/packages/hiccup-css/src/conditional.ts
@@ -25,7 +25,7 @@ const formatCond = (cond: any) => {
 			if (v === true) {
 				v = MEDIA_TYPES.has(c) ? c : `(${c})`;
 			} else if (v === false) {
-				v = "not " + (MEDIA_TYPES.has(c) ? c : `(${c})`);
+				v = `(not ${MEDIA_TYPES.has(c) ? c : `(${c})`})`;
 			} else if (v === "only") {
 				v += " " + c;
 			} else {

diff --git a/packages/hiccup-css/test/main.test.ts b/packages/hiccup-css/test/main.test.ts
@@ -100,9 +100,9 @@ test("@keyframes", () => {
 
 test("@media", () => {
 	expect(css(at_media({ screen: true }, []))).toBe("@media screen{}");
-	expect(css(at_media({ screen: false }, []))).toBe("@media not screen{}");
+	expect(css(at_media({ screen: false }, []))).toBe("@media (not screen){}");
 	expect(css(at_media({ screen: false, print: true }, []))).toBe(
-		"@media not screen and print{}"
+		"@media (not screen) and print{}"
 	);
 	expect(css(at_media({ screen: "only" }, []))).toBe("@media only screen{}");
 	expect(
@@ -127,7 +127,7 @@ test("@media", () => {
 		`@media (prefers-reduced-motion){}`
 	);
 	expect(css(at_media({ "prefers-reduced-motion": false }, []))).toBe(
-		`@media not (prefers-reduced-motion){}`
+		`@media (not (prefers-reduced-motion)){}`
 	);
 });