Svelte 5: $props destructing rename property incorrect

[epfn]

Describe the bug

When renaming prop with object destructing for example let {class: className} = $props() this <Component class='red' /> doesn't work but <Component className='red' /> works.

REPL

Reproduction

Component.svelte

<script>
	let {class: className} = $props()
</script>

<button class={className}>
	Button
</button>

<style>
	.red {
		background-color: red;
	}
</style>

Doesn't work

<Component class='red' />

Works

<Component className='red' />

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
    Memory: 23.53 GB / 31.94 GB
  Binaries:
    Node: 20.8.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.9.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (120.0.2210.61)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: 5.0.0-next.22 => 5.0.0-next.22

Severity

annoyance

[braden-w]

Can confirm, all of my usages of class:className suddenly stopped working in the most recent upgrade and props renamed to class are no longer passing through components.

[OllieJT]

My issue is a duplicate, so I'll just add my repl here in case it helps.

REPL: here.

<!-- Parent Component  -->
<script>
    import Component from './Component.svelte'
</script>

<div class="custom-class">I'm an element that IS receiving the class.</div>

<br />

<Component class="custom-class" />

<style>
    :global(.custom-class) {
        background-color: red;
        font-size: 50px;
    }
</style>

<!-- Child Component  -->
<script>
    /* Assigning class to className because class is a reserved word */
    const { class: className } = $props();
</script>

<div class={className}>I'm a component that isn't receiving the class prop</div>
<div class="custom-class">...and just to be sure, I am manually using in the child component</div>