[fix] error when using combinator incorrectly (#7650)

* error when using combinator incorrectly

* add new test case

Author: tanhauhau

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_selector: (selector: string) => ({
+		code: 'css-invalid-selector',
+		message: `Invalid selector "${selector}"`
+	}),
 	duplicate_animation: {
 		code: 'duplicate-animation',
 		message: "An element can only have one 'animate' directive"

src/compiler/compile/css/Selector.ts

@@ -145,6 +145,7 @@ export default class Selector {
 		}
 
 		this.validate_global_with_multiple_selectors(component);
+		this.validate_invalid_combinator_without_selector(component);
 	}
 
 	validate_global_with_multiple_selectors(component: Component) {
@@ -163,6 +164,17 @@ export default class Selector {
 			}
 		}
 	}
+	validate_invalid_combinator_without_selector(component: Component) {
+		for (let i = 0; i < this.blocks.length; i++) {
+			const block = this.blocks[i];
+			if (block.combinator && block.selectors.length === 0) {
+				component.error(this.node, compiler_errors.css_invalid_selector(component.source.slice(this.node.start, this.node.end)));
+			}
+			if (!block.combinator && block.selectors.length === 0) {
+				component.error(this.node, compiler_errors.css_invalid_selector(component.source.slice(this.node.start, this.node.end)));
+			}
+		}
+	}
 
 	get_amount_class_specificity_increased() {
 		let count = 0;

test/validator/samples/css-invalid-combinator-selector-1/errors.json

@@ -0,0 +1,9 @@
+[
+	{
+		"code": "css-invalid-selector",
+		"message": "Invalid selector \"> span\"",
+		"start": { "line": 10, "column": 1, "character": 88 },
+		"end": { "line": 10, "column": 7, "character": 94 },
+		"pos": 88
+	}
+]

test/validator/samples/css-invalid-combinator-selector-1/input.svelte

@@ -0,0 +1,13 @@
+<p><span /></p>
+
+<style>
+	p > span {
+		color: red;
+	}
+	:has(> span) {
+		color: red;
+	}
+	> span {
+		color: red;
+	}
+</style>

test/validator/samples/css-invalid-combinator-selector-2/errors.json

@@ -0,0 +1,9 @@
+[
+	{
+		"code": "css-invalid-selector",
+		"message": "Invalid selector \"+ p\"",
+		"start": { "line": 8, "column": 1, "character": 68 },
+		"end": { "line": 8, "column": 4, "character": 71 },
+		"pos": 68
+	}
+]

test/validator/samples/css-invalid-combinator-selector-2/input.svelte

@@ -0,0 +1,11 @@
+<p><span /></p>
+<p><span /></p>
+
+<style>
+	p + p {
+		color: red;
+	}
+	+ p {
+		color: red;
+	}
+</style>

test/validator/samples/css-invalid-combinator-selector-3/errors.json

@@ -0,0 +1,9 @@
+[
+	{
+		"code": "css-invalid-selector",
+		"message": "Invalid selector \"> span\"",
+		"start": { "line": 5, "column": 2, "character": 44 },
+		"end": { "line": 5, "column": 8, "character": 50 },
+		"pos": 44
+	}
+]

test/validator/samples/css-invalid-combinator-selector-3/input.svelte

@@ -0,0 +1,9 @@
+<p><span /></p>
+
+<style>
+	@media screen {
+		> span {
+			color: red;
+		}
+	}
+</style>

test/validator/samples/css-invalid-combinator-selector-4/errors.json

@@ -0,0 +1,9 @@
+[
+	{
+		"code": "css-invalid-selector",
+		"message": "Invalid selector \"p >\"",
+		"start": { "line": 4, "column": 1, "character": 26 },
+		"end": { "line": 4, "column": 4, "character": 29 },
+		"pos": 26
+	}
+]

test/validator/samples/css-invalid-combinator-selector-4/input.svelte

@@ -0,0 +1,7 @@
+<p><span /></p>
+
+<style>
+	p > {
+		color: red;
+	}
+</style>