withastro
When combining child property spread w/ parent `<style>` tag, the child's styles disappear
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
- [X] I am willing to submit a pull request for this issue.
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.
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>
I think this bug was from the compiler.
the spreadAttributes function hasn't merged the class name
related to https://github.com/withastro/compiler/issues/656 There are two classes in the button dom; the default choice was the first. So the button dom style doesn't work
Thanks for investigating this @wulinsheng123. Transferring this over to the compiler repo so it can be tracked there.
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.
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.