diff --git a/.changeset/thirty-pears-hug.md b/.changeset/thirty-pears-hug.md new file mode 100644 index 0000000000..607005631e --- /dev/null +++ b/.changeset/thirty-pears-hug.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: allow type selector in `:global()` when it's at a start of a compound selector diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/Selector.js b/packages/svelte/src/compiler/phases/2-analyze/css/Selector.js index 1236e8883b..3e51034940 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/css/Selector.js +++ b/packages/svelte/src/compiler/phases/2-analyze/css/Selector.js @@ -181,9 +181,19 @@ export default class Selector { for (let i = 0; i < block.selectors.length; i++) { const selector = block.selectors[i]; + if (selector.type === 'PseudoClassSelector' && selector.name === 'global') { const child = selector.args?.children[0].children[0]; - if (child?.type === 'TypeSelector' && !/[.:#]/.test(child.name[0])) { + if ( + child?.type === 'TypeSelector' && + !/[.:#]/.test(child.name[0]) && + (i !== 0 || + block.selectors + .slice(1) + .some( + (s) => s.type !== 'PseudoElementSelector' && s.type !== 'PseudoClassSelector' + )) + ) { error(selector, 'invalid-css-global-selector-list'); } } diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json index 53e24d8d81..1d359c01b3 100644 --- a/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json +++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json @@ -3,11 +3,11 @@ "code": "invalid-css-global-placement", "message": ":global(...) can be at the start or end of a selector sequence, but not in the middle", "start": { - "line": 5, + "line": 8, "column": 6 }, "end": { - "line": 5, + "line": 8, "column": 19 } } diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/input.svelte b/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/input.svelte index 2c8e96a484..96f480f13a 100644 --- a/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/input.svelte +++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/input.svelte @@ -2,6 +2,9 @@ .foo :global(.bar):first-child { color: red; } + .foo :global(p):first-child { + color: red; + } .foo :global(.bar):first-child .baz { color: red; } diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/errors.json new file mode 100644 index 0000000000..2b03fa8c2b --- /dev/null +++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/errors.json @@ -0,0 +1,14 @@ +[ + { + "code": "invalid-css-global-selector-list", + "message": ":global(...) must not contain type or universal selectors when used in a compound selector", + "start": { + "line": 5, + "column": 5 + }, + "end": { + "line": 5, + "column": 17 + } + } +] diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/input.svelte b/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/input.svelte new file mode 100644 index 0000000000..ed05bb2d7c --- /dev/null +++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/input.svelte @@ -0,0 +1,8 @@ +