diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index 14b6f95a4e..d7e80f5499 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -143,6 +143,19 @@ export default class Selector { }); } } + + for (const block of this.blocks) { + for (const selector of block.selectors) { + if (selector.type === 'PseudoClassSelector' && selector.name === 'global') { + if (/[^\\],/.test(selector.children[0].value)) { + component.error(selector, { + code: 'css-invalid-global-selector', + message: ':global(...) must contain a single selector' + }); + } + } + } + } } get_amount_class_specificity_increased() { diff --git a/test/validator/samples/css-invalid-global-selector/errors.json b/test/validator/samples/css-invalid-global-selector/errors.json new file mode 100644 index 0000000000..2998f09cfa --- /dev/null +++ b/test/validator/samples/css-invalid-global-selector/errors.json @@ -0,0 +1,17 @@ +[ + { + "code": "css-invalid-global-selector", + "message": ":global(...) must contain a single selector", + "start": { + "line": 5, + "column": 5, + "character": 58 + }, + "end": { + "line": 5, + "column": 24, + "character": 77 + }, + "pos": 58 + } +] diff --git a/test/validator/samples/css-invalid-global-selector/input.svelte b/test/validator/samples/css-invalid-global-selector/input.svelte new file mode 100644 index 0000000000..6f92027612 --- /dev/null +++ b/test/validator/samples/css-invalid-global-selector/input.svelte @@ -0,0 +1,12 @@ +<style> + div :global(.h1\,h2\,h3) { + color: red; + } + div :global(h1, h2, h3) { + color: red; + } +</style> + +<div> + <h1>hello world</h1> +</div> \ No newline at end of file