Reverse order of styles & scripts

.changeset/olive-beds-happen.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/compiler": patch
+---
+
+Fix the order that styles & scripts are rendered

internal/printer/__printer_js__/multiple_define_vars_on_style.snap

@@ -34,7 +34,7 @@ export const $$metadata = $$createMetadata(import.meta.url, { modules: [], hydra
 
 const $$Component = $$createComponent(($$result, $$props, $$slots) => {
 
-const $$definedVars = $$defineStyleVars([{color:'red'},{color:'green'}]);
+const $$definedVars = $$defineStyleVars([{color:'green'},{color:'red'}]);
 return $$render`${$$maybeRenderHead($$result)}<h1 class="astro-6oxbqcst"${$$addAttribute($$definedVars, "style")}>foo</h1><h2 class="astro-6oxbqcst"${$$addAttribute($$definedVars, "style")}>bar</h2>`;
 }, undefined, undefined);
 export default $$Component;

internal/printer/__printer_js__/script_multiple__renderScript__true_.snap

@@ -30,7 +30,7 @@ import {
   createMetadata as $$createMetadata
 } from "http://localhost:3000/";
 
-export const $$metadata = $$createMetadata("/src/pages/index.astro", { modules: [], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: new Set([]), hoisted: [{ type: 'inline', value: `console.log("World");` }, { type: 'inline', value: `console.log("Hello");` }] });
+export const $$metadata = $$createMetadata("/src/pages/index.astro", { modules: [], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: new Set([]), hoisted: [{ type: 'inline', value: `console.log("Hello");` }, { type: 'inline', value: `console.log("World");` }] });
 
 const $$Index = $$createComponent(($$result, $$props, $$slots) => {
 

internal/transform/transform.go

@@ -126,7 +126,7 @@ func ExtractStyles(doc *astro.Node) {
 				return
 			}
 			// prepend node to maintain authored order
-			doc.Styles = append([]*astro.Node{n}, doc.Styles...)
+			doc.Styles = append(doc.Styles, n)
 		}
 	})
 	// Important! Remove styles from original location *after* walking the doc
@@ -436,7 +436,7 @@ func ExtractScript(doc *astro.Node, n *astro.Node, opts *TransformOptions, h *ha
 
 			// prepend node to maintain authored order
 			if shouldAdd {
-				doc.Scripts = append([]*astro.Node{n}, doc.Scripts...)
+				doc.Scripts = append(doc.Scripts, n)
 				n.HandledScript = true
 			}
 		} else {

packages/compiler/test/scripts/order.ts

@@ -0,0 +1,20 @@
+import { transform } from '@astrojs/compiler';
+import { test } from 'uvu';
+import * as assert from 'uvu/assert';
+
+test('outputs scripts in expected order', async () => {
+	const result = await transform(`
+    <script>console.log(1)</script>
+    <script>console.log(2)</script>`);
+
+	const scripts = result.scripts;
+
+	// for typescript
+	if (scripts[0].type === 'external') throw new Error('Script is external');
+	if (scripts[1].type === 'external') throw new Error('Script is external');
+
+	assert.match(scripts[0].code, 'console.log(1)');
+	assert.match(scripts[1].code, 'console.log(2)');
+});
+
+test.run();

packages/compiler/test/styles/sass.ts

@@ -37,15 +37,15 @@ test.before(async () => {
 });
 
 test('transforms scss one', () => {
-	assert.match(
-		result.css[result.css.length - 1],
-		'color:red',
-		'Expected "color:red" to be present.'
-	);
+	assert.match(result.css[0], 'color:red', 'Expected "color:red" to be present.');
 });
 
 test('transforms scss two', () => {
-	assert.match(result.css[0], 'color:green', 'Expected "color:green" to be present.');
+	assert.match(
+		result.css[result.css.length - 1],
+		'color:green',
+		'Expected "color:green" to be present.'
+	);
 });
 
 test.run();