fix: fix media queries with commas

Author: paoloricciuti

packages/svelte/src/reactivity/media-query.js

@@ -42,7 +42,8 @@ export class MediaQuery extends ReactiveValue {
 	constructor(query, fallback) {
 		let final_query =
 			parenthesis_regex.test(query) ||
-			query.split(' ').every((keyword) => non_parenthesized_keywords.has(keyword))
+			// we need to use `some` here because technically this `window.matchMedia('random,screen')` still returns true
+			query.split(/[\s,]+/).some((keyword) => non_parenthesized_keywords.has(keyword.trim()))
 				? query
 				: `(${query})`;
 		const q = window.matchMedia(final_query);

packages/svelte/tests/runtime-runes/samples/media-query/_config.js

@@ -7,5 +7,8 @@ export default test({
 		expect(window.matchMedia).toHaveBeenCalledWith('(min-width: 900px)');
 		expect(window.matchMedia).toHaveBeenCalledWith('screen');
 		expect(window.matchMedia).toHaveBeenCalledWith('not print');
+		expect(window.matchMedia).toHaveBeenCalledWith('screen,print');
+		expect(window.matchMedia).toHaveBeenCalledWith('screen,      print');
+		expect(window.matchMedia).toHaveBeenCalledWith('screen,      random');
 	}
 });

packages/svelte/tests/runtime-runes/samples/media-query/main.svelte

@@ -5,4 +5,7 @@
 	const mq2 = new MediaQuery("min-width: 900px");
 	const mq3 = new MediaQuery("screen");
 	const mq4 = new MediaQuery("not print");
+	const mq5 = new MediaQuery("screen,print");
+	const mq6 = new MediaQuery("screen,      print");
+	const mq7 = new MediaQuery("screen,      random");
 </script>