storybookjs/storybook

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

Open

#26,114 opened on Feb 20, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
bughelp wantedsev:S3svelte

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

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

Contributor guide