From b683e102864c9774050857fcc2672eed122b3fa2 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 12 Dec 2024 22:50:10 +0100
Subject: [PATCH] fix: don't add parenthesis to media query if already present

---
 .changeset/cold-cows-enjoy.md                            | 5 +++++
 packages/svelte/src/reactivity/media-query.js            | 5 ++++-
 packages/svelte/tests/helpers.js                         | 5 +++--
 .../tests/runtime-runes/samples/media-query/_config.js   | 9 +++++++++
 .../tests/runtime-runes/samples/media-query/main.svelte  | 6 ++++++
 5 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/cold-cows-enjoy.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/media-query/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/media-query/main.svelte

diff --git a/.changeset/cold-cows-enjoy.md b/.changeset/cold-cows-enjoy.md
new file mode 100644
index 000000000000..f3005f6ec388
--- /dev/null
+++ b/.changeset/cold-cows-enjoy.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't add parenthesis to media query if already present
diff --git a/packages/svelte/src/reactivity/media-query.js b/packages/svelte/src/reactivity/media-query.js
index 7da9ada667f9..22310df18d53 100644
--- a/packages/svelte/src/reactivity/media-query.js
+++ b/packages/svelte/src/reactivity/media-query.js
@@ -1,6 +1,8 @@
 import { on } from '../events/index.js';
 import { ReactiveValue } from './reactive-value.js';
 
+const parenthesis_regex = /\(.+\)/;
+
 /**
  * Creates a media query and provides a `current` property that reflects whether or not it matches.
  *
@@ -25,7 +27,8 @@ export class MediaQuery extends ReactiveValue {
 	 * @param {boolean} [fallback] Fallback value for the server
 	 */
 	constructor(query, fallback) {
-		const q = window.matchMedia(`(${query})`);
+		let final_query = parenthesis_regex.test(query) ? query : `(${query})`;
+		const q = window.matchMedia(final_query);
 		super(
 			() => q.matches,
 			(update) => on(q, 'change', update)
diff --git a/packages/svelte/tests/helpers.js b/packages/svelte/tests/helpers.js
index 45b90240c99a..9d7f71c9bd63 100644
--- a/packages/svelte/tests/helpers.js
+++ b/packages/svelte/tests/helpers.js
@@ -3,6 +3,7 @@ import * as fs from 'node:fs';
 import * as path from 'node:path';
 import glob from 'tiny-glob/sync.js';
 import { VERSION, compile, compileModule, preprocess } from 'svelte/compiler';
+import { vi } from 'vitest';
 
 /**
  * @param {string} file
@@ -176,12 +177,12 @@ export function write(file, contents) {
 // Guard because not all test contexts load this with JSDOM
 if (typeof window !== 'undefined') {
 	// @ts-expect-error JS DOM doesn't support it
-	Window.prototype.matchMedia = (media) => {
+	Window.prototype.matchMedia = vi.fn((media) => {
 		return {
 			matches: false,
 			media,
 			addEventListener: () => {},
 			removeEventListener: () => {}
 		};
-	};
+	});
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/media-query/_config.js b/packages/svelte/tests/runtime-runes/samples/media-query/_config.js
new file mode 100644
index 000000000000..f7a4ca05f570
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/media-query/_config.js
@@ -0,0 +1,9 @@
+import { expect } from 'vitest';
+import { test } from '../../test';
+
+export default test({
+	async test({ window }) {
+		expect(window.matchMedia).toHaveBeenCalledWith('(max-width: 599px), (min-width: 900px)');
+		expect(window.matchMedia).toHaveBeenCalledWith('(min-width: 900px)');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte b/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte
new file mode 100644
index 000000000000..446a9213dda2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { MediaQuery } from "svelte/reactivity"
+
+	const mq = new MediaQuery("(max-width: 599px), (min-width: 900px)");
+	const mq2 = new MediaQuery("min-width: 900px");
+</script>