chore: fix compiler-errors test suite (#9754)

- fix compiler-errors test suite
- handle css nth-selector syntax (fixes #9765)

---------

Co-authored-by: Rich Harris <[email protected]>
Co-authored-by: Simon Holthausen <[email protected]>

Author: Rich-Harris

.changeset/itchy-beans-melt.md

@@ -24,9 +24,11 @@ const internal = {
 const parse = {
 	/** @param {string} name */
 	'unclosed-element': (name) => `<${name}> was left open`,
-	'unclosed-block': () => `block was left open`,
+	'unclosed-block': () => `Block was left open`,
 	'unexpected-block-close': () => `Unexpected block closing tag`,
-	'unexpected-eof': () => `Unexpected end of input`,
+	/** @param {string} [expected]  */
+	'unexpected-eof': (expected) =>
+		`Unexpected end of input` + (expected ? ` (expected ${expected})` : ''),
 	/** @param {string} message */
 	'js-parse-error': (message) => message,
 	/** @param {string} token */
@@ -39,17 +41,15 @@ const parse = {
 	'invalid-script-context': () =>
 		`If the context attribute is supplied, its value must be "module"`,
 	'invalid-elseif': () => `'elseif' should be 'else if'`,
-	/**
-	 * @param {string} child
-	 * @param {string} parent
-	 */
-	'invalid-block-parent': (child, parent) =>
-		`Expected to close ${parent} before seeing ${child} block`,
+	'invalid-continuing-block-placement': () =>
+		`{:...} block is invalid at this position (did you forget to close the preceeding element or block?)`,
 	/**
 	 * @param {string} child
 	 * @param {string} parent
 	 */
 	'invalid-block-missing-parent': (child, parent) => `${child} block must be a child of ${parent}`,
+	/** @param {string} name */
+	'duplicate-block-part': (name) => `${name} cannot appear more than once within a block`,
 	'expected-block-type': () => `Expected 'if', 'each', 'await', 'key' or 'snippet'`,
 	'expected-identifier': () => `Expected an identifier`,
 	'invalid-debug': () => `{@debug ...} arguments must be identifiers, not arbitrary expressions`,
@@ -98,12 +98,9 @@ const css = {
 	'invalid-css-empty-declaration': () => `Declaration cannot be empty`,
 	'invalid-css-global-placement': () =>
 		`:global(...) can be at the start or end of a selector sequence, but not in the middle`,
-
 	'invalid-css-global-selector': () => `:global(...) must contain exactly one selector`,
-
 	'invalid-css-global-selector-list': () =>
 		`:global(...) cannot be used to modify a selector, or be modified by another selector`,
-
 	'invalid-css-selector': () => `Invalid selector`,
 	'invalid-css-identifier': () => 'Expected a valid CSS identifier'
 };

.changeset/sweet-mangos-beg.md

@@ -77,8 +77,10 @@ export class Parser {
 			const current = this.current();
 
 			if (current.type === 'RegularElement') {
+				current.end = current.start + 1;
 				error(current, 'unclosed-element', current.name);
 			} else {
+				current.end = current.start + 1;
 				error(current, 'unclosed-block');
 			}
 		}
@@ -145,7 +147,7 @@ export class Parser {
 
 		if (required) {
 			if (this.index === this.template.length) {
-				error(this.index, 'unexpected-eof');
+				error(this.index, 'unexpected-eof', str);
 			} else {
 				error(this.index, 'expected-token', str);
 			}

packages/svelte/src/compiler/errors.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/;
@@ -234,6 +235,8 @@ function read_selector(parser, inside_pseudo_class = false) {
 			if (parser.eat('(')) {
 				args = read_selector_list(parser, true);
 				parser.eat(')', true);
+			} else if (name === 'global') {
+				error(parser.index, 'invalid-css-global-selector');
 			}
 
 			children.push({
@@ -291,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/phases/1-parse/index.js

@@ -202,11 +202,13 @@ export default function tag(parser) {
 
 	let attribute;
 	while ((attribute = read(parser))) {
-		if (
-			(attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
-			unique_names.includes(attribute.name)
-		) {
-			error(attribute.start, 'duplicate-attribute');
+		if (attribute.type === 'Attribute' || attribute.type === 'BindDirective') {
+			if (unique_names.includes(attribute.name)) {
+				error(attribute.start, 'duplicate-attribute');
+				// <svelte:element bind:this this=..> is allowed
+			} else if (attribute.name !== 'this') {
+				unique_names.push(attribute.name);
+			}
 		}
 
 		element.attributes.push(attribute);
@@ -635,13 +637,14 @@ function read_attribute_value(parser) {
 			'in attribute value'
 		);
 	} catch (/** @type {any} e */ e) {
-		if (e.code === 'parse-error') {
+		if (e.code === 'js-parse-error') {
 			// if the attribute value didn't close + self-closing tag
 			// eg: `<Component test={{a:1} />`
 			// acorn may throw a `Unterminated regular expression` because of `/>`
-			if (parser.template.slice(e.pos - 1, e.pos + 1) === '/>') {
-				parser.index = e.pos;
-				error(e.pos, 'unclosed-attribute-value', quote_mark || '}');
+			const pos = e.position?.[0];
+			if (pos !== undefined && parser.template.slice(pos - 1, pos + 1) === '/>') {
+				parser.index = pos;
+				error(pos, 'unclosed-attribute-value', quote_mark || '}');
 			}
 		}
 		throw e;

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

@@ -315,7 +315,7 @@ function next(parser) {
 	const block = parser.current(); // TODO type should not be TemplateNode, that's much too broad
 
 	if (block.type === 'IfBlock') {
-		if (!parser.eat('else')) error(start, 'expected-token', 'else');
+		if (!parser.eat('else')) error(start, 'expected-token', '{:else} or {:else if}');
 		if (parser.eat('if')) error(start, 'invalid-elseif');
 
 		parser.allow_whitespace();
@@ -359,7 +359,7 @@ function next(parser) {
 	}
 
 	if (block.type === 'EachBlock') {
-		if (!parser.eat('else')) error(start, 'expected-token', 'else');
+		if (!parser.eat('else')) error(start, 'expected-token', '{:else}');
 
 		parser.allow_whitespace();
 		parser.eat('}', true);
@@ -375,7 +375,7 @@ function next(parser) {
 	if (block.type === 'AwaitBlock') {
 		if (parser.eat('then')) {
 			if (block.then) {
-				error(start, 'TODO', 'duplicate then');
+				error(start, 'duplicate-block-part', '{:then}');
 			}
 
 			if (!parser.eat('}')) {
@@ -394,7 +394,7 @@ function next(parser) {
 
 		if (parser.eat('catch')) {
 			if (block.catch) {
-				error(start, 'TODO', 'duplicate catch');
+				error(start, 'duplicate-block-part', '{:catch}');
 			}
 
 			if (!parser.eat('}')) {
@@ -413,6 +413,8 @@ function next(parser) {
 
 		error(start, 'expected-token', '{:then ...} or {:catch ...}');
 	}
+
+	error(start, 'invalid-continuing-block-placement');
 }
 
 /** @param {import('../index.js').Parser} parser */

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -306,7 +306,7 @@ function block_might_apply_to_node(block, node) {
 	while (i--) {
 		const selector = block.selectors[i];
 
-		if (selector.type === 'Percentage') continue;
+		if (selector.type === 'Percentage' || selector.type === 'Nth') continue;
 
 		const name = selector.name.replace(regex_backslash_and_following_character, '$1');
 

packages/svelte/src/compiler/phases/1-parse/state/tag.js

@@ -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/src/compiler/phases/2-analyze/css/Selector.js

@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'missing-attribute-value',
-		message: 'Expected value for the attribute',
+		message: 'Expected attribute value',
 		position: [12, 12]
 	}
 });

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

@@ -2,8 +2,8 @@ import { test } from '../../test';
 
 export default test({
 	error: {
-		code: 'invalid-catch-placement',
-		message: 'Expected to close {#each} block before seeing {:catch} block',
-		position: [41, 41]
+		code: 'expected-token',
+		message: 'Expected token {:else}',
+		position: [35, 35]
 	}
 });

packages/svelte/tests/compiler-errors/samples/attribute-empty/_config.js

@@ -2,8 +2,9 @@ import { test } from '../../test';
 
 export default test({
 	error: {
-		code: 'invalid-catch-placement',
-		message: 'Cannot have an {:catch} block outside an {#await ...} block',
-		position: [7, 7]
+		code: 'invalid-continuing-block-placement',
+		message:
+			'{:...} block is invalid at this position (did you forget to close the preceeding element or block?)',
+		position: [1, 1]
 	}
 });

packages/svelte/tests/compiler-errors/samples/attribute-empty/input.svelte renamed to packages/svelte/tests/compiler-errors/samples/attribute-empty/main.svelte

@@ -4,6 +4,6 @@ export default test({
 	error: {
 		code: 'invalid-state-location',
 		message: '$state() can only be used as a variable declaration initializer or a class field',
-		position: process.platform === 'win32' ? [35, 43] : [33, 41]
+		position: [33, 41]
 	}
 });

packages/svelte/tests/compiler-errors/samples/attribute-unique-binding/input.svelte renamed to packages/svelte/tests/compiler-errors/samples/attribute-unique-binding/main.svelte

@@ -2,8 +2,8 @@ import { test } from '../../test';
 
 export default test({
 	error: {
-		code: 'unclosed-comment',
-		message: 'comment was left open, expected -->',
+		code: 'unexpected-eof',
+		message: 'Unexpected end of input (expected -->)',
 		position: [24, 24]
 	}
 });

packages/svelte/tests/compiler-errors/samples/attribute-unique-shorthand/input.svelte renamed to packages/svelte/tests/compiler-errors/samples/attribute-unique-shorthand/main.svelte

@@ -2,8 +2,8 @@ import { test } from '../../test';
 
 export default test({
 	error: {
-		code: 'css-syntax-error',
-		message: ':global() must contain a selector',
-		position: [9, 9]
+		code: 'invalid-css-global-selector',
+		message: ':global(...) must contain exactly one selector',
+		position: [16, 16]
 	}
 });

packages/svelte/tests/compiler-errors/samples/attribute-unique/input.svelte renamed to packages/svelte/tests/compiler-errors/samples/attribute-unique/main.svelte

@@ -2,8 +2,8 @@ import { test } from '../../test';
 
 export default test({
 	error: {
-		code: 'css-syntax-error',
-		message: '"{" is expected',
-		position: [24, 24]
+		code: 'invalid-css-identifier',
+		message: 'Expected a valid CSS identifier',
+		position: [25, 25]
 	}
 });

packages/svelte/tests/compiler-errors/samples/catch-before-closing/_config.js

@@ -2,8 +2,8 @@ import { test } from '../../test';
 
 export default test({
 	error: {
-		code: 'invalid-else-placement',
-		message: 'Expected to close {#await} block before seeing {:else} block',
-		position: [29, 29]
+		code: 'expected-token',
+		message: 'Expected token {:then ...} or {:catch ...}',
+		position: [24, 24]
 	}
 });

packages/svelte/tests/compiler-errors/samples/catch-before-closing/input.svelte renamed to packages/svelte/tests/compiler-errors/samples/catch-before-closing/main.svelte

@@ -2,8 +2,9 @@ import { test } from '../../test';
 
 export default test({
 	error: {
-		code: 'invalid-else-placement',
-		message: 'Cannot have an {:else} block outside an {#if ...} or {#each ...} block',
-		position: [11, 11]
+		code: 'invalid-continuing-block-placement',
+		message:
+			'{:...} block is invalid at this position (did you forget to close the preceeding element or block?)',
+		position: [6, 6]
 	}
 });

packages/svelte/tests/compiler-errors/samples/catch-without-await/_config.js

@@ -2,8 +2,9 @@ import { test } from '../../test';
 
 export default test({
 	error: {
-		code: 'invalid-else-placement',
-		message: 'Expected to close <li> tag before seeing {:else} block',
-		position: [23, 23]
+		code: 'invalid-continuing-block-placement',
+		message:
+			'{:...} block is invalid at this position (did you forget to close the preceeding element or block?)',
+		position: [18, 18]
 	}
 });

packages/svelte/tests/compiler-errors/samples/catch-without-await/input.svelte renamed to packages/svelte/tests/compiler-errors/samples/catch-without-await/main.svelte

@@ -2,8 +2,9 @@ import { test } from '../../test';
 
 export default test({
 	error: {
-		code: 'invalid-elseif-placement',
-		message: 'Expected to close <p> tag before seeing {:else if ...} block',
-		position: [25, 25]
+		code: 'invalid-continuing-block-placement',
+		message:
+			'{:...} block is invalid at this position (did you forget to close the preceeding element or block?)',
+		position: [17, 17]
 	}
 });

packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js

@@ -2,8 +2,8 @@ import { test } from '../../test';
 
 export default test({
 	error: {
-		code: 'invalid-elseif-placement',
-		message: 'Expected to close {#await} block before seeing {:else if ...} block',
-		position: [34, 34]
+		code: 'expected-token',
+		message: 'Expected token {:then ...} or {:catch ...}',
+		position: [26, 26]
 	}
 });

packages/svelte/tests/compiler-errors/samples/comment-unclosed/_config.js

@@ -2,8 +2,8 @@ import { test } from '../../test';
 
 export default test({
 	error: {
-		code: 'invalid-elseif-placement',
-		message: 'Cannot have an {:else if ...} block outside an {#if ...} block',
-		position: [35, 35]
+		code: 'expected-token',
+		message: 'Expected token {:then ...} or {:catch ...}',
+		position: [27, 27]
 	}
 });

packages/svelte/tests/compiler-errors/samples/comment-unclosed/input.svelte renamed to packages/svelte/tests/compiler-errors/samples/comment-unclosed/main.svelte

@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'empty-directive-name',
-		message: 'Class name cannot be empty',
+		message: 'ClassDirective name cannot be empty',
 		position: [10, 10]
 	}
 });

packages/svelte/tests/compiler-errors/samples/css-global-without-selector/_config.js

@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'empty-directive-name',
-		message: 'Action name cannot be empty',
+		message: 'UseDirective name cannot be empty',
 		position: [8, 8]
 	}
 });