withastro
🐛 BUG: Multiple property spreads with class don't work properly with scoped CSS
What version of astro are you using?
1.0.0-rc.7
Are you using an SSR adapter? If so, which one?
None
What package manager are you using?
npm
What operating system are you using?
Linux
Describe the Bug
There is a problem with multiple property spreads like <div {...props1} {...props2} />. If the element is locally styled and the second props object contains a class entry then the class is not applied.
Reversing the order of props spreading works: <div {...props2} {...props1} /> produces the correct result.
Link to Minimal Reproducible Example
https://stackblitz.com/edit/astro-multi-spread-props-problem
Participation
- [ ] I am willing to submit a pull request for this issue.
Thanks for opening an issue!
We are doing some compiler magic behind the scenes to make scoped classes work with spread attributes, but I don't think we considered multiple spreads. It's totally valid, we just haven't implemented it yet.
As a workaround, you can always explicitly pass class since you know where it's coming from.
Issue still exists: https://stackblitz.com/edit/astro-multi-spread-props-problem-jmpcga?file=src%2Fpages%2Findex.astro. probably a small thing to fix
This happens because these two spreads end up injecting two class attributes. The second class attribute is removed by the browser to correct the markup. I'll take a look
