Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reactivity with CSS Variables does not work when spreading restProps #8438

Closed
canastro opened this issue Mar 31, 2023 · 3 comments · Fixed by #8505
Closed

Reactivity with CSS Variables does not work when spreading restProps #8438

canastro opened this issue Mar 31, 2023 · 3 comments · Fixed by #8505

Comments

@canastro
Copy link

canastro commented Mar 31, 2023

Describe the bug

Given a component that creates a inline CSS variable from a given prop (and spreads the $$restProps)
When the prop changes
Expected the CSS variable is updated
Actual the CSS variable does not update

The key here is "and spreads the $$restProps", if you remove this line, the issue does not occur anymore (see REPL)

I can't really be sure if this is the only particular case where this happens, but this is the scenario in which I'm able to replicate.

Reproduction

I created this simple REPL to reproduce the issue:
https://svelte.dev/repl/906ddb7ef8f3436095ca0e401e0fe8b9?version=3.58.0

The toggle button should change the backgroundColor provided to the Box component. The Box component should create a CSS variable --bg-color and the background of the div should change.

In the current state of the REPL this does not work, but if you delete {...$$restProps} in the Box.svelte everything works as expected.

Logs

No response

System Info

System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 138.67 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/Library/pnpm/node
    npm: 8.15.0 - ~/Library/pnpm/npm
  Browsers:
    Chrome: 111.0.5563.146
    Edge: 111.0.1661.54
    Firefox: 108.0.1
    Safari: 16.3

Severity

annoyance

Not sure what to put here, in our case is blocking the way we implemented some features.

@KutayGuler
Copy link

Hi, I'm not sure what your end goal is but here is a possible fix:

https://svelte.dev/repl/46c7e6dd457d44f8a1a9086ba88ebc22?version=3.58.0

@canastro
Copy link
Author

canastro commented Apr 3, 2023

Yeah, but we actually want these to be passed as component props to be sure they are typed accordingly to our token types and to have a clear and concise API of what our component supports as customization.

@Conduitry
Copy link
Member

This has been fixed in 3.59.0 - https://svelte.dev/repl/906ddb7ef8f3436095ca0e401e0fe8b9?version=3.59.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants