Skip to content

Conversation

@astrobot-houston
Copy link
Contributor

@astrobot-houston astrobot-houston commented Apr 23, 2025

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

  • #13681 6d0e382 Thanks @altano! - Fixes a bug where empty fallbacks could not be provided when using the experimental fonts API

  • #13677 b16b5ef Thanks @ascorbic! - Simplifies styles for experimental responsive images

    ⚠️ BREAKING CHANGE FOR EXPERIMENTAL RESPONSIVE IMAGES ONLY ⚠️

    The 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-fit and object-position for all images, and sets max-width: 100% for constrained images and width: 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 on img.

    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 !important classes. Do check if this is needed though: there may be a layout that is more appropriate for your use case.

  • #13678 2e528cb Thanks @florian-lefebvre! - Adds warnings about using local font files in the publicDir when the experimental fonts API is enabled.

  • #13677 b16b5ef Thanks @ascorbic! - Renames experimental responsive image layout option from "responsive" to "constrained"

    ⚠️ BREAKING CHANGE FOR EXPERIMENTAL RESPONSIVE IMAGES ONLY ⚠️

    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 responsive layout 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 the width prop if provided.

    It became clear from user feedback that many people (understandably) thought that they needed to set layout to responsive if 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 using full-width layout. Renaming the layout to constrained should 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.experimentalLayout in your astro.config.mjs, or set it on a per-image basis using the layout prop, you will need to change all occurences to constrained:

    // astro.config.mjs
    export default {
      image: {
    -    experimentalLayout: 'responsive',
    +    experimentalLayout: 'constrained',
      },
    }
    // src/pages/index.astro
    ---
    import { Image } from 'astro:assets';
    ---
    - <Image src="/image.jpg" layout="responsive" />
    + <Image src="/image.jpg" layout="constrained" />

    Please give feedback on the RFC if you have any questions or comments about the responsive images API.

[email protected]

Patch Changes

@github-actions github-actions bot added the pkg: create-astro Related to the `create-astro` package (scope) label Apr 23, 2025
@github-actions github-actions bot force-pushed the changeset-release/main branch 3 times, most recently from 08af402 to fd003c1 Compare April 24, 2025 14:03
@github-actions github-actions bot force-pushed the changeset-release/main branch from fd003c1 to ae9b608 Compare April 27, 2025 09:17
@github-actions github-actions bot force-pushed the changeset-release/main branch from ae9b608 to 4da73cf Compare April 27, 2025 09:18
@ascorbic ascorbic merged commit 34cdd98 into main Apr 28, 2025
@ascorbic ascorbic deleted the changeset-release/main branch April 28, 2025 06:07
ascorbic added a commit that referenced this pull request Apr 28, 2025
@ascorbic ascorbic mentioned this pull request Apr 28, 2025
ascorbic added a commit that referenced this pull request Apr 28, 2025
openscript pushed a commit to openscript/astro that referenced this pull request Sep 12, 2025
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
openscript pushed a commit to openscript/astro that referenced this pull request Sep 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pkg: create-astro Related to the `create-astro` package (scope)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants