fix: don't consider used rules with atrules in the block

[paoloricciuti]

Svelte 5 rewrite

Closes #13390

I spend quite a bit of time to try to fix this just to realise that there's no reason a nested AtRule should mark the wrapping rule as used.

.foo {
  display: grid;
  @media (orientation: landscape) {
    grid-auto-flow: column;
  }
}

this is equivalent to

.foo {
  display: grid;
}

@media (orientation: landscape) {
  .foo {
    grid-auto-flow: column;
  }
}

but if foo is unused it will still be unused inside the media query.

Please note that the Svelte codebase is currently being rewritten for Svelte 5. Changes should target Svelte 5, which lives on the default branch (main).

If your PR concerns Svelte 4 (including updates to svelte.dev.docs), please ensure the base branch is svelte-4 and not main.

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: 4776e71

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dummdidumm]

This will wrongfully mark things within media queries as unused - will fix this. Otherwise this PR makes sense.

[paoloricciuti]

This will wrongfully mark things within media queries as unused - will fix this. Otherwise this PR makes sense.

Isn't this just looking at the children of the rules?

[paoloricciuti]

Like if i only have a media query it still mark it as used.

And if i have something like this

.foo {
  display: grid;
  @media (min-width: 60px) {
    grid-auto-flow: column;
    
    .bar{
      color: red;
    }
  }
}

if .foo is unused .bar will be unused too because it still needs to be inside foo

[dummdidumm]

Yeah I confused myself there ... now I'm thinking why this child loop is even there. If every selector is unused, how would it even be possible for a child to be used?

[paoloricciuti]

thinking

Yeah i think you are right...it's checking if some rule is used but if there's no foo each foo > * can't be used anyway.

[paoloricciuti]

Should this be child.block !== null? How does a media query with a null block looks like?

[dummdidumm]

an AtRule can also be something like @import ... which has no child block, which means something is happening within the rule

[dummdidumm]

The simplification has to be correct. It's shown by the fact that this bug was produced previously: There's pruning logic in a different place where all unused selectors are commented out. If all selectors are unused, the whole prelude is commented out, resulting in invalid syntax. This is a case that can't happen.