fix(hiccup-css): update conditional formatting

- add tests
thi-ng · Dec 14, 2023 · f126005 · f126005
1 parent 08628b3
commit f126005
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/packages/hiccup-css/package.json b/packages/hiccup-css/package.json
@@ -58,7 +58,6 @@
 		"export",
 		"fileformat",
 		"hiccup",
-		"iterator",
 		"json",
 		"typescript",
 		"ui"

diff --git a/packages/hiccup-css/src/conditional.ts b/packages/hiccup-css/src/conditional.ts
@@ -23,9 +23,9 @@ const formatCond = (cond: any) => {
 		if (cond.hasOwnProperty(c)) {
 			let v = cond[c];
 			if (v === true) {
-				v = c;
+				v = MEDIA_TYPES.has(c) ? c : `(${c})`;
 			} else if (v === false) {
-				v = "not " + c;
+				v = "not " + (MEDIA_TYPES.has(c) ? c : `(${c})`);
 			} else if (v === "only") {
 				v += " " + c;
 			} else {
@@ -36,3 +36,5 @@ const formatCond = (cond: any) => {
 	}
 	return acc.join(" and ");
 };
+
+const MEDIA_TYPES = new Set(["all", "print", "screen"]);
diff --git a/packages/hiccup-css/test/main.test.ts b/packages/hiccup-css/test/main.test.ts
@@ -121,6 +121,12 @@ test("@media", () => {
 	).toBe(
 		"@media screen and print{div .foo{color:red;}@media print and (max-width:20rem){div{border:0;}}}"
 	);
+	expect(css(at_media({ "prefers-reduced-motion": true }, []))).toBe(
+		`@media (prefers-reduced-motion){}`
+	);
+	expect(css(at_media({ "prefers-reduced-motion": false }, []))).toBe(
+		`@media not (prefers-reduced-motion){}`
+	);
 });
 
 test("animation", () => {