fix: improve style parser whitespace handling

Author: navorite

.changeset/dry-eggs-retire.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve style parser whitespace handling

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

@@ -7,7 +7,7 @@ const REGEX_COMBINATOR_WHITESPACE = /^\s*(\+|~|>|\|\|)\s*/;
 const REGEX_COMBINATOR = /^(\+|~|>|\|\|)/;
 const REGEX_PERCENTAGE = /^\d+(\.\d+)?%/;
 const REGEX_NTH_OF =
-	/^\s*(even|odd|\+?(\d+|\d*n(\s*[+-]\s*\d+)?)|-\d*n(\s*\+\s*\d+))(\s*(?=[,)])|\s+of\s+)/;
+	/^(even|odd|\+?(\d+|\d*n(\s*[+-]\s*\d+)?)|-\d*n(\s*\+\s*\d+))((?=\s*[,)])|\s+of\s+)/;
 const REGEX_WHITESPACE_OR_COLON = /[\s:]/;
 const REGEX_BRACE_OR_SEMICOLON = /[{;]/;
 const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/;
@@ -155,6 +155,8 @@ function read_selector_list(parser, inside_pseudo_class = false) {
 
 	const start = parser.index;
 
+	parser.allow_whitespace();
+
 	while (parser.index < parser.template.length) {
 		children.push(read_selector(parser, inside_pseudo_class));
 

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

@@ -496,18 +496,18 @@
 									"args": {
 										"type": "SelectorList",
 										"start": 476,
-										"end": 491,
+										"end": 486,
 										"children": [
 											{
 												"type": "Selector",
-												"start": 476,
-												"end": 491,
+												"start": 485,
+												"end": 486,
 												"children": [
 													{
 														"type": "Nth",
-														"value": "\n        n\n    ",
-														"start": 476,
-														"end": 491
+														"value": "n",
+														"start": 485,
+														"end": 486
 													}
 												]
 											}

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

@@ -15,4 +15,10 @@
 	::slotted(.content) {
 		color: red;
 	}
+	:is(
+		button,
+		h1 + p
+		){
+		color: red;
+	}
 </style>

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

@@ -2,7 +2,7 @@
 	"css": {
 		"type": "Style",
 		"start": 0,
-		"end": 313,
+		"end": 360,
 		"attributes": [],
 		"children": [
 			{
@@ -225,12 +225,96 @@
 				},
 				"start": 266,
 				"end": 304
+			},
+			{
+				"type": "Rule",
+				"prelude": {
+					"type": "SelectorList",
+					"start": 306,
+					"end": 333,
+					"children": [
+						{
+							"type": "Selector",
+							"start": 306,
+							"end": 333,
+							"children": [
+								{
+									"type": "PseudoClassSelector",
+									"name": "is",
+									"args": {
+										"type": "SelectorList",
+										"start": 310,
+										"end": 329,
+										"children": [
+											{
+												"type": "Selector",
+												"start": 313,
+												"end": 319,
+												"children": [
+													{
+														"type": "TypeSelector",
+														"name": "button",
+														"start": 313,
+														"end": 319
+													}
+												]
+											},
+											{
+												"type": "Selector",
+												"start": 323,
+												"end": 329,
+												"children": [
+													{
+														"type": "TypeSelector",
+														"name": "h1",
+														"start": 323,
+														"end": 325
+													},
+													{
+														"type": "Combinator",
+														"name": "+",
+														"start": 326,
+														"end": 327
+													},
+													{
+														"type": "TypeSelector",
+														"name": "p",
+														"start": 328,
+														"end": 329
+													}
+												]
+											}
+										]
+									},
+									"start": 306,
+									"end": 333
+								}
+							]
+						}
+					]
+				},
+				"block": {
+					"type": "Block",
+					"start": 333,
+					"end": 351,
+					"children": [
+						{
+							"type": "Declaration",
+							"start": 337,
+							"end": 347,
+							"property": "color",
+							"value": "red"
+						}
+					]
+				},
+				"start": 306,
+				"end": 351
 			}
 		],
 		"content": {
 			"start": 7,
-			"end": 305,
-			"styles": "\n    /* test that all these are parsed correctly */\n\t::view-transition-old(x-y)  {\n\t\tcolor: red;\n    }\n\t:global(::view-transition-old(x-y))  {\n\t\tcolor: red;\n    }\n\t::highlight(rainbow-color-1) {\n\t\tcolor: red;\n\t}\n\tcustom-element::part(foo) {\n\t\tcolor: red;\n\t}\n\t::slotted(.content) {\n\t\tcolor: red;\n\t}\n"
+			"end": 352,
+			"styles": "\n    /* test that all these are parsed correctly */\n\t::view-transition-old(x-y)  {\n\t\tcolor: red;\n    }\n\t:global(::view-transition-old(x-y))  {\n\t\tcolor: red;\n    }\n\t::highlight(rainbow-color-1) {\n\t\tcolor: red;\n\t}\n\tcustom-element::part(foo) {\n\t\tcolor: red;\n\t}\n\t::slotted(.content) {\n\t\tcolor: red;\n\t}\n\t:is(\n\t\tbutton,\n\t\th1 + p\n\t\t){\n\t\tcolor: red;\n\t}\n"
 		}
 	},
 	"js": [],
@@ -243,4 +327,4 @@
 		"transparent": false
 	},
 	"options": null
-}
+}