Astro 2.4

By
Matthew Phillips

Astro 2.4 just dropped, and features:

scopedStyleStrategy

Astro uses the :where pseudo-selector for scoped Astro component styles. This approach means your component styles have the same specificity as if they were written in plain CSS. The downside of this approach is that we cannot guarantee that component styles will always override global styles, as is often expected and wanted behavior.

We’ve added the scopedStyleStrategy option which can be used to switch on a high-specificity strategy using class-based selectors:

import { defineConfig } from "astro/config"


export default defineConfig({
  scopedStyleStrategy: "class",
})

This strategy will likely be used as the default in Astro 3.0.

<Code /> component improvements

The <Code /> component has a few new improvements:

  • Upgrade to Shiki 0.14 - Astro was previously on Shiki 0.11. This upgrade comes with many improvements, most notably new themes and language support.
  • New inline prop prevents a wrapping <pre> from being added. This is useful if you want syntax highlighting inline in a paragraph.

SSR in sitemaps

The @astrojs/sitemaps package has been updated to include support for server-side rendering. Previously, sitemaps were only supported when using output: 'static' because dynamic routes are unknown at build time.

The new version can now also be used with output: 'server' and will output a sitemap for known (i.e. static) routes only. Dynamic routes are excluded. No changes are needed to your configuration in order to enable this feature.

Middleware (experimental)

An early preview of middleware support has landed in 2.4. This allows you to intercept requests and responses and inject behaviors dynamically. To enable experimental middleware support, add the experimental flag in astro.config.mjs:

import { defineConfig } from "astro/config"


export default defineConfig({
  experimental: {
    middleware: true,
  },
})

In addition to modifying the request and response, with middleware you can mutate a locals object that is available in all Astro components and API endpoints. Here’s an example of an authentication middleware. Create a src/middlware.ts file with these contents:

import type { MiddlewareResponseHandler } from "astro/middleware"


const auth: MiddlewareResponseHandler = async ({ cookies, locals }, next) => {
  if (!cookies.has("sid")) {
    return new Response(null, {
      status: 405, // Not allowed
    })
  }


  let sessionId = cookies.get("sid")
  let user = await getUserFromSession(sessionId)
  if (!user) {
    return new Response(null, {
      status: 405, // Not allowed
    })
  }


  locals.user = user
  return next()
}


export { auth as onRequest }

Which you can then access via your Astro components:

---
const { user } = Astro.locals
---


<h1>Hello {user.name}</h1>

This feature will remain experimental as we refine the API and fix bugs found by early adopters. See the middleware guide to learn more.

CSS inlining (experimental)

You can now configure stylesheets to be inlined into a <style> tag by enabling the experimental configuration:

import { defineConfig } from "astro/config"


export default defineConfig({
  experimental: {
    inlineStylesheets: "auto",
  },
})

With the 'auto' option, stylesheets that are below the vite.assetInlineLimit will be added as a <style> tag rather than fetched via <link>.

You can also set the option to 'always' to force inlining. Currently, the default is 'never' but might be changed to 'auto' in Astro 3.0.

More

Additional bug fixes and integration features are included in this release. Check out the release notes to learn more.