Svelte 5: add :global {...} nested selectors

[Rich-Harris]

Describe the problem

Right now the way to write global styles is to wrap each selector in :global(...):

<div>
  <Stuff />
</div>

<style>
  :global(.foo) {
    /* applies to all `.foo` elements on the page */
  }

  :global(.bar) {
    /* applies to all `.bar` elements on the page */
  }

  div :global(.foo) {
    /* applies to all `.foo` elements inside the `<div>` in this component */
  }

  div :global(.bar) {
    /* applies to all `.bar` elements inside the `<div>` in this component */
  }
</style>

Generally, you shouldn't be using pure global selectors much — it's better to put those in a .css file. But it's often useful to have 'scoped global' selectors — it's common to do this sort of thing, for example:

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

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

Describe the proposed solution

It would be much less irksome to use the recently-added CSS nesting support to do this instead:

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

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

Importance

nice to have