read selectors before combinators

Author: Rich-Harris

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

@@ -216,30 +216,6 @@ function read_selector(parser, inside_pseudo_class = false) {
 	while (parser.index < parser.template.length) {
 		let start = parser.index;
 
-		const combinator = read_combinator(parser);
-
-		if (combinator) {
-			if (relative_selector.selectors.length === 0) {
-				if (!inside_pseudo_class) {
-					error(start, 'invalid-css-selector');
-				}
-			} else {
-				relative_selector.end = start;
-				children.push(relative_selector);
-			}
-
-			// ...and start a new one
-			relative_selector = create_selector(combinator, start);
-
-			parser.allow_whitespace();
-
-			if (parser.match(',') || (inside_pseudo_class ? parser.match(')') : parser.match('{'))) {
-				error(parser.index, 'invalid-css-selector');
-			}
-		}
-
-		start = parser.index;
-
 		if (parser.eat('*')) {
 			let name = '*';
 
@@ -348,7 +324,7 @@ function read_selector(parser, inside_pseudo_class = false) {
 				start,
 				end: parser.index
 			});
-		} else {
+		} else if (!parser.match_regex(REGEX_COMBINATOR)) {
 			let name = read_identifier(parser);
 
 			if (parser.eat('|')) {
@@ -386,6 +362,27 @@ function read_selector(parser, inside_pseudo_class = false) {
 		}
 
 		parser.index = index;
+		const combinator = read_combinator(parser);
+
+		if (combinator) {
+			if (relative_selector.selectors.length === 0) {
+				if (!inside_pseudo_class) {
+					error(start, 'invalid-css-selector');
+				}
+			} else {
+				relative_selector.end = index;
+				children.push(relative_selector);
+			}
+
+			// ...and start a new one
+			relative_selector = create_selector(combinator, combinator.start);
+
+			parser.allow_whitespace();
+
+			if (parser.match(',') || (inside_pseudo_class ? parser.match(')') : parser.match('{'))) {
+				error(parser.index, 'invalid-css-selector');
+			}
+		}
 	}
 
 	error(parser.template.length, 'unexpected-eof');

packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json

@@ -945,17 +945,12 @@
 														"children": [
 															{
 																"type": "RelativeSelector",
-																"combinator": {
-																	"type": "Combinator",
-																	"name": "+",
-																	"start": 707,
-																	"end": 708
-																},
+																"combinator": null,
 																"selectors": [
 																	{
 																		"type": "Nth",
-																		"value": "12",
-																		"start": 708,
+																		"value": "+12",
+																		"start": 707,
 																		"end": 710
 																	}
 																],
@@ -1031,17 +1026,12 @@
 														"children": [
 															{
 																"type": "RelativeSelector",
-																"combinator": {
-																	"type": "Combinator",
-																	"name": "+",
-																	"start": 761,
-																	"end": 762
-																},
+																"combinator": null,
 																"selectors": [
 																	{
 																		"type": "Nth",
-																		"value": "3n",
-																		"start": 762,
+																		"value": "+3n",
+																		"start": 761,
 																		"end": 764
 																	}
 																],

packages/svelte/tests/parser-modern/samples/css-pseudo-classes/output.json

@@ -354,7 +354,7 @@
 																		"end": 355
 																	}
 																],
-																"start": 351,
+																"start": 352,
 																"end": 355
 															}
 														]