fix: match class and style directives against attribute selector

[7nik]

Closes #16162

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.
• If this PR changes code within packages/svelte/src, add a changeset (npx changeset).

Tests and linting

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

[changeset-bot]

🦋 Changeset detected

Latest commit: cf26945

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

[svelte-docs-bot]

Preview: https://svelte-dev-git-preview-svelte-16179-svelte.vercel.app/

[github-actions]

Playground

pnpm add https://pkg.pr.new/svelte@16179

[24jr]

Whatever you did in this change, all my buttons just turned white

[7nik]

These directives add class/style attribute to the element, so the attribute selectors can match them but, before this fix, could fail in some cases.
If there is a real bug - open a new issue.

[24jr]

I mean just doing this it doesnt show a red background when i add a class="base" even with nothing in it but if I remove class="base" then the red shows. I dont specify background-color at all in .base and i want the conditional class to be prioritized when it its true

<button class="base" class:primary={true}>test</button>

<style>
  .base {
    outline: none;
    border: none;
  }
  .primary {
    background-color: red;
  }
</style>

[mattpilott]

This is breaking sites where class props are defined as undefined
let { mypropclass = undefined } = $props()
<div class:mypropclass></div>

[7nik]

@mattpilott I don't really get what gets broken in your example. Can you test on #16204?

[mattpilott]

@7nik see repro

https://svelte.dev/playground/036df7553c1749639de83484f412c93e?version=5.34.6

[7nik]

That PR fixes this repro.