Can anybody tell me why this CSS is invalid in Svelte 5 (next 166) but perfect in Svelte 4?

[webJose]

Hello, everyone. I have a component library project that I want to upgrade to Svelte v5. I am getting the following error: Nesting selectors can only be used inside a rule when building it (without touching any source code whatsoever, just installing Svelte 5, then npm run build). Because the error during build provides zero indication as to the file that contains the problem, I opened issue #12208 to improve on the error message.

So, in order to advance, I figured: "Maybe if I run the project uncompiled and browse to the different pages in the demo, the error will come up and I'll have an indication as to where the problem is". I was right on the money, and this is what shows up while hitting the culprit page:

However, I don't understand. To me, this is perfectly good CSS. This is the complete style tag in that Svelte file:

<style lang="scss">
    div.cb-grid {
        display: grid;
        grid-template-columns: auto auto auto auto;
        row-gap: 1em;
        column-gap: 0;

        :global(&) > :global(*) {
            width: 100%;
        }
    }

    div.layout-grid {
        display: grid;
        grid-template-columns: auto auto auto auto;
        row-gap: 1em;
        column-gap: 2em;

        & > .full-row {
            grid-column-start: 1;
            grid-column-end: 5;
        }
    }
</style>

Can anybody spot the problem? To me, this looks just fine and Svelte v4 agrees with me. What is it about this that Svelte v5 doesn't like?

[webJose]

Changing :global(&) > :global(*) { to :global(div.cb-grid) > :global(*) { fixes the problem. Is this a bug?

[webJose]

I don't know. My expectation was for that to become what I typed. Is it incorrect? Is :global(&) not transformed to the fix, :global(div.cb-grid)? I'm a back-end dev so my knowledge on front-end is comparatively limited.

[7nik]

:global() accepts a selector that shouldn't be scoped while passing a bare & points to nothing, though it is still a valid selector.

The error seems to be #10540

[webJose]

while passing a bare & points to nothing

This part I don't understand. In SASS, & is the parent selector, isn't it? In my code, & === div.cb-grid. Is it not?

[7nik]

Technically, it's closer to the selector combinators (space), >, +, and ~. It just compiles to that.
Also, it would be weird to compile

div.cb-grid {
  ...
  :global(&) > :global(*) {}
}

to

div.cb-grid.svelte-hash {} /* scoped parent */
div.cb-grid > * {} /* non-scoped parent */