sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
80.33k stars 4.28k forks source link

SVG and `:not` interaction cause .svelte-id class to not be applied #14166

Open WaltzingPenguin opened 4 weeks ago

WaltzingPenguin commented 4 weeks ago

Describe the bug

CSS rules with :not are not being applied to elements inside of an SVG.

circle:not(.class-name) { /* Is not applied */ }

As a workaround, adding this to the style block causes things to work as expected:

circle { /* Doesn't even have to contain rules */ }

Reproduction

https://svelte.dev/playground/9c763c4f9c654cff8d427003e30c632f?version=5.1.9

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i5-13600KF
    Memory: 41.13 GB / 63.85 GB
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.11.0 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: ^5.0.5 => 5.0.5

Severity

annoyance

Conduitry commented 4 weeks ago

https://svelte.dev/playground/9c763c4f9c654cff8d427003e30c632f?version=5.1.10 This looks fixed in 5.1.1.0.