When combining child property spread w/ parent <style> tag, the child's styles disappear

[crutchcorn]

What version of astro are you using?

1.6.10

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

When using a component that utilizes a spread operator to apply all styles:

---
const props = Astro.props as astroHTML.JSX.ButtonHTMLAttributes;
---

<style>
    .styled-button {
        all: unset;
        background: black;
        color: white;
    }
</style>
<button {...props} class="styled-button">Styled Button here</button>

And then apply a parent <style> tag:

---
import StyledButton from "./StyledButton.astro";
---

<div>
  <h1 class="h1">H1 here</h1>
  <StyledButton />
</div>
<style>
  .h1 {
    background: black;
    color: white;
    font-weight: bold;
  }
</style>

The styling of the child component (StyledButton) is disabled entirely. If you remove either the parent's style tag or the {...props} spread, this issue goes away.

Link to Minimal Reproducible Example

https://github.com/crutchcorn/astro-props-spread-style-bug

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

I think the issue here is that we are passing the scoped style class to the child component. Not sure why the spread is being prioritized over the explicit class though.

[dev-nicolaos]

Ran into this as well (Astro v1.6.11). Another interesting aspect of this (and possible workaround): if the class attribute declaration comes before the props are spread, the component's styles are applied....

<button class="styled-button" {...props}>Styled Button here</button>

[JerryWu1234]

mark

[JerryWu1234]

I think this bug was from the compiler.

the spreadAttributes function hasn't merged the class name

[JerryWu1234]

related to #656
There are two classes in the button dom; the default choice was the first.
So the button dom style doesn't work

[bluwy]

Thanks for investigating this @wulinsheng123. Transferring this over to the compiler repo so it can be tracked there.

[natemoo-re]

Finally circling back to this. I think we should probably pass all props as an object when there's a spread prop, to ensure that duplicate attributes are not generated.

[MoustaphaDev]

Do you still plan to work on this @bluwy ?

[bluwy]

Not for the foreseeable future yet. I actually didn't know I was assigned to this either 😅 I'll remove my assignment for now so feel free to take this if you like. But it's something I can also revisit in the future.