scope css sibling combinator

[tanhauhau]

Implement css scoping for ~ and + css sibling combinator

Fixes #3104

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with npm test and lint the project with npm run lint

[Conduitry]

What are the new NodeExist.Definitely and NodeExist.Probably values for? When are we saying something 'probably' matches, and what do we do in that situation?

[tanhauhau]

ok the gist of what I'm trying to do here is that, for example:

<div id="a" />
<div id="b" />

{#each foo}
   <div id="c" />
{/each}

<div id="d" />

#d tries to find it's siblings iteratively through element.prev.
in this case, it gets {#each} block and it has #c, which probably exist (NodeExist.Probably), because it's in an each block.
so i continue search it's sibling iteratively, and the next element is #b. #b definitely exists. (NodeExist.Definitely)
so i stop the search.

so both #b + #d and #c + #d will be marked as match, but not #a + #d

however, for another example:

<div id="a" />

{#each foo}
   <div id="b" />
{:else}
   <div id="c" />
{/each}

<div id="d" />

#d tries to find it's siblings.
in this case, {#each} block contains either #b or #c. but they definitely exists, one or the other.
so i stop the search.

so both #b + #d and #c + #d will be marked as match, but not #a + #d

[tanhauhau]

i've tried to come up with test cases with different nested logic blocks:

{#each foo}
   {#if bar}
       <div id="a"/>
   {/if}
{:else}
   <div id="b" />
{/if}

here #a and #b is probably exist.

hopefully im able to cover all of the edge cases 😅

[non25]

@tanhauhau Hi, this PR broke selectors like this one:

:global(*) + .button.margin {
  margin-top: 8px;
}

They are getting stripped despite global. I used them in Button, Input and Checkbox components.
Can you fix it?

Repro:

https://svelte.dev/repl/5ec4d420b4b44ea4b441da24010d8acd?version=3.26.0
https://svelte.dev/repl/5ec4d420b4b44ea4b441da24010d8acd?version=3.29.4