Local styles aren't scoped when nested

[KTibow]

Describe the bug

Say I have an element in a component that needs to depend on its parent's state. I might write something like this:

<div class="tint"></div>

<style>
  :global(*):hover > .tint {
    opacity: 0.08;
  }
</style>

Now let's say I want to also account for focus. To prevent repetition, I might nest my styles:

<div class="tint"></div>

<style>
  :global(*) {
    &:hover > .tint {
      opacity: 0.08;
    }
    &:focus-visible > .tint {
      opacity: 0.12;
    }
  }
</style>

However, Svelte outputs CSS that works differently across these cases. It works correctly for the first one by applying special scoping classes to .tint, but it doesn't with the second one. (See the CSS output tab of the REPL.)

This means that any .tint that has a hovered parent will get the styling that was only supposed to apply to one component. That's a problem.

Reproduction

https://svelte.dev/playground/fe63a82ba4da46799977fcbca797adfc?version=5.9.0

Logs

No response

System Info

N/A (using the REPL in Firefox 133.0 (64-bit) on Fedora Workstation 40)

Severity

annoyance

[paoloricciuti]

I'm seeing this in the css output

  * {
		&:hover > .tint {
		  opacity: 0.08;
	  }
		&:focus-visible > .tint {
		  opacity: 0.12;
	  }
	}

Which looks correct...what do you see?

[KTibow]

That version doesn't have style scoping, which is the issue. A correct version would look more like this:

* {
  *:hover > .tint.svelte-1pqn6zs {
    opacity: 0.08;
  }
  *:focus-visible > .tint.svelte-1pqn6zs {
    opacity: 0.12;
  }
}

[paoloricciuti]

That version doesn't have style scoping, which is the issue. A correct version would look more like this:

* {
  *:hover > .tint.svelte-1pqn6zs {
    opacity: 0.08;
  }
  *:focus-visible > .tint.svelte-1pqn6zs {
    opacity: 0.12;
  }
}

Mmm i think I know what's going on...I have a PR open that will not fix this issue but I think it's needed before fixing this. I'll take a look later or tomorrow

[ai]

Could be related issue #14713