🐛 BUG: Multiple property spreads with class don't work properly with scoped CSS

[rafal-majewski]

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.

[natemoo-re]

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.

[matthewp]

Issue still exists: https://stackblitz.com/edit/astro-multi-spread-props-problem-jmpcga?file=src%2Fpages%2Findex.astro. probably a small thing to fix

[MoustaphaDev]

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