From 7eef30ee028d8d7679398b55b81c64db694a8aaa Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Mon, 19 May 2025 19:47:02 +0200 Subject: [PATCH] fix: fix media queries with commas --- packages/svelte/src/reactivity/media-query.js | 3 ++- .../svelte/tests/runtime-runes/samples/media-query/_config.js | 3 +++ .../svelte/tests/runtime-runes/samples/media-query/main.svelte | 3 +++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/svelte/src/reactivity/media-query.js b/packages/svelte/src/reactivity/media-query.js index 4e3f11c145..d286709719 100644 --- a/packages/svelte/src/reactivity/media-query.js +++ b/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); diff --git a/packages/svelte/tests/runtime-runes/samples/media-query/_config.js b/packages/svelte/tests/runtime-runes/samples/media-query/_config.js index 60a9d12362..d8b202955a 100644 --- a/packages/svelte/tests/runtime-runes/samples/media-query/_config.js +++ b/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'); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte b/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte index 0b9f0cc3ea..fe07ed8ab0 100644 --- a/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte +++ b/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");