Fix/scoped css does not apply to Picture

[andremralves]

Changes

fixes #6574

• Pass class attribute to the <Picture /> component so the scope class is applied.
• I used className as the variable name to prevent any issue with the class keyword.

Compiled HTML

Before

<picture>
   <source type="image/avif" srcset="/_astro/mypicture_ZeFaVg.avif 400w,/_astro/mypicture_1Hh42H.avif 800w,/_astro/mypicture_Z2c6PSF.avif 1200w" sizes="(max-width: 375px) 50vw, 75vw">
   <source type="image/webp" srcset="/_astro/mypicture_1tYFrG.webp 400w,/_astro/mypicture_Z1Dfdnh.webp 800w,/_astro/mypicture_ZkvIfu.webp 1200w" sizes="(max-width: 375px) 50vw, 75vw">
   <source type="image/png" srcset="/_astro/mypicture_FXu5O.png 400w,/_astro/mypicture_Z2rgoJ9.png 800w,/_astro/mypicture_m3iDz.png 1200w" sizes="(max-width: 375px) 50vw, 75vw">
   <img alt="image" src="/_astro/mypicture_m3iDz.png" loading="lazy" decoding="async" class="astro-J7PV25F6">
</picture>

After

<picture class="astro-J7PV25F6">
   <source type="image/avif" srcset="/_astro/mypicture_ZeFaVg.avif 400w,/_astro/mypicture_1Hh42H.avif 800w,/_astro/mypicture_Z2c6PSF.avif 1200w" sizes="(max-width: 375px) 50vw, 75vw">
   <source type="image/webp" srcset="/_astro/mypicture_1tYFrG.webp 400w,/_astro/mypicture_Z1Dfdnh.webp 800w,/_astro/mypicture_ZkvIfu.webp 1200w" sizes="(max-width: 375px) 50vw, 75vw">
   <source type="image/png" srcset="/_astro/mypicture_FXu5O.png 400w,/_astro/mypicture_Z2rgoJ9.png 800w,/_astro/mypicture_m3iDz.png 1200w" sizes="(max-width: 375px) 50vw, 75vw">
   <img alt="image" src="/_astro/mypicture_m3iDz.png" loading="lazy" decoding="async" class="astro-J7PV25F6">
</picture>

Testing

O think it's no necessary because the change is simple.

Docs

No docs necessary.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7455215

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[bluwy]

It was intentional that the class and other attributes are passed to the img only: #5038

[andremralves]

It was intentional that the class and other attributes are passed to the img only: #5038

I read the issue related to this PR and I think it really makes sense. So the issue #6574 shouldn't be considered an issue? I still think that it would be good to support the class attribute for <picture /> given the arguments provided in the issue.

[bluwy]

I think the issue could use .hero > :global(:nth-last-child(-n+2)) > img instead so it's not a big issue. We also document that additional HTML attributes are passed to the img tag. So I think the issue was mislabelled and it shouldn't be fixed.

[bluwy]

EDIT: Made my comment in the wrong place 😅

Let's close this for now as it's expected.