Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.
Releases
[email protected]
Patch Changes
#13703
659904bThanks @ascorbic! - Fixes a bug where empty fallbacks could not be provided when using the experimental fonts API#13680
18e1b97Thanks @florian-lefebvre! - Improves theUnsupportedExternalRedirecterror message to include more details such as the concerned destination#13703
659904bThanks @ascorbic! - Simplifies styles for experimental responsive imagesThe generated styles for image layouts are now simpler and easier to override. Previously the responsive image component used CSS to set the size and aspect ratio of the images, but this is no longer needed. Now the styles just include
object-fitandobject-positionfor all images, and setsmax-width: 100%for constrained images andwidth: 100%for full-width images.This is an implementation change only, and most users will see no change. However, it may affect any custom styles you have added to your responsive images. Please check your rendered images to determine whether any change to your CSS is needed.
The styles now use the
:where()pseudo-class, which has a specificity of 0, meaning that it is easy to override with your own styles. You can now be sure that your own classes will always override the applied styles, as will global styles onimg.An exception is Tailwind 4, which uses cascade layers, meaning the rules are always lower specificity. Astro supports browsers that do not support cascade layers, so we cannot use this. If you need to override the styles using Tailwind 4, you must use
!importantclasses. Do check if this is needed though: there may be a layout that is more appropriate for your use case.#13703
659904bThanks @ascorbic! - Adds warnings about using local font files in thepublicDirwhen the experimental fonts API is enabled.#13703
659904bThanks @ascorbic! - Renames experimental responsive image layout option from "responsive" to "constrained"The layout option called
"responsive"is renamed to"constrained"to better reflect its behavior.The previous name was causing confusion, because it is also the name of the feature. The
responsivelayout option is specifically for images that are displayed at the requested size, unless they do not fit the width of their container, at which point they would be scaled down to fit. They do not get scaled beyond the intrinsic size of the source image, or thewidthprop if provided.It became clear from user feedback that many people (understandably) thought that they needed to set
layouttoresponsiveif they wanted to use responsive images. They then struggled with overriding styles to make the image scale up for full-width hero images, for example, when they should have been usingfull-widthlayout. Renaming the layout toconstrainedshould make it clearer that this layout is for when you want to constrain the maximum size of the image, but allow it to scale-down.Upgrading
If you set a default
image.experimentalLayoutin yourastro.config.mjs, or set it on a per-image basis using thelayoutprop, you will need to change all occurences toconstrained:// astro.config.mjs export default { image: { - experimentalLayout: 'responsive', + experimentalLayout: 'constrained', }, }Please give feedback on the RFC if you have any questions or comments about the responsive images API.
[email protected]
Patch Changes
659904bThanks @ascorbic! - Fixes an issue when installing dependencies withpnpm.