Preservar el orden de los scripts experimentalmente

Tipo: boolean
Predeterminado: false

Agregado en: astro@5.5.0

Renderiza múltiples etiquetas <style> y <script> en el mismo orden en que fueron declaradas en el código fuente.

Para habilitar este comportamiento, agrega la bandera de característica experimental.preserveScriptOrder a tu configuración de Astro:

astro.config.mjs

import { defineConfig } from "astro/config"

export default defineConfig({
  experimental: {
    preserveScriptOrder: true
  }
})

Uso

Sección titulada Uso

Esta bandera experimental no requiere un uso específico y solo afecta el orden en que Astro renderiza tus estilos y scripts.

Al renderizar múltiples etiquetas <style> y <script> en la misma página, Astro actualmente invierte su orden en tu salida HTML generada. Esto puede dar resultados inesperados, por ejemplo, los estilos CSS siendo sobrescritos por etiquetas de estilo definidas anteriormente cuando se construye tu sitio. Esta bandera experimental en su lugar renderiza las etiquetas <script> y <style> en el orden en que están definidas.

Por ejemplo, el siguiente componente tiene dos etiquetas <style> y dos etiquetas <script>:

src/components/MyComponent.astro

<p>Soy un componente</p>
<style>
  body {
    background: red;
  }
</style>
<style>
  body {
    background: yellow;
  }
</style>
<script>
    console.log("hello")
</script>
<script>
    console.log("world!")
</script>

Después de la compilación, el comportamiento predeterminado de Astro creará un estilo en línea donde yellow aparece primero, y luego red. Esto significa que se aplica el fondo red. De manera similar con los dos scripts, la palabra world! se registra primero, y luego hello en segundo lugar:

body {background:#ff0} body {background:red}

console.log("world!")
console.log("hello")

Cuando experimental.preserveScriptOrder se establece en true, el orden de renderizado de las etiquetas <style> y <script> coincide con el orden en que están escritas. Para el mismo componente de ejemplo, el estilo generado red aparece primero, y luego yellow; en cuanto a los scripts, hello se registra primero, y luego world!:

body {background:red} body {background:#ff0}

console.log("hello")
console.log("world!")

En una futura versión principal, Astro preservará el orden de los estilos y scripts de forma predeterminada, pero puedes optar por el comportamiento futuro anticipadamente usando la bandera experimental.preserveScriptOrder.