[Bug]: Sveltes {...$$restProps} breaks storybook component when in use with --style-props

[emil-connox]

Describe the bug

My button component uses {...$$restProps} to pass all props to the html button element. When I also use style-props to set som custom css properties, I get an error of Error: String contains an invalid character. I use the addon-svelte-csf to write my stories.

To Reproduce

button component

<button {...$$restProps}>
<slot />
</button>

story

<Template let:args><Button {...args}>Click here</Button></Template>

System

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 21.6.0 - ~/.nvm/versions/node/v21.6.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.0/bin/npm <----- active
  npmPackages:
    @storybook/addon-essentials: ^7.6.10 => 7.6.10 
    @storybook/addon-interactions: ^7.6.10 => 7.6.10 
    @storybook/addon-links: ^7.6.10 => 7.6.10 
    @storybook/addon-svelte-csf: ^4.1.0 => 4.1.0 
    @storybook/blocks: ^7.6.10 => 7.6.10 
    @storybook/svelte: ^7.6.10 => 7.6.10 
    @storybook/sveltekit: ^7.6.10 => 7.6.10 
    @storybook/test: ^7.6.10 => 7.6.10 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.6.10 => 7.6.10

Additional context

No response

[vanessayuenn]

Hi, thanks for reporting this. do you have a reproduction repo you can share? If not, can you please create one via storybook.new? We prioritize bug reports that have reproduction. Thank you! 🙏

[emil-connox]

https://stackblitz.com/~/github.com/emil-connox/storybook-bug-26114 here you go. btw: The Template for "SvelteKit (TypeScript)" at the link you provided doesnt produce a working storybook instance.