fix: allow combinator at start of nested CSS selector (#13440)

* fix: allow combinator at start of nested CSS selector

Solved by moving the combinator positioning validation into the analysis phase

Fixes #13433

* highlight the combinator, not the start of the combinator

* fix

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>

.changeset/young-ducks-punch.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow combinator at start of nested CSS selector

packages/svelte/src/compiler/phases/1-parse/read/style.js

@@ -351,11 +351,7 @@ function read_selector(parser, inside_pseudo_class = false) {
 		const combinator = read_combinator(parser);
 
 		if (combinator) {
-			if (relative_selector.selectors.length === 0) {
+			if (relative_selector.selectors.length > 0) {
-				if (!inside_pseudo_class) {
-					e.css_selector_invalid(start);
-				}
-			} else {
 				relative_selector.end = index;
 				children.push(relative_selector);
 			}

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

@@ -129,6 +129,17 @@ const css_visitors = {
 		}
 	},
 	RelativeSelector(node, context) {
+		const parent = /** @type {Css.ComplexSelector} */ (context.path.at(-1));
+
+		if (
+			node.combinator != null &&
+			!context.state.rule?.metadata.parent_rule &&
+			parent.children[0] === node &&
+			context.path.at(-3)?.type !== 'PseudoClassSelector'
+		) {
+			e.css_selector_invalid(node.combinator);
+		}
+
 		node.metadata.is_global = node.selectors.length >= 1 && is_global(node);
 
 		if (node.selectors.length === 1) {

packages/svelte/tests/css/samples/nested-css-combinator/_config.js

@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			end: {
+				character: 109,
+				column: 11,
+				line: 11
+			},
+			message: 'Unused CSS selector "~ .unused"',
+			start: {
+				character: 100,
+				column: 2,
+				line: 11
+			}
+		}
+	]
+});

packages/svelte/tests/css/samples/nested-css-combinator/expected.css

@@ -0,0 +1,10 @@
+
+	.foo.svelte-xyz {
+		> .bar:where(.svelte-xyz) {
+			color: red;
+		}
+
+		/* (unused) ~ .unused {
+			color: red;
+		}*/
+	}

packages/svelte/tests/css/samples/nested-css-combinator/input.svelte

@@ -0,0 +1,15 @@
+<div class="foo">
+	<div class="bar"></div>
+</div>
+
+<style>
+	.foo {
+		> .bar {
+			color: red;
+		}
+
+		~ .unused {
+			color: red;
+		}
+	}
+</style>

packages/svelte/tests/validator/samples/css-invalid-combinator-selector-1/errors.json

@@ -8,7 +8,7 @@
 		},
 		"end": {
 			"line": 10,
-			"column": 1
+			"column": 2
 		}
 	}
 ]

packages/svelte/tests/validator/samples/css-invalid-combinator-selector-2/errors.json

@@ -8,7 +8,7 @@
 		},
 		"end": {
 			"line": 8,
-			"column": 1
+			"column": 2
 		}
 	}
 ]

packages/svelte/tests/validator/samples/css-invalid-combinator-selector-3/errors.json

@@ -8,7 +8,7 @@
 		},
 		"end": {
 			"line": 5,
-			"column": 2
+			"column": 3
 		}
 	}
 ]