diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts index ea95c8cbecf..c1a7d8bc5cb 100644 --- a/src/compiler/compile/compiler_errors.ts +++ b/src/compiler/compile/compiler_errors.ts @@ -234,6 +234,10 @@ export default { code: 'css-invalid-global-selector', message: ':global(...) must contain a single selector' }, + css_invalid_selector: (selector: string) => ({ + code: 'css-invalid-selector', + message: `Invalid selector "${selector}"` + }), duplicate_animation: { code: 'duplicate-animation', message: "An element can only have one 'animate' directive" diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index b00fbc55489..d61ba1f5101 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -145,6 +145,7 @@ export default class Selector { } this.validate_global_with_multiple_selectors(component); + this.validate_invalid_combinator_without_selector(component); } validate_global_with_multiple_selectors(component: Component) { @@ -163,6 +164,17 @@ export default class Selector { } } } + validate_invalid_combinator_without_selector(component: Component) { + for (let i = 0; i < this.blocks.length; i++) { + const block = this.blocks[i]; + if (block.combinator && block.selectors.length === 0) { + component.error(this.node, compiler_errors.css_invalid_selector(component.source.slice(this.node.start, this.node.end))); + } + if (!block.combinator && block.selectors.length === 0) { + component.error(this.node, compiler_errors.css_invalid_selector(component.source.slice(this.node.start, this.node.end))); + } + } + } get_amount_class_specificity_increased() { let count = 0; diff --git a/test/validator/samples/css-invalid-combinator-selector-1/errors.json b/test/validator/samples/css-invalid-combinator-selector-1/errors.json new file mode 100644 index 00000000000..b50fb678f09 --- /dev/null +++ b/test/validator/samples/css-invalid-combinator-selector-1/errors.json @@ -0,0 +1,9 @@ +[ + { + "code": "css-invalid-selector", + "message": "Invalid selector \"> span\"", + "start": { "line": 10, "column": 1, "character": 88 }, + "end": { "line": 10, "column": 7, "character": 94 }, + "pos": 88 + } +] diff --git a/test/validator/samples/css-invalid-combinator-selector-1/input.svelte b/test/validator/samples/css-invalid-combinator-selector-1/input.svelte new file mode 100644 index 00000000000..614b9d932c5 --- /dev/null +++ b/test/validator/samples/css-invalid-combinator-selector-1/input.svelte @@ -0,0 +1,13 @@ +

+ + diff --git a/test/validator/samples/css-invalid-combinator-selector-2/errors.json b/test/validator/samples/css-invalid-combinator-selector-2/errors.json new file mode 100644 index 00000000000..8c55da03c8c --- /dev/null +++ b/test/validator/samples/css-invalid-combinator-selector-2/errors.json @@ -0,0 +1,9 @@ +[ + { + "code": "css-invalid-selector", + "message": "Invalid selector \"+ p\"", + "start": { "line": 8, "column": 1, "character": 68 }, + "end": { "line": 8, "column": 4, "character": 71 }, + "pos": 68 + } +] diff --git a/test/validator/samples/css-invalid-combinator-selector-2/input.svelte b/test/validator/samples/css-invalid-combinator-selector-2/input.svelte new file mode 100644 index 00000000000..9cc20ce8173 --- /dev/null +++ b/test/validator/samples/css-invalid-combinator-selector-2/input.svelte @@ -0,0 +1,11 @@ +

+

+ + diff --git a/test/validator/samples/css-invalid-combinator-selector-3/errors.json b/test/validator/samples/css-invalid-combinator-selector-3/errors.json new file mode 100644 index 00000000000..869cc09c951 --- /dev/null +++ b/test/validator/samples/css-invalid-combinator-selector-3/errors.json @@ -0,0 +1,9 @@ +[ + { + "code": "css-invalid-selector", + "message": "Invalid selector \"> span\"", + "start": { "line": 5, "column": 2, "character": 44 }, + "end": { "line": 5, "column": 8, "character": 50 }, + "pos": 44 + } +] diff --git a/test/validator/samples/css-invalid-combinator-selector-3/input.svelte b/test/validator/samples/css-invalid-combinator-selector-3/input.svelte new file mode 100644 index 00000000000..fdd48709217 --- /dev/null +++ b/test/validator/samples/css-invalid-combinator-selector-3/input.svelte @@ -0,0 +1,9 @@ +

+ + diff --git a/test/validator/samples/css-invalid-combinator-selector-4/errors.json b/test/validator/samples/css-invalid-combinator-selector-4/errors.json new file mode 100644 index 00000000000..239704f48e4 --- /dev/null +++ b/test/validator/samples/css-invalid-combinator-selector-4/errors.json @@ -0,0 +1,9 @@ +[ + { + "code": "css-invalid-selector", + "message": "Invalid selector \"p >\"", + "start": { "line": 4, "column": 1, "character": 26 }, + "end": { "line": 4, "column": 4, "character": 29 }, + "pos": 26 + } +] diff --git a/test/validator/samples/css-invalid-combinator-selector-4/input.svelte b/test/validator/samples/css-invalid-combinator-selector-4/input.svelte new file mode 100644 index 00000000000..db04318f73f --- /dev/null +++ b/test/validator/samples/css-invalid-combinator-selector-4/input.svelte @@ -0,0 +1,7 @@ +

+ +