CSS specificity with imported components vs local ones

[rob-balfre]

Describe the bug

CSS specificity rules seems to be different for imported components vs local ones. For example the generated styles for imported component svelte-select has the same class selector repeated 3 times...

.svelte-select.svelte-15ynnp5.svelte-15ynnp5.svelte-15ynnp5 which wins the CSS specificity race vs the generated :global(...) css section.svelte-6ogvl1 .svelte-select

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#increasing_specificity_by_duplicating_selector

Reproduction

https://svelte.dev/repl/753f97bc774c4488b4aa2c70fde73ee3?version=3.52.0

Logs

N/A

System Info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 157.03 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.10.0 - ~/.nvm/versions/node/v18.10.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.10.0/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Firefox: 104.0.2
    Firefox Nightly: 106.0a1
    Safari: 16.0
    Safari Technology Preview: 16.0

Severity

blocking an upgrade

[rob-balfre]

FYI only seems to happen in dev mode, running build in kit for example fixes the issue.

[subpx]

Yes just noticed this. Have a lot of duplicate class names now being rendered. In one case this is causing the browser to crash.

[Rich-Harris]

This is fixed in Svelte 5, via #10443, so I'll close this