fix: :global() compound selector validation tweak (#10287)

Allow type selector in `:global()` when it's at a start of a compound selector
fixes #10286

Author: dummdidumm

.changeset/thirty-pears-hug.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: allow type selector in `:global()` when it's at a start of a compound selector

packages/svelte/src/compiler/phases/2-analyze/css/Selector.js

@@ -181,9 +181,19 @@ export default class Selector {
 
 			for (let i = 0; i < block.selectors.length; i++) {
 				const selector = block.selectors[i];
+
 				if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
 					const child = selector.args?.children[0].children[0];
-					if (child?.type === 'TypeSelector' && !/[.:#]/.test(child.name[0])) {
+					if (
+						child?.type === 'TypeSelector' &&
+						!/[.:#]/.test(child.name[0]) &&
+						(i !== 0 ||
+							block.selectors
+								.slice(1)
+								.some(
+									(s) => s.type !== 'PseudoElementSelector' && s.type !== 'PseudoClassSelector'
+								))
+					) {
 						error(selector, 'invalid-css-global-selector-list');
 					}
 				}

packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json

@@ -3,11 +3,11 @@
 		"code": "invalid-css-global-placement",
 		"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
 		"start": {
-			"line": 5,
+			"line": 8,
 			"column": 6
 		},
 		"end": {
-			"line": 5,
+			"line": 8,
 			"column": 19
 		}
 	}

packages/svelte/tests/validator/samples/css-invalid-global-placement-2/input.svelte

@@ -2,6 +2,9 @@
 	.foo :global(.bar):first-child {
 		color: red;
 	}
+	.foo :global(p):first-child {
+		color: red;
+	}
 	.foo :global(.bar):first-child .baz {
 		color: red;
 	}

packages/svelte/tests/validator/samples/css-invalid-global-placement-6/errors.json

@@ -0,0 +1,14 @@
+[
+	{
+		"code": "invalid-css-global-selector-list",
+		"message": ":global(...) must not contain type or universal selectors when used in a compound selector",
+		"start": {
+			"line": 5,
+			"column": 5
+		},
+		"end": {
+			"line": 5,
+			"column": 17
+		}
+	}
+]

packages/svelte/tests/validator/samples/css-invalid-global-placement-6/input.svelte

@@ -0,0 +1,8 @@
+<style>
+	:global(div):first-child {
+		color: red;
+	}
+	.foo:global(div):first-child {
+		color: red;
+	}
+</style>