Svelte scoped global styles do not work

[Loizzus]

Describe the bug

As discussed in this closed feature request, the newly introduced scoped global styles do not work in most cases because of CSS specificity.

Because of CSS specificity if an element has more classes than another then it takes precedence when being rendered. So if in one of my +page.svelte files I want to edit an element to make it work perfectly for that page I will usually add a class to it (in most of my pages I have special cases that need custom styles).

However as you can see my custom styles are being ignored in favour of the global styles from my +layout.svelte file.

I did try using ID's instead of classes to select the element and that does work in some cases, but would not work if I wanted to select the same class name that is called in the +layout.svelte file (without creating a second selector for every element).

Also generally ID's are for javascript and classes for CSS, I have not used them in my design work for a long long time. It would also require an substantial amount of work to change all classes to ID's.

Reproduction

Download this repository: https://github.com/Loizzus/SvelteScopedGlobalStylesIssue
npm i
npm run dev

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 3600XT 6-Core Processor
    Memory: 14.93 GB / 31.91 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.80)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: ^5.0.0 => 5.10.1

Severity

annoyance

[Rich-Harris]

This is just how CSS works. A selector like div p will always override one that's just p

[Loizzus]

Hi @Rich-Harris, big fan 🥳

I agree that is how CSS works, orginally I opened a feature request for this, not an issue. The suggested solution is what has this issue.

How I think this feature could work would be if Svelte handled it in the background in a similar way to how it currently appends a .myclass.randomId to each class. If it could do that for all the CSS that it grabs from the +layout.svelte files above it then the experience would be seamless.

Since global is currently for the whole project perhaps a different name would work like:

:globalScoped{
    .main {
	    display: flex;
	    color: red;
    }
    p {
	    color: green;
    }
}