diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts index b0c836681c..b0ffead6e0 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_global_selector_position: { + code: 'css-invalid-global-selector-position', + message: ':global(...) not at the start of a selector sequence should not contain type or universal selectors' + }, css_invalid_selector: (selector: string) => ({ code: 'css-invalid-selector', message: `Invalid selector "${selector}"` diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index 5feb59ec0c..c0819a233f 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -148,6 +148,7 @@ export default class Selector { } this.validate_global_with_multiple_selectors(component); + this.validate_global_compound_selector(component); this.validate_invalid_combinator_without_selector(component); } @@ -179,6 +180,23 @@ export default class Selector { } } + validate_global_compound_selector(component: Component) { + for (const block of this.blocks) { + for (let index = 0; index < block.selectors.length; index++) { + const selector = block.selectors[index]; + if (selector.type === 'PseudoClassSelector' && + selector.name === 'global' && + index !== 0 && + selector.children && + selector.children.length > 0 && + !/[.:#\s]/.test(selector.children[0].value) + ) { + component.error(selector, compiler_errors.css_invalid_global_selector_position); + } + } + } + } + get_amount_class_specificity_increased() { let count = 0; for (const block of this.blocks) { diff --git a/test/validator/samples/css-invalid-global-placement-4/errors.json b/test/validator/samples/css-invalid-global-placement-4/errors.json new file mode 100644 index 0000000000..216dcea05e --- /dev/null +++ b/test/validator/samples/css-invalid-global-placement-4/errors.json @@ -0,0 +1,12 @@ +[{ + "code": "css-invalid-global-selector-position", + "message": ":global(...) not at the start of a selector sequence should not contain type or universal selectors", + "start": { + "line": 2, + "column": 5 + }, + "end": { + "line": 2, + "column": 17 + } +}] \ No newline at end of file diff --git a/test/validator/samples/css-invalid-global-placement-4/input.svelte b/test/validator/samples/css-invalid-global-placement-4/input.svelte new file mode 100644 index 0000000000..641e91cab0 --- /dev/null +++ b/test/validator/samples/css-invalid-global-placement-4/input.svelte @@ -0,0 +1,5 @@ +