fix: wrap :id, :where:not and :has with :global during migration

.changeset/sour-feet-carry.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: migrate css `:id`, `:where``:not` and `:has`

packages/svelte/src/compiler/migrate/index.js

@@ -317,7 +317,15 @@ export function migrate(source, { filename } = {}) {
 		if (!parsed.instance && need_script) {
 			str.appendRight(insertion_point, '\n</script>\n\n');
 		}
-		return { code: str.toString() };
+		return {
+			code: str
+				.toString()
+				// for some reason replacing the magic string doesn't work
+				.replaceAll(
+					/(?<=<style[^>]*>[\s\S]*?:(?:is|not|where|has)\()([^)]+)(?=[\s\S]*?<\/style>)/gm,
+					':global($1)'
+				)
+		};
 	} catch (e) {
 		if (!(e instanceof MigrationError)) {
 			// eslint-disable-next-line no-console

packages/svelte/tests/migrate/samples/is-not-where-has/input.svelte

@@ -0,0 +1,41 @@
+<script>
+	function is(){}
+	function where(){}
+	function not(){}
+	function has(){}
+
+	// looks like css but it's not in style tag
+	const x = {
+		div:is(42),
+		span:where(42),
+		form:not(42),
+		input:has(42),
+	}
+</script>
+
+what if i'm talking about `:has()` in my blog?
+
+```css
+	:has(.is_cool)
+```
+
+<style lang="postcss">
+	div:has(span){}
+	div > :not(span){}
+	div > :is(span){}
+	div > :where(span){}
+
+	div:has(:is(span)){}
+	div > :not(:is(span)){}
+	div > :is(:is(span)){}
+	div > :where(:is(span)){}
+
+	div{
+		p:has(&){
+
+		}
+		:not(span > *){
+			:where(form){}
+		}
+	}
+</style>

packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte

@@ -0,0 +1,41 @@
+<script>
+	function is(){}
+	function where(){}
+	function not(){}
+	function has(){}
+
+	// looks like css but it's not in style tag
+	const x = {
+		div:is(42),
+		span:where(42),
+		form:not(42),
+		input:has(42),
+	}
+</script>
+
+what if i'm talking about `:has()` in my blog?
+
+```css
+	:has(.is_cool)
+```
+
+<style lang="postcss">
+	div:has(:global(span)){}
+	div > :not(:global(span)){}
+	div > :is(:global(span)){}
+	div > :where(:global(span)){}
+
+	div:has(:global(:is(span))){}
+	div > :not(:global(:is(span))){}
+	div > :is(:global(:is(span))){}
+	div > :where(:global(:is(span))){}
+
+	div{
+		p:has(:global(&)){
+
+		}
+		:not(:global(span > *)){
+			:where(:global(form)){}
+		}
+	}
+</style>