Styles contained in SCSS class passed to <Picture /> component's pictureAttributes.class not being applied

[Lper258]

Astro Info

Astro                    v4.4.8
Node                     v18.17.1
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When passing pictureAttributes prop to Astro's <Picture /> component, the passed class DOES get applied to the generated HTML<picture /> tag, but it seems that the styles are not generate i.e. the class has no styles.

WARNING: Minimal reproducible example on StackBlitz works for me only in Chrome. Sometimes the image in the local src/assets/ directory is loaded, some times it is not, but the reported issue is still visible.

---
import headerImage from "../assets/homepage/header.png";

 headerImageStyles = {
  width: "100%",
  display: "flex",
  justifyContent: "center",
};
---

 <Picture
      src={headerImage}
      alt='Homepage title'
      class='header-picture' // This is applied correctly to the underlying <img /> tag
      formats={["avif", "webp"]}
      loading='eager'
      fallbackFormat='png'
      pictureAttributes={{
        style: headerImageStyles,
        class: "this-class-is-the-problem", // The issue is here
      }}
    />


<style lang="scss">

    .header-picture {
        width: 17rem;
        height: auto;

        margin-bottom: 16rem;
    }

    .header-picture-test {
        background-color: red;
    }
</style>

What's the expected result?

The class gets applied to the generated <picture /> tag, AND it contains the correct styles.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-qrod97

Participation

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

[bluwy]

I think this is expected since the scoped class/attribute is passed to the component directly, so pictureAttributes didn't received the extra scoped class/attribute that would've made it work. Seems like the scoped attribute works for the fallback img by default though. Maybe it's worth making this usecase work, but we'd need to special case some special attributes or classes to pass on to the picture or img.

[matthewp]

I don't think we should do this, this is an issue any time you use a component and attempt to set its classes. The solution, like with markdown, is to use global CSS for that.

[matthewp]

After talking about it, @bluwy thinks he might know of a way to fix this.