astro 2.4.0
Minor Changes
-
#6990
818252acdThanks @Princesseuh! - Generated optimized images are now cached inside thenode_modules/.astro/assetsfolder. The cached images will be used to avoid doing extra work and speed up subsequent builds. -
#6659
80e3d4d3dThanks @lilnasy! - Implement Inline Stylesheets RFC as experimental -
#6771
3326492b9Thanks @matthewp! - Implements a new class-based scoping strategyThis implements the Scoping RFC, providing a way to opt in to increased style specificity for Astro component styles.
This prevents bugs where global styles override Astro component styles due to CSS ordering and the use of element selectors.
To enable class-based scoping, you can set it in your config:
import { defineConfig } from 'astro/config'; export default defineConfig({ scopedStyleStrategy: 'class', });Note that the 0-specificity
:wherepseudo-selector is still the default strategy. The intent is to change'class'to be the default in 3.0. -
#6959
cac4a321eThanks @bluwy! - Support<Code inline />to output inline code HTML (nopretag) -
#6721
831b67cdbThanks @ematipico! - Implements a new experimental middleware in Astro.The middleware is available under the following experimental flag:
export default defineConfig({ experimental: { middleware: true, }, });Or via CLI, using the new argument
--experimental-middleware.Create a file called
middleware.{js,ts}inside thesrcfolder, and export aonRequestfunction.From
astro/middleware, use thedefineMiddlewareutility to take advantage of type-safety, and use thesequenceutility to chain multiple middleware functions.Example:
import { defineMiddleware, sequence } from 'astro/middleware'; const redirects = defineMiddleware((context, next) => { if (context.request.url.endsWith('/old-url')) { return context.redirect('/new-url'); } return next(); }); const minify = defineMiddleware(async (context, next) => { const repsonse = await next(); const minifiedHtml = await minifyHtml(response.text()); return new Response(minifiedHtml, { status: 200, headers: response.headers, }); }); export const onRequest = sequence(redirects, minify); -
#6932
49514e4ceThanks @bluwy! - Upgrade shiki to v0.14.1. This updates the shiki theme colors and adds the theme name to thepretag, e.g.<pre class="astro-code github-dark">.