Astro 1.4.0 | Astro

Мы выпустили Astro 1.4.0:

Astro.cookies: упрощённая работа с cookies в страницах Astro и API routes.
Support for strict dependency installation: пользователи pnpm получают semi-strict установку зависимостей.
Better control over style ordering: стили в компонентах Astro ниже в бандле, чем импортированные глобальные.
JSX support in Vue: компоненты на JSX и TSX.

Обновление: npm install astro@latest.

Astro.cookies

SSR-сайты читают и устанавливают cookies в Astro. Раньше чтение — парсинг заголовка cookie (Astro.request) библиотекой. Запись — сериализация в Set-Cookie.

Учитывая важность cookies в stateful и аутентифицированных приложениях, упрощённая абстракция облегчает работу.

С Astro.cookies чтение и запись через API, похожий на Map. В примере проверяем cookie prefs и задаём значение по умолчанию, затем используем в шаблоне.

См. документацию.

Strict dependency installation

В Astro с pnpm можно установить зависимости strict-алгоритмом. Astro выполняет код от вашего имени — раньше нужно было поднимать пакеты в корень.

Strict-установка корректнее: пакет импортирует только зависимости из своего package.json. И быстрее — Node.js ищет в меньшем числе папок.

Бесплатно в Astro 1.4.0 для новых проектов. Существующие могут убрать hoisting в .npmrc.

Better control over style ordering

В Astro 1.0 scoping перешёл на :where() — контроль специфичности через классы.

Мы не учли порядок стилей: стили в компоненте шли перед импортированными — ниже приоритет, чем у глобальных.

В 1.4.0 стили в Astro-компонентах идут после импортированных глобальных. Пример:

Title.astro

---
import "../styles/global-titles.css"
---

<h1>{Astro.props.title}</h1>
<style>
  h1 {
    color: aliceblue;
  }
</style>

После сборки:

h1 {
  color: onyx;
}

/* /src/components/Title.astro */
h1:where(.astro-1234) {
  color: aliceblue;
}

При одинаковой специфичности побеждает поздний селектор — scoped в Title.astro. h1 в компоненте — aliceblue, вне — onyx.

Лучшее из обоих миров: приоритет стилей Astro при равной специфичности, переопределение через большую специфичность.

Порядок CSS (от низшего к высшему):

CSS в public/ как <link> в head.
CSS во frontmatter, по порядку import (depth-first).
CSS в <style> Astro.

Готовим полную документацию по порядку CSS и приоритету.

JSX support in Vue

JSX и TSX с Vue integration. jsx: true включает @vitejs/plugin-vue-jsx со всеми опциями.

Спасибо участникам релиза. Исправления в core и интеграциях. См. release notes.