Nested css breaks when using pseudo-elements

[thomas-daughters]

Describe the bug

When using scoped styles in Svelte, placeholder pseudo-elements like ::placeholder are compiled to selectors such as:

input:where(.s-abc123)::placeholder

This pattern fails to apply in Safari (tested in Safari 16.6 and 17.0 on macOS and iOS). The issue appears to be that Safari does not recognise ::placeholder correctly when it is placed after a :where(...) pseudo-class, especially if that pseudo-class holds the scoped class.

Looks OK in Chrome, interestingly.

Reproduction

Given the following scoped Svelte style:

<input type="text" placeholder="Search..." />

<style>
	input {
		&::placeholder {
			color: gray;
		}
	}
</style>

Svelte compiles it to:

input:where(.s-xyz)::placeholder {
	color: gray;
}

Logs

System Info

System:
    OS: macOS 15.3.2
    CPU: (8) arm64 Apple M2
    Memory: 126.42 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
  Browsers:
    Safari: 18.3.1

Severity

annoyance