fix: emit error on wrong placement of the `:global` block selector (#15794)

Co-authored-by: 7nik <kifiranet@gmail.com>
pull/15800/head
7nik 5 months ago committed by GitHub
parent 6fe5977b3d
commit d8c6afde94
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: emit error on wrong placement of the `:global` block selector

@ -274,6 +274,12 @@ A `:global` selector cannot modify an existing selector
A `:global` selector can only be modified if it is a descendant of other selectors
```
### css_global_block_invalid_placement
```
A `:global` selector cannot be inside a pseudoclass
```
### css_global_invalid_placement
```

@ -50,6 +50,10 @@ x y {
> A `:global` selector can only be modified if it is a descendant of other selectors
## css_global_block_invalid_placement
> A `:global` selector cannot be inside a pseudoclass
## css_global_invalid_placement
> `:global(...)` can be at the start or end of a selector sequence, but not in the middle

@ -581,6 +581,15 @@ export function css_global_block_invalid_modifier_start(node) {
e(node, 'css_global_block_invalid_modifier_start', `A \`:global\` selector can only be modified if it is a descendant of other selectors\nhttps://svelte.dev/e/css_global_block_invalid_modifier_start`);
}
/**
* A `:global` selector cannot be inside a pseudoclass
* @param {null | number | NodeLike} node
* @returns {never}
*/
export function css_global_block_invalid_placement(node) {
e(node, 'css_global_block_invalid_placement', `A \`:global\` selector cannot be inside a pseudoclass\nhttps://svelte.dev/e/css_global_block_invalid_placement`);
}
/**
* `:global(...)` can be at the start or end of a selector sequence, but not in the middle
* @param {null | number | NodeLike} node

@ -68,8 +68,12 @@ const css_visitors = {
const global = node.children.find(is_global);
if (global) {
const idx = node.children.indexOf(global);
const is_nested = context.path.at(-2)?.type === 'PseudoClassSelector';
if (is_nested && !global.selectors[0].args) {
e.css_global_block_invalid_placement(global.selectors[0]);
}
const idx = node.children.indexOf(global);
if (global.selectors[0].args !== null && idx !== 0 && idx !== node.children.length - 1) {
// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
for (let i = idx + 1; i < node.children.length; i++) {

@ -0,0 +1,9 @@
import { test } from '../../test';
export default test({
error: {
code: 'css_global_block_invalid_placement',
message: 'A `:global` selector cannot be inside a pseudoclass',
position: [28, 35]
}
});

@ -0,0 +1,4 @@
<style>
/* invalid */
:is(:global) { color: red }
</style>
Loading…
Cancel
Save