fix: add global compound selector validation (#6322)

fixes #6272
prevents invalid CSS output

---------

Co-authored-by: Roy Choo <roy.choo@bytedance.com>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

src/compiler/compile/compiler_errors.ts

@@ -234,6 +234,10 @@ export default {
 		code: 'css-invalid-global-selector',
 		message: ':global(...) must contain a single selector'
 	},
+	css_invalid_global_selector_position: {
+		code: 'css-invalid-global-selector-position',
+		message: ':global(...) not at the start of a selector sequence should not contain type or universal selectors'
+	},
 	css_invalid_selector: (selector: string) => ({
 		code: 'css-invalid-selector',
 		message: `Invalid selector "${selector}"`

src/compiler/compile/css/Selector.ts

@@ -148,6 +148,7 @@ export default class Selector {
 		}
 
 		this.validate_global_with_multiple_selectors(component);
+		this.validate_global_compound_selector(component);
 		this.validate_invalid_combinator_without_selector(component);
 	}
 
@@ -179,6 +180,23 @@ export default class Selector {
 		}
 	}
 
+	validate_global_compound_selector(component: Component) {
+		for (const block of this.blocks) {
+			for (let index = 0; index < block.selectors.length; index++) {
+				const selector = block.selectors[index];
+				if (selector.type === 'PseudoClassSelector' &&
+					selector.name === 'global' &&
+					index !== 0 &&
+					selector.children &&
+					selector.children.length > 0 &&
+					!/[.:#\s]/.test(selector.children[0].value)
+				) {
+					component.error(selector, compiler_errors.css_invalid_global_selector_position);
+				}
+			}
+		}
+	}
+
 	get_amount_class_specificity_increased() {
 		let count = 0;
 		for (const block of this.blocks) {

test/validator/samples/css-invalid-global-placement-4/errors.json

@@ -0,0 +1,12 @@
+[{
+	"code": "css-invalid-global-selector-position",
+	"message": ":global(...) not at the start of a selector sequence should not contain type or universal selectors",
+	"start": {
+		"line": 2,
+		"column": 5
+	},
+	"end": {
+		"line": 2,
+		"column": 17
+	}
+}]

test/validator/samples/css-invalid-global-placement-4/input.svelte

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