unexpected style when I use `:where` in global CSS

[saadeghi]

Describe the bug When I add a PostCSS preprocessor to svletekit, below CSS code doesn't work anymore:

<style global>
.btn:where(.btn-primary,.btn-secondary){
  background-color: green;
}
</style>

To Reproduce

1. Clone this: https://github.com/saadeghi/svelte-preprocess-postcss-bug
2. npm install
3. npm run dev
4. now uncomment line 5 on svelte.config.js to disable the preprocess and npm run dev again to see expected style

Expected behavior

Expected CSS:

.btn:where(.btn-primary,.btn-secondary){
  background-color: green;
}

generated CSS:

.btn:where(.btn-primary),:global(.btn-secondary){
  background-color:green
}

Information about your project: https://github.com/saadeghi/svelte-preprocess-postcss-bug

[kissge]

+1.

This actually causes problems more often than one might think since popular packages like the-new-css-reset use :where.

Minimal repro for such cases is:

<style lang="sass" global>
  @use 'the-new-css-reset/css/reset'
</style>

[ivanhofer]

The bug is located in this function: https://github.com/sveltejs/svelte-preprocess/blob/main/src/modules/globalifySelector.ts#L11

The Regex does not account for more modern :where, :not and :ìs selectors