Astro 1.4.0 版本发布

我们刚刚发布了 Astro 1.4.0，主要功能包括：

您可以通过运行 npm install astro@latest 更新您的项目。

Astro.cookies

使用 SSR 构建的站点能够在 Astro 中读取和设置 cookie。之前，读取 cookie 需要读取请求中的 cookie 头（页面中的 Astro.request）并使用库进行解析。写入 cookie 则需要将其序列化为响应中的 Set-Cookie 头。

考虑到 cookie 在有状态和认证应用程序中的重要性，我们认为为 cookie 提供一个简化的抽象将使所有这些操作变得更容易。

使用 Astro.cookies，您可以使用类似于 Map 的 API 来读写 cookie。在上面的示例中，我们检查是否存在 prefs cookie，如果不存在则设置一个默认值。然后我们获取其值并在模板中使用。

请查阅文档以获取完整的 API 参考。

如果您在 Astro 项目中使用 pnpm，您现在可以使用其严格的依赖算法安装您的依赖。由于 Astro 会替您运行代码，您之前需要将包提升到根目录，这意味着您的大部分依赖（以及它们的依赖）都安装在顶层的 node_modules/ 文件夹中。

更严格的安装方式更为正确，因为包只能导入其自身 package.json 中定义的依赖。更严格的安装也更快，因为 Node.js 不需要在那么多文件夹中查找包。

此功能在 Astro 1.4.0 中对新项目免费提供。现有项目可以移除其 .npmrc 文件中可能存在的提升配置。

当 Astro 1.0 发布时，我们改变了 CSS 作用域机制，以使用 :where() 伪类。这使您能够通过常规方式（例如添加类名）更好地控制特异性。

进行此切换时，我们没有意识到样式的默认排序并不理想：直接在组件中定义的样式在 CSS 输出中位于导入样式之前，这使得组件样式的优先级低于导入样式。

在 1.4.0 版本中，您在 Astro 组件中编写的样式将位于导入的全局样式之后。实际上，这意味着如果您编写一个组件如下：

Title.astro

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

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

当您的站点构建并捆绑 CSS 后，您将得到类似如下的内容：

h1 {
  color: onyx;
}

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

考虑到这些选择器都具有相同的特异性，后列出的选择器（即作用域限定在您的 Title.astro 组件中的选择器）将优先。在该组件中，h1 将具有 color: aliceblue，但任何在组件外部定义的 h1 将是 onyx。

您将获得两全其美的效果：在 Astro 中定义的样式如果具有相同的特异性将获得更好的优先级，但您可以在需要时通过增加特异性来覆盖此设置。

输出 CSS 的顺序现在是（从低到高优先级）：

我们目前正在编写完整的文档，以解释 CSS 排序的工作原理以及如何通过排序和特异性控制 CSS 优先级。

您现在可以将 JSX 和 TSX 与 Vue 集成一起使用。在集成选项中设置 jsx: true 会启用 @vitejs/plugin-vue-jsx Vite 插件，它完成了大部分工作，并且您可以使用其任何选项。

感谢所有为此次杰出发布做出贡献的人。除了这些新功能之外，核心包和集成中还有许多错误修复。请参阅发布说明了解更多。