#13919423fe60 Thanks @ematipico! - Fixes a bug where Astro added quotes to the CSP resources.
Only certain resources require quotes (e.g. 'self' but not https://cdn.example.com), so Astro no longer adds quotes to any resources. You must now provide the quotes yourself for resources such as 'self' when necessary:
export default defineConfig({
experimental: {
csp: {
styleDirective: {
resources: [
"self",
"'self'",
"https://cdn.example.com"
]
}
}
}
})
#1391476c5480 Thanks @ematipico! - BREAKING CHANGE to the experimental Content Security Policy feature only
Removes support for experimental Content Security Policy (CSP) when using the <ClientRouter /> component for view transitions.
It is no longer possible to enable experimental CSP while using Astro’s view transitions. Support was already unstable with the <ClientRouter /> because CSP required making its underlying implementation asynchronous. This caused breaking changes for several users and therefore, this PR removes support completely.
If you are currently using the component for view transitions, please remove the experimental CSP flag as they cannot be used together.
import { defineConfig } from 'astro/config';
export default defineConfig({
experimental: {
csp: true
}
});
Alternatively, to continue using experimental CSP in your project, you can consider migrating to the browser native View Transition API and remove the <ClientRouter /> from your project. You may be able to achieve similar results if you are not using Astro’s enhancements to the native View Transitions and Navigation APIs.
Support might be reintroduced in future releases. You can follow this experimental feature’s development in the CSP RFC.
CSP is an important feature to provide fine-grained control over resources that can or cannot be downloaded and executed by a document. In particular, it can help protect against cross-site scripting (XSS) attacks.
Enabling this feature adds additional security to Astro’s handling of processed and bundled scripts and styles by default, and allows you to further configure these, and additional, content types. This new experimental feature has been designed to work in every Astro rendering environment (static pages, dynamic pages and single page applications), while giving you maximum flexibility and with type-safety in mind.
It is compatible with most of Astro’s features such as client islands, and server islands, although Astro’s view transitions using the <ClientRouter /> are not yet fully supported. Inline scripts are not supported out of the box, but you can provide your own hashes for external and inline scripts.
To enable this feature, add the experimental flag in your Astro config:
astro.config.mjs
import { defineConfig } from'astro/config';
exportdefaultdefineConfig({
experimental: {
csp: true,
},
});
For more information on enabling and using this feature in your project, see the Experimental CSP docs.
For a complete overview, and to give feedback on this experimental API, see the Content Security Policy RFC.
When creating a content loader, you will now have access to a renderMarkdown function that allows you to render Markdown content directly within your loaders. It uses the same settings and plugins as the renderer used for Markdown files in Astro, and follows any Markdown settings you have configured in your Astro project.
This allows you to render Markdown content from various sources, such as a CMS or other data sources, directly in your loaders without needing to preprocess the Markdown content separately.
importtype { Loader } from'astro/loaders';
import { loadFromCMS } from'./cms';
exportfunctionmyLoader(settings):Loader {
return {
name: 'my-loader',
asyncload({ renderMarkdown, store }) {
constentries=awaitloadFromCMS();
store.clear();
for (constentryof entries) {
// Assume each entry has a 'content' field with markdown content
store.set(entry.id, {
id: entry.id,
data: entry,
rendered: awaitrenderMarkdown(entry.content),
});
}
},
};
}
The return value of renderMarkdown is an object with two properties: html and metadata. These match the rendered property of content entries in content collections, so you can use them to render the content in your components or pages.
#1388762f0668 Thanks @yanthomasdev! - Adds an option for integration authors to suppress adapter warning/errors in supportedAstroFeatures. This is useful when either an warning/error isn’t applicable in a specific context or the default one might conflict and confuse users.
To do so, you can add suppress: "all" (to suppress both the default and custom message) or suppress: "default" (to only suppress the default one):
setAdapter({
name: 'my-astro-integration',
supportedAstroFeatures: {
staticOutput: 'stable',
hybridOutput: 'stable',
sharpImageService: {
support: 'limited',
message:
"The sharp image service isn't available in the deploy environment, but will be used by prerendered pages on build.",
This change adds a new image.experimentalDefaultStyles option that allows you to disable the default styles applied to responsive images.
When using experimental responsive images, Astro applies default styles to ensure the images resize correctly. In most cases this is what you want – and they are applied with low specificity so your own styles override them. However in some cases you may want to disable these default styles entirely. This is particularly useful when using Tailwind 4, because it uses CSS cascade layers to apply styles, making it difficult to override the default styles.
image.experimentalDefaultStyles is a boolean option that defaults to true, so you can change it in your Astro config file like this:
Node.js 18 has now reached end-of-life and should not be used. For now, Astro will continue to support Node.js 18.20.8, which is the final LTS release of Node.js 18, as well as Node.js 20 and Node.js 22 or later. We will drop support for Node.js 18 in a future release, so we recommend upgrading to Node.js 22 as soon as possible. See Astro’s Node.js support policy for more details.
:warning: Important note for users of Cloudflare Pages: The current build image for Cloudflare Pages uses Node.js 18.17.1 by default, which is no longer supported by Astro. If you are using Cloudflare Pages you should override the default Node.js version to Node.js 22. This does not affect users of Cloudflare Workers, which uses Node.js 22 by default.
#1337350ef568 Thanks @jpwienekus! - Fixes a bug where highlights and tooltips render over the audit list window.
#13769e9fc456 Thanks @romanstetsyk! - Expand ActionError codes to include all IANA-registered HTTP error codes.
#13668866285a Thanks @sapphi-red! - Replaces internal CSS chunking behavior for Astro components’ scoped styles to use Vite’s cssScopeTo feature. The feature is a port of Astro’s implementation so this should not change the behavior.
#137887d0b7ac Thanks @florian-lefebvre! - Fixes a case where an error would not be thrown when using the <Font /> component from the experimental fonts API without adding fonts in the Astro config
#13784d7a1889 Thanks @florian-lefebvre! - Fixes the experimental fonts API to correctly take config.base, config.build.assets and config.build.assetsPrefix into account
#13777a56b8ea Thanks @L4Ph! - Fixed an issue where looping GIF animation would stop when converted to WebP
#13752a079c21 Thanks @florian-lefebvre! - Improves handling of font URLs not ending with a file extension when using the experimental fonts API
#137507d3127d Thanks @martrapp! - Allows the ClientRouter to open new tabs or windows when submitting forms by clicking while holding the Cmd, Ctrl, or Shift key.
#13765d874fe0 Thanks @florian-lefebvre! - Fixes a case where font sources with relative protocol URLs would fail when using the experimental fonts API
#136405e582e7 Thanks @florian-lefebvre! - Allows inferring weight and style when using the local provider of the experimental fonts API
If you want Astro to infer those properties directly from your local font files, leave them undefined:
#137515816b8a Thanks @florian-lefebvre! - Updates unifont to support subsets when using the google provider with the experimental fonts API
#13756d4547ba Thanks @florian-lefebvre! - Adds a terminal warning when a remote provider returns no data for a family when using the experimental fonts API
#13742f599463 Thanks @florian-lefebvre! - Fixes optimized fallback css generation to properly add a src when using the experimental fonts API
#137406935540 Thanks @vixalien! - Fix cookies set after middleware did a rewrite with next(url) not being applied
#137594a56d0a Thanks @jp-knj! - Improved the error handling of certain error cases.
#13715b32dffa Thanks @florian-lefebvre! - Updates unifont to fix a case where a unicodeRange related error would be thrown when using the experimental fonts API
#1370528f8716 Thanks @florian-lefebvre! - Updates unifont to latest and adds support for fetch options from remote providers when using the experimental fonts API
#1369260d5be4 Thanks @Le0Developer! - Fixes a bug where Astro couldn’t probably use inferSize for images that contain apostrophe ' in their name.
#13698ab98f88 Thanks @sarah11918! - Improves the configuration reference docs for the adapter entry with more relevant text and links.
#13653a7b2dc6 Thanks @florian-lefebvre! - Reduces the amount of preloaded files for the local provider when using the experimental fonts API
#13653a7b2dc6 Thanks @florian-lefebvre! - Fixes a case where invalid CSS was emitted when using an experimental fonts API family name containing a space
#13703659904b Thanks @florian-lefebvre! - Fixes a bug where empty fallbacks could not be provided when using the experimental fonts API
#1368018e1b97 Thanks @florian-lefebvre! - Improves the UnsupportedExternalRedirect error message to include more details such as the concerned destination
:warning: BREAKING CHANGE FOR EXPERIMENTAL RESPONSIVE IMAGES ONLY :warning:
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.
#13703659904b Thanks @ascorbic! - Adds warnings about using local font files in the publicDir when the experimental fonts API is enabled.
#13703659904b Thanks @ascorbic! - Renames experimental responsive image layout option from “responsive” to “constrained”
:warning: BREAKING CHANGE FOR EXPERIMENTAL RESPONSIVE IMAGES ONLY :warning:
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
exportdefault {
image: {
experimentalLayout: 'responsive',
experimentalLayout: 'constrained',
},
}
src/pages/index.astro
---
import { Image } from'astro:assets';
---
<Imagesrc="/image.jpg"layout="responsive" />
<Imagesrc="/image.jpg"layout="constrained" />
Please give feedback on the RFC if you have any questions or comments about the responsive images API.
#1366973f24d4 Thanks @ematipico! - Fixes an issue where Astro.originPathname wasn’t returning the correct value when using rewrites.
#1367442388b2 Thanks @florian-lefebvre! - Fixes a case where an experimental fonts API error would be thrown when using another astro:assets API
#136544931457 Thanks @florian-lefebvre! - Fixes fontProviders.google() so it can forward options to the unifont provider, when using the experimental fonts API
#1364367b7493 Thanks @tanishqmanuja! - Fixes a case where the font face src format would be invalid when using the experimental fonts API
#1363923410c6 Thanks @florian-lefebvre! - Fixes a case where some font families would not be downloaded when using the same font provider several times, using the experimental fonts API
