Lanzamiento de Astro 1.4.0

Acabamos de lanzar Astro 1.4.0, que incluye:

• Astro.cookies: Un enfoque simplificado para manipular cookies dentro de páginas de Astro y rutas de API.
• Soporte para instalación estricta de dependencias: los usuarios de pnpm ahora pueden tener los beneficios de su estrategia de instalación semi-estricta por defecto en proyectos de Astro.
• Mejor control sobre el orden de los estilos: Hemos corregido el orden de los estilos para que los estilos definidos en componentes de Astro estén más abajo en el CSS empaquetado que los estilos globales que importas.
• Soporte JSX en Vue: Los usuarios de Vue ahora pueden definir componentes usando JSX y TSX.

Puedes actualizar tus proyectos ejecutando npm install astro@latest.

Astro.cookies

Los sitios construidos con SSR pueden leer y establecer cookies en Astro. Anteriormente, leer cookies requería leer el header cookie en la petición (Astro.request en páginas) y luego parsearlo usando una biblioteca. Escribir cookies requería serializarlas en headers Set-Cookie en la Response retornada.

Dada la importancia de las cookies en aplicaciones con estado y autenticadas, sentimos que una abstracción simplificada para cookies haría todo esto más fácil.

Con Astro.cookies puedes leer y escribir cookies con una API similar a Map. En el ejemplo anterior, comprobamos si existe una cookie prefs y establecemos un valor por defecto si no existe. Luego obtenemos su valor y lo usamos en nuestra plantilla.

Consulta la documentación para la referencia completa de la API.

Instalación estricta de dependencias

Si estás usando pnpm en tu proyecto de Astro, ahora puedes instalar tus dependencias usando su algoritmo de instalación estricta. Como Astro ejecuta código en tu nombre, anteriormente necesitabas hoistear paquetes a la raíz, lo que significaba que la mayoría de tus dependencias (y las dependencias de ellas) se instalaban en la carpeta node_modules/ de nivel superior.

Una instalación más estricta es más correcta, en el sentido de que un paquete solo puede importar dependencias que define en su propio package.json. Una instalación más estricta también es más rápida, ya que Node.js no necesita buscar en tantas carpetas para encontrar paquetes.

Esta característica viene gratis en Astro 1.4.0 para proyectos nuevos. Los proyectos existentes pueden eliminar la configuración de hoisting que puedan tener en un archivo .npmrc.

Mejor control sobre el orden de los estilos

Cuando se lanzó Astro 1.0, cambiamos nuestro mecanismo de scoping de CSS para usar la :where() pseudo-clase. Esto te permitió controlar mejor la especificidad con los medios habituales, como añadir nombres de clase.

Al hacer este cambio, no nos dimos cuenta de que el orden por defecto de los estilos no era ideal: los estilos definidos directamente en un componente venían antes que los estilos importados en la salida de CSS, dándole a los estilos de componente menor precedencia que a los estilos importados.

En 1.4.0, los estilos que escribes en componentes de Astro vendrán después de los estilos globales importados. En la práctica, esto significa que si escribes un componente así:

Title.astro

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

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

Cuando tu sitio se construye y el CSS se empaqueta obtienes algo como lo siguiente:

h1 {
  color: onyx;
}

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

Dado que ambos selectores tienen la misma especificidad, el que aparece después —el que está scoped a tu componente Title.astro— prevalecerá. Dentro de ese componente, el h1 tendrá color: aliceblue, pero cualquier h1 definido fuera de tu componente será onyx.

Obtienes lo mejor de ambos mundos: los estilos definidos en Astro están mejor priorizados si tienen la misma especificidad, pero puedes sobrescribir esto aumentando la especificidad cuando sea necesario.

El orden del CSS de salida ahora es (de menor a mayor precedencia):

1. CSS en tu carpeta public/ añadido como etiquetas <link> en el head.
2. CSS importado en tu frontmatter, en el orden de tus import statements (depth-first).
3. CSS definido en etiquetas style de Astro.

Actualmente estamos escribiendo documentación completa para explicar cómo funciona el orden de CSS y cómo puedes controlar la prioridad de CSS vía orden y especificidad.

Soporte JSX en Vue

Ahora puedes usar JSX y TSX con la integración de Vue. Establecer jsx: true en las opciones de las integraciones habilita el plugin de Vite @vitejs/plugin-vue-jsx, que hace la mayor parte del trabajo, y puedes usar cualquiera de sus opciones.

Gracias a todos los que contribuyeron a este destacado lanzamiento. Además de estas nuevas características también hubo un montón de correcciones de bugs en los paquetes principales e integraciones. Revisa las notas del lanzamiento para aprender más.