diff options
| -rw-r--r-- | .changeset/ten-needles-rescue.md | 5 | ||||
| -rw-r--r-- | packages/astro/components/Picture.astro | 15 | ||||
| -rw-r--r-- | packages/astro/test/core-image.test.js | 13 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/core-image/src/pages/picturecomponent.astro | 15 |
4 files changed, 48 insertions, 0 deletions
diff --git a/.changeset/ten-needles-rescue.md b/.changeset/ten-needles-rescue.md new file mode 100644 index 000000000..e4211b3a0 --- /dev/null +++ b/.changeset/ten-needles-rescue.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Passes the scoped style attribute or class to the `<picture>` element in the `<Picture />` component so scoped styling can be applied to the `<picture>` element diff --git a/packages/astro/components/Picture.astro b/packages/astro/components/Picture.astro index 3984a53e9..15d07de4d 100644 --- a/packages/astro/components/Picture.astro +++ b/packages/astro/components/Picture.astro @@ -27,6 +27,21 @@ if (props.alt === undefined || props.alt === null) { throw new AstroError(AstroErrorData.ImageMissingAlt); } +// Picture attribute inherit scoped styles from class and attributes +const scopedStyleClass = props.class?.match(/\bastro-\w{8}\b/)?.[0] +if (scopedStyleClass) { + if (pictureAttributes.class) { + pictureAttributes.class = `${pictureAttributes.class} ${scopedStyleClass}`; + } else { + pictureAttributes.class = scopedStyleClass; + } +} +for (const key in props) { + if (key.startsWith('data-astro-cid')) { + pictureAttributes[key] = props[key]; + } +} + const originalSrc = await resolveSrc(props.src); const optimizedImages: GetImageResult[] = await Promise.all( formats.map( diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index 3f53fba96..539688725 100644 --- a/packages/astro/test/core-image.test.js +++ b/packages/astro/test/core-image.test.js @@ -246,6 +246,19 @@ describe('astro:image', () => { ); }); + it('Picture component scope styles work', async () => { + let res = await fixture.fetch('/picturecomponent'); + let html = await res.text(); + $ = cheerio.load(html); + + // Should have scoped attribute + let $picture = $('#picture-attributes picture'); + assert.ok(Object.keys($picture.attr()).find((a) => a.startsWith('data-astro-cid-'))); + + let $img = $('#picture-attributes img'); + assert.ok(Object.keys($img.attr()).find((a) => a.startsWith('data-astro-cid-'))); + }); + it('properly deduplicate srcset images', async () => { let res = await fixture.fetch('/srcset'); let html = await res.text(); diff --git a/packages/astro/test/fixtures/core-image/src/pages/picturecomponent.astro b/packages/astro/test/fixtures/core-image/src/pages/picturecomponent.astro index 2fcf4e06c..ddb7108f1 100644 --- a/packages/astro/test/fixtures/core-image/src/pages/picturecomponent.astro +++ b/packages/astro/test/fixtures/core-image/src/pages/picturecomponent.astro @@ -14,3 +14,18 @@ import myImage from "../assets/penguin1.jpg"; <div id="picture-fallback"> <Picture src={myImage} fallbackFormat="jpeg" alt="A penguin" /> </div> + +<div id="picture-attributes"> + <Picture src={myImage} fallbackFormat="jpeg" alt="A penguin" class="img-comp" pictureAttributes={{ class: 'picture-comp' }} /> +</div> + +<style> + .img-comp { + border: 5px solid blue; + } + + .picture-comp { + border: 5px solid red; + display: inline-block; + } +</style> |