Astro 2.4 | Astro

Вышел Astro 2.4 с:

Stronger scoping for CSS: opt-in флаг scopedStyleStrategy для более высокой специфичности scoped-стилей компонентов Astro.
Improved <Code /> component: обновлённый Shiki и поддержка inlining.
SSR support in sitemaps: известные маршруты попадают в sitemap при сборке.
Middleware (experimental): код до компонентов страниц и endpoints — перехват запросов и изменение ответов.
CSS inlining (experimental): когда стили инлайнятся через <style>.

scopedStyleStrategy

Astro использует псевдоселектор :where для scoped-стилей. Специфичность как у обычного CSS, но нельзя гарантировать, что стили компонента перекроют глобальные — хотя это часто ожидается.

Добавлена опция scopedStyleStrategy для стратегии с высокой специфичностью на class-селекторах:

import { defineConfig } from "astro/config"

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

Вероятно, станет умолчанием в Astro 3.0.

<Code /> component improvements

Улучшения <Code />:

Обновление до Shiki 0.14 (раньше 0.11) — новые темы и языки.
Проп inline без обёртки <pre> — подсветка inline в абзаце.

SSR in sitemaps

@astrojs/sitemaps поддерживает server-side rendering. Раньше sitemap работал только с output: 'static', т.к. динамические маршруты неизвестны при сборке.

Новая версия работает с output: 'server' и выводит sitemap только для известных (статических) маршрутов. Динамические исключены. Конфигурация не меняется.

Middleware (experimental)

Ранний preview middleware в 2.4 — перехват запросов и ответов, динамическое поведение. Включите флаг experimental в astro.config.mjs:

import { defineConfig } from "astro/config"

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

Помимо изменения request/response, middleware мутирует locals, доступный во всех компонентах Astro и API endpoints. Пример authentication middleware — src/middlware.ts:

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 }

Доступ из компонентов Astro:

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

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

Функция останется экспериментальной при доработке API. См. руководство middleware.

CSS inlining (experimental)

Стили можно инлайнить в <style> через экспериментальную конфигурацию:

import { defineConfig } from "astro/config"

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

С 'auto' таблицы ниже vite.assetInlineLimit попадают в <style>, а не через <link>.

Также 'always' для принудительного инлайнинга. Сейчас по умолчанию 'never', в Astro 3.0 может стать 'auto'.

В релизе также исправления и функции интеграций. См. release notes.