handle css nth-selector syntax

Fixes #9765

Author: dummdidumm

.changeset/sweet-mangos-beg.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle css nth-selector syntax

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

@@ -6,6 +6,7 @@ const REGEX_ATTRIBUTE_FLAGS = /^[a-zA-Z]+/; // only `i` and `s` are valid today,
 const REGEX_COMBINATOR_WHITESPACE = /^\s*(\+|~|>|\|\|)\s*/;
 const REGEX_COMBINATOR = /^(\+|~|>|\|\|)/;
 const REGEX_PERCENTAGE = /^\d+(\.\d+)?%/;
+const REGEX_NTH_OF = /^(even|odd|(-?[0-9]?n?(\s*\+\s*[0-9]+)?))(\s+of\s+)?/;
 const REGEX_WHITESPACE_OR_COLON = /[\s:]/;
 const REGEX_BRACE_OR_SEMICOLON = /[{;]/;
 const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/;
@@ -293,6 +294,13 @@ function read_selector(parser, inside_pseudo_class = false) {
 				start,
 				end: parser.index
 			});
+		} else if (parser.match_regex(REGEX_NTH_OF)) {
+			children.push({
+				type: 'Nth',
+				value: /** @type {string} */ (parser.read(REGEX_NTH_OF)),
+				start,
+				end: parser.index
+			});
 		} else {
 			let name = read_identifier(parser);
 			if (parser.match('|')) {

packages/svelte/src/compiler/types/css.d.ts

@@ -67,14 +67,20 @@ export interface Percentage extends BaseNode {
 	value: string;
 }
 
+export interface Nth extends BaseNode {
+	type: 'Nth';
+	value: string;
+}
+
 export type SimpleSelector =
 	| TypeSelector
 	| IdSelector
 	| ClassSelector
 	| AttributeSelector
 	| PseudoElementSelector
 	| PseudoClassSelector
-	| Percentage;
+	| Percentage
+	| Nth;
 
 export interface Combinator extends BaseNode {
 	type: 'Combinator';

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

@@ -0,0 +1,26 @@
+<style>
+    /* test that all these are parsed correctly */
+	h1:nth-of-type(2n+1){
+        background: red;
+    }
+    h1:nth-child(-n + 3 of li.important) {
+        background: red;
+    }
+    h1:nth-child(1) {
+        background: red;
+    }
+    h1:nth-child(p) {
+        background: red;
+    }
+    h1:nth-child(n+7) {
+        background: red;
+    }
+    h1:nth-child(even) {
+        background: red;
+    }
+    h1:nth-child(odd) {
+        background: red;
+    }
+</style>
+
+<h1>Broken</h1>