Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Sibling Combinator combined with :has can be improperly marked as unused #14072

Open
craig-jennings opened this issue Oct 31, 2024 · 2 comments · Fixed by #14213 · May be fixed by #15207 or #15277
Open

Sibling Combinator combined with :has can be improperly marked as unused #14072

craig-jennings opened this issue Oct 31, 2024 · 2 comments · Fixed by #14213 · May be fixed by #15207 or #15277
Assignees
@dummdidumm
Labels
css Stuff related to Svelte's built-in CSS handling

Comments

@craig-jennings
Copy link
Contributor

Describe the bug

I've got some complex sibling combinator + :has css selectors that match the DOM but are reported as unused by Svelte. Through further testing, it appears that some trivial cases are incorrectly marked as unused.

Reproduction

  1. Open ./packages/svelte/tests/css/samples/has/input.svelte
  2. Add the following code to the bottom of the style block
x:has(+ c) {
  color: green;
}

x:has(~ c) {
  color: green;
}

Notice that these are valid selectors based on the given DOM structure

  1. Run the test. It now fails with 2 css_unused_selector errors. I've found that wrapping c in :global() seems to get rid of the errors, but I'm not sure if that should be required to get this selector working.

Logs

No response

System Info

Svelte Version - 5.1.6

Severity

annoyance
@dummdidumm dummdidumm added the css Stuff related to Svelte's built-in CSS handling label Nov 2, 2024
@dummdidumm dummdidumm self-assigned this Nov 2, 2024
@thebjorn
Copy link

thebjorn commented Nov 4, 2024

Here is a REPL for a common use case:

<div class="form-field">
	<label for="a">label</label>
	<input id="a" type="text" required>
</div>

<style>
	label:has(+ [required])::after {
		content: '*';
	}
</style>

dummdidumm added a commit that referenced this issue Nov 7, 2024
@dummdidumm
fix: handle sibling combinators within :has
9210016 
We didn't collect sibling elements of a given element to then check the `:has` selectors. This adds the logic for that. Fixes #14072
@dummdidumm dummdidumm mentioned this issue Nov 7, 2024
Merged
5 tasks
@johannesmutter
Copy link

@dummdidumm Could we please reopen?

Sibling :has() selectors are still reported as unused and rules don't apply (unless wrapped in :global(). Please see below basic example:

<section class="list">
	<div class="list-item">should be red</div>
	<div class="list-item"><h2>heading</h2></div>
	<div class="list-item">...</div>
</section>
/* reported as unused */
.list-item:has( + .list-item h2) {
    background: red ;
}
/* works only with global */
:global(.list-item:has( + .list-item h2)) {
    background: red ;
}

Tested in: Svelte Version: [email protected]

REPL

(I upgraded from 5.0.0-next.260 to [email protected], in 260 this was not an issue)

@dummdidumm dummdidumm reopened this Nov 24, 2024
@7nik 7nik linked a pull request Feb 4, 2025 that will close this issue
Open
6 tasks
@7nik 7nik linked a pull request Feb 12, 2025 that will close this issue
Open
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@dummdidumm dummdidumm

Labels
css Stuff related to Svelte's built-in CSS handling
Projects
None yet
Milestone
No milestone
4 participants
@thebjorn @craig-jennings @dummdidumm @johannesmutter