vitePreprocess transforms things in Svelte-5-incompatible ways

[Rich-Harris]

Describe the bug

Not exactly sure where to report this but this feels like as good a place as any — vitePreprocess takes input like this...

<div class="warn">a</div>
<div class="warn">b</div>
<div class="error">c</div>

<style>
  .warn,
  .error {
    border-style: solid none;

    & + :global(&) {
      border-top: none;
    }
  }
</style>

...and transforms it in such a way that I get this error:

Nesting selectors can only be used inside a rule

Similarly, this...

<div class="container"></div>

<style>
  .container :global {
    .foo {
      color: red;
    }
  }
</style>

yields this error:

:global(...) can be at the start or end of a selector sequence, but not in the middle

Guessing it's something to do with PostCSS? Only workaround seems to be to disable vitePreprocess.

Reproduction URL

eek

Reproduction

Maddeningly, I can't reproduce it outside my project, but will keep trying

Logs

No response

System Info

next

[dominikg]

we could investigate switching to lightningcss by default.

does it happen with sveltePreprocess too?

[dominikg]

and/or is there a config for postcss that tells it to leave nesting alone?

[bluwy]

I'm able to reproduce this only using lightningcss. Are you sure you're not using lightningcss?

With lightningcss installed and this vite config:

    css: {
        transformer: 'lightningcss',
    }

I'm able to reproduce the same error message of your two examples. From what I can tell, lightningcss is having trouble parsing it. (Either that, or postcss is parsing it in a non-standard way)