Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Local styles aren't scoped when nested #14616

Open
KTibow opened this issue Dec 8, 2024 · 4 comments · May be fixed by #15671
Open

Local styles aren't scoped when nested #14616

KTibow opened this issue Dec 8, 2024 · 4 comments · May be fixed by #15671
Labels
bug css Stuff related to Svelte's built-in CSS handling

Comments

@KTibow
Copy link

KTibow commented Dec 8, 2024

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
Copy link
Member

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
Copy link
Author

KTibow commented Dec 8, 2024 •
edited
Loading

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
Copy link
Member

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

@dummdidumm dummdidumm added bug css Stuff related to Svelte's built-in CSS handling labels Dec 10, 2024
@paoloricciuti paoloricciuti mentioned this issue Dec 10, 2024
Merged
6 tasks
@ai
Copy link
Contributor

ai commented Dec 24, 2024

Could be related issue #14713

@7nik 7nik linked a pull request Apr 2, 2025 that will close this issue
Open
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug css Stuff related to Svelte's built-in CSS handling
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: better scope :global() with nesting selector & 7nik/svelte
4 participants
@ai @dummdidumm @KTibow @paoloricciuti