Skip to content

CSS specificity with imported components vs local ones #7991

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.

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

Closed
rob-balfre opened this issue Nov 1, 2022 · 3 comments
Closed

CSS specificity with imported components vs local ones #7991

rob-balfre opened this issue Nov 1, 2022 · 3 comments
Labels
bug css Stuff related to Svelte's built-in CSS handling

Comments

@rob-balfre
Copy link
Contributor

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

rob-balfre commented Nov 2, 2022

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

@subpx
Copy link

subpx commented Dec 7, 2022

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug css Stuff related to Svelte's built-in CSS handling
Projects
None yet
Development

No branches or pull requests

4 participants