feat: implement :global {...} CSS blocks

[Rich-Harris]

closes #10815.

This makes it possible to define global (or child global) styles in a block. Instead of this...

<div class="post">
  {@html post.content}
</div>

<style>
  .post :global(p) {...}
  .post :global(ul) {...}
  .post :global(li) {...}
  .post :global(code) {...}
</style>

...you can now write this:

<div class="post">
  {@html post.content}
</div>

<style>
  .post :global {
    p {...}
    ul {...}
    li {...}
    code {...}
  }
</style>

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
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: 7598ce7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Conduitry]

I'm guessing this does not provide a replacement for the other way - :global(.foo) .bar - and that we'll be keeping the :global() syntax around for the foreseeable future to support that case?

[Rich-Harris]

Yeah, it'd be confusing/ambiguous if :global {...} did double-duty, so we'll need both