False positive for "Unused CSS selector"

[jpaquim]

Describe the bug

After the upgrade to the stable v5 I'm now getting a few of these false positives, which seem related to the use of the :has() pseudo-class in CSS rules, possibly in conjunction with the shorthand class (.copied in this repro's case).

Reproduction

https://svelte-omnisite.vercel.app/playground/hello-world?version=5.0.5#H4sIAAAAAAAAE41V224jNwz9FWa2i9iox7FRBC1mHRfFtm99KtKnusDKEscmohEVifKlrv-90FxsdxMUfbAxosijw3OomVNRk8VYVH-cCjl6LKo2UEwKp5q8-sn7adyhlRxbq4jvxTU7QSexqIpF1IG8gFVu87QqJK6K5coBaHZRgJP4JPAEX37lgA2Qj6kBw5YDRBJQDcqkzUUtKCmAMuQpanIbQEsygYgGDANSig0bEGw8ByCnyZBJTiDlw9ccEFA6aIRGbZwCZek1qSn8LoCOGlAGGsoPO3Skmgm8JorgOEpIBvCAQZMoIXaQrFWN5g45J1GkfFILSR7wAKhAc9Ow4a6B16RkCj9nSJUEgUIK2PdKDgL6gFt0BgNJDuzYJi9KEHa5U8AYETRZOyiEgAnqtCEl4DIh8CqQkhSm8MtBoxdMWUYnwFor1EpAJ09GSa5gBz4wGXRZxawUOdDJepX7Bq5r0qTAYMSQdxu2mYbKApEBjL2uqZl--ZQttSgg1CC3jn4TM_fRGFSE37J17vnocZGHimuIKM9d6hL-btl_uk6FZk9oMkYWY4dmdHfXA4_btDo53dqg2R9HYzjlIIC2qEIPO-oL7roKAKd2tFHCYaot-TWrYKb7QILPeJBRN4hD7rWLK8_RaAxPSxhd9zLr8QS-n826uvPKLR66cV-u3MotfMDlqUM-L9ZJJDO2Ksaq7zCL8bQquq1VAey0Jf3ydMp9nSG7WVq1Rvu0Kj6zP66K5eKhy14uHjL8yi2iV2556hF_hPvP7dPdPVRw_znDgTDk6vvz4qFNbslFOVpsr6IPOCjYkCv3ZGRbwXyGTS9How5D9PEa5R2G2vK-PFYQdeDewpweNuQqmPVrr4wht6lgfqld86GMW2V4X8GjP7S_-cwf4Dt_gA9a6z5vvyXBMnqlsco8y31QfoDlSHkIKgholdAOBxeGppbQi376ukKtI9skOPjN_ko30GYr1-WaRbi5ri3WN7u9LORISNlLSTAYqnzFhhPWSr9sAidnSp3vbgUfZrPZgCJBuY5aaVJQHcfZdB7f7vvAHoMcqzeQkzZiAvuyJisY3hYLNeQ25XB9KkAVsSTXZ-oUYqbmmdxQ_46c1TZbP_k6PO1H8PRfHf9wo8cN1QrWNoXR3B_G_5c1J7klmAd7ONpQ9FZliSzrlzfj8p7589nHf_n7eFm3RGoOTdU92vxWKx9nHyeQ_we-Q491XfeRmp2Ukf7C28Fvg3vsRmzN1gyXyStN2dXLpek8KHGXP6Q3s3Q1pPMBvm17n1yCKo56K8b93qDL5ZD5zfuqfw0Uk0LwIEUlIeH5z_M_1kgWcgkIAAA=

Logs

No response

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M2
    Memory: 109.33 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.local/share/pnpm/node
    npm: 10.8.2 - ~/.local/share/pnpm/npm
    pnpm: 9.12.2 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 129.0.6668.101
    Safari: 18.0.1
  npmPackages:
    svelte: ^5.0.5 => 5.0.5

Severity

annoyance

[fcrozatier]

Here's a minimal version with the same problem. The CSS selectors are valid and shouldn't be considered unused

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE32OwQqDMBBEfyXsqbWW3EMq9DuaHjSuGBqTYFapiP9eVqHQSy_Lzuy8ZVbonMcM6rFCqAcEBfeUoARaEos8oyeEEnKcRsuO9nWDvjLBkHYhTSQ4ejNge7SvJr4NCHmcc6pD1Tst98UELb9s0JkWj3tuN1Vf55Pqop3ydXbZNR7PgjmxcsaQjT6OasSW5cYvDMmC597iFxWX_ywVkuscHaCEIbauc9iConHC7bl9AAR1ZH0YAQAA

[Conduitry]

These feel like two related although potentially distinct issues that we need to make sure are both addressed. One is about class:foo directives, and the other is about pseudoclasses.

[brunnerh]

Seems broken for regular element selectors as well (label:has(input) span).

[vnphanquang]

Found the same issue, I reported in #13717 as well - might be helpful as Simon was working on a fix for a relevant one yesterday.

TLDR current test cases for :has as of 5.0.5 has not covered this particular one yet:

Input:

<x>
  <y></y>
  <w></w>
</x>

<style>
  x:has(y) w {
    color: green;
  }
</style>

Expected:

  x.svelte-xyz:has(y:where(.svelte-xyz)) w:where(.svelte-xyz) {
    color: green;
  }

[enyo]

Just came here to say that this issue appeared in 5.0.0-next.265.

This is my minimal reproduction: https://svelte.dev/playground/23060df7688c4bb1be84023e56f00996?version=5.0.5

[aryanisml]

I have raised the PR to fix the issue in internal compiler code. I hope some one will review the PR and will provide approval for go ahead.

[7nik]

I have this problem in selector like :global(.parent):has(.component) which points to an external element but also refers to a component's one. Example version 5.16.1 Or should I open a new issue?