Reverse order of styles & scripts

.changeset/olive-beds-happen.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/compiler": minor
+---
+
+Add an experimental flag `experimentalScriptOrder` that corrects the order styles & scripts are rendered within a component. When enabled, the order styles & scripts are rendered will be consistent with the order they are defined.

cmd/astro-wasm/astro-wasm.go

@@ -6,7 +6,7 @@
 	"fmt"
 	"strings"
 	"sync"
 	"syscall/js"
 	"unicode"
 
 	"github.com/norunners/vert"
@@ -138,6 +138,11 @@
 		renderScript = true
 	}
 
+	experimentalScriptOrder := false
+	if jsBool(options.Get("experimentalScriptOrder")) {
+		experimentalScriptOrder = true
+	}
+
 	return transform.TransformOptions{
 		Filename:                filename,
 		NormalizedFilename:      normalizedFilename,
@@ -152,6 +157,7 @@
 		TransitionsAnimationURL: transitionsAnimationURL,
 		AnnotateSourceFile:      annotateSourceFile,
 		RenderScript:            renderScript,
+		ExperimentalScriptOrder: experimentalScriptOrder,
 	}
 }
 
@@ -260,7 +266,7 @@
 		// AFTER printing, exec transformations to pickup any errors/warnings
 		transform.Transform(doc, transformOptions, h)
 
 		return vert.ValueOf(ParseResult{
 			AST:         string(result.Output),
 			Diagnostics: h.Diagnostics(),
 		}).Value
@@ -294,7 +300,7 @@
 			code += "\n" + inlineSourcemap
 		}
 
 		return vert.ValueOf(TSXResult{
 			Code:        code,
 			Map:         sourcemapString,
 			Diagnostics: h.Diagnostics(),
@@ -336,7 +342,7 @@
 				}
 
 				// Hoist styles and scripts to the top-level
-				transform.ExtractStyles(doc)
+				transform.ExtractStyles(doc, &transformOptions)
 
 				// Pre-process styles
 				// Important! These goroutines need to be spawned from this file or they don't work
@@ -506,13 +512,13 @@
 }`, sourcemap.Sources[0], sourcemap.SourcesContent[0], sourcemap.Mappings)
 }
 
 func createExternalSourceMap(source string, transformResult *TransformResult, result printer.PrintResult, transformOptions transform.TransformOptions) vert.Value {
 	transformResult.Code = string(result.Output)
 	transformResult.Map = createSourceMapString(source, result, transformOptions)
 	return vert.ValueOf(transformResult)
 }
 
 func createInlineSourceMap(source string, transformResult *TransformResult, result printer.PrintResult, transformOptions transform.TransformOptions) vert.Value {
 	sourcemapString := createSourceMapString(source, result, transformOptions)
 	inlineSourcemap := `//# sourceMappingURL=data:application/json;charset=utf-8;base64,` + base64.StdEncoding.EncodeToString([]byte(sourcemapString))
 	transformResult.Code = string(result.Output) + "\n" + inlineSourcemap
@@ -520,7 +526,7 @@
 	return vert.ValueOf(transformResult)
 }
 
 func createBothSourceMap(source string, transformResult *TransformResult, result printer.PrintResult, transformOptions transform.TransformOptions) vert.Value {
 	sourcemapString := createSourceMapString(source, result, transformOptions)
 	inlineSourcemap := `//# sourceMappingURL=data:application/json;charset=utf-8;base64,` + base64.StdEncoding.EncodeToString([]byte(sourcemapString))
 	transformResult.Code = string(result.Output) + "\n" + inlineSourcemap

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/printer/printer_css_test.go

@@ -87,8 +87,9 @@ func TestPrinterCSS(t *testing.T) {
 			}
 
 			hash := astro.HashString(code)
-			transform.ExtractStyles(doc)
-			transform.Transform(doc, transform.TransformOptions{Scope: hash, ScopedStyleStrategy: scopedStyleStrategy}, handler.NewHandler(code, "/test.astro")) // note: we want to test Transform in context here, but more advanced cases could be tested separately
+			opts := transform.TransformOptions{Scope: hash, ScopedStyleStrategy: scopedStyleStrategy, ExperimentalScriptOrder: true}
+			transform.ExtractStyles(doc, &opts)
+			transform.Transform(doc, opts, handler.NewHandler(code, "/test.astro")) // note: we want to test Transform in context here, but more advanced cases could be tested separately
 			result := PrintCSS(code, doc, transform.TransformOptions{
 				Scope:       "astro-XXXX",
 				InternalURL: "http://localhost:3000/",

internal/printer/printer_test.go

@@ -2066,12 +2066,13 @@ const meta = { title: 'My App' };
 			}
 
 			hash := astro.HashString(code)
-			transform.ExtractStyles(doc)
 			// combine from tt.transformOptions
 			transformOptions := transform.TransformOptions{
-				Scope:        hash,
-				RenderScript: tt.transformOptions.RenderScript,
+				Scope:                   hash,
+				RenderScript:            tt.transformOptions.RenderScript,
+				ExperimentalScriptOrder: true,
 			}
+			transform.ExtractStyles(doc, &transformOptions)
 			transform.Transform(doc, transformOptions, h) // note: we want to test Transform in context here, but more advanced cases could be tested separately
 
 			result := PrintToJS(code, doc, 0, transform.TransformOptions{

internal/transform/transform.go

@@ -34,6 +34,7 @@ type TransformOptions struct {
 	PreprocessStyle         interface{}
 	AnnotateSourceFile      bool
 	RenderScript            bool
+	ExperimentalScriptOrder bool
 }
 
 func Transform(doc *astro.Node, opts TransformOptions, h *handler.Handler) *astro.Node {
@@ -115,7 +116,7 @@ func Transform(doc *astro.Node, opts TransformOptions, h *handler.Handler) *astr
 	return doc
 }
 
-func ExtractStyles(doc *astro.Node) {
+func ExtractStyles(doc *astro.Node, opts *TransformOptions) {
 	walk(doc, func(n *astro.Node) {
 		if n.Type == astro.ElementNode && n.DataAtom == a.Style {
 			if HasSetDirective(n) || HasInlineDirective(n) {
@@ -125,8 +126,12 @@ func ExtractStyles(doc *astro.Node) {
 			if !IsHoistable(n) {
 				return
 			}
-			// prepend node to maintain authored order
-			doc.Styles = append([]*astro.Node{n}, doc.Styles...)
+			// append node to maintain authored order
+			if opts.ExperimentalScriptOrder {
+				doc.Styles = append(doc.Styles, n)
+			} else {
+				doc.Styles = append([]*astro.Node{n}, doc.Styles...)
+			}
 		}
 	})
 	// Important! Remove styles from original location *after* walking the doc
@@ -434,9 +439,13 @@ func ExtractScript(doc *astro.Node, n *astro.Node, opts *TransformOptions, h *ha
 				}
 			}
 
-			// prepend node to maintain authored order
+			// append node to maintain authored order
 			if shouldAdd {
-				doc.Scripts = append([]*astro.Node{n}, doc.Scripts...)
+				if opts.ExperimentalScriptOrder {
+					doc.Scripts = append(doc.Scripts, n)
+				} else {
+					doc.Scripts = append([]*astro.Node{n}, doc.Scripts...)
+				}
 				n.HandledScript = true
 			}
 		} else {

internal/transform/transform_test.go

@@ -182,7 +182,6 @@ func TestTransformScoping(t *testing.T) {
 			if err != nil {
 				t.Error(err)
 			}
-			ExtractStyles(doc)
 			var scopeStyle string
 			if tt.scopeStyle == "attribute" {
 				scopeStyle = "attribute"
@@ -191,7 +190,9 @@ func TestTransformScoping(t *testing.T) {
 			} else {
 				scopeStyle = "where"
 			}
-			Transform(doc, TransformOptions{Scope: "xxxxxx", ScopedStyleStrategy: scopeStyle}, handler.NewHandler(tt.source, "/test.astro"))
+			transformOptions := TransformOptions{Scope: "xxxxxx", ScopedStyleStrategy: scopeStyle}
+			ExtractStyles(doc, &transformOptions)
+			Transform(doc, transformOptions, handler.NewHandler(tt.source, "/test.astro"))
 			astro.PrintToSource(&b, doc.LastChild.FirstChild.NextSibling.FirstChild)
 			got := b.String()
 			if tt.want != got {
@@ -211,8 +212,9 @@ func FuzzTransformScoping(f *testing.F) {
 		if err != nil {
 			t.Skip("Invalid parse, skipping rest of fuzz test")
 		}
-		ExtractStyles(doc)
-		Transform(doc, TransformOptions{Scope: "xxxxxx"}, handler.NewHandler(source, "/test.astro"))
+		transformOptions := TransformOptions{Scope: "xxxxxx"}
+		ExtractStyles(doc, &transformOptions)
+		Transform(doc, transformOptions, handler.NewHandler(source, "/test.astro"))
 		var b strings.Builder
 		astro.PrintToSource(&b, doc.LastChild.FirstChild.NextSibling.FirstChild)
 		got := b.String()
@@ -297,10 +299,11 @@ func TestFullTransform(t *testing.T) {
 			if err != nil {
 				t.Error(err)
 			}
-			ExtractStyles(doc)
+			transformOptions := TransformOptions{}
+			ExtractStyles(doc, &transformOptions)
 			// Clear doc.Styles to avoid scoping behavior, we're not testing that here
 			doc.Styles = make([]*astro.Node, 0)
-			Transform(doc, TransformOptions{}, handler.NewHandler(tt.source, "/test.astro"))
+			Transform(doc, transformOptions, handler.NewHandler(tt.source, "/test.astro"))
 			astro.PrintToSource(&b, doc)
 			got := strings.TrimSpace(b.String())
 			if tt.want != got {
@@ -345,10 +348,11 @@ func TestTransformTrailingSpace(t *testing.T) {
 			if err != nil {
 				t.Error(err)
 			}
-			ExtractStyles(doc)
+			transformOptions := TransformOptions{}
+			ExtractStyles(doc, &transformOptions)
 			// Clear doc.Styles to avoid scoping behavior, we're not testing that here
 			doc.Styles = make([]*astro.Node, 0)
-			Transform(doc, TransformOptions{}, handler.NewHandler(tt.source, "/test.astro"))
+			Transform(doc, transformOptions, handler.NewHandler(tt.source, "/test.astro"))
 			astro.PrintToSource(&b, doc)
 			got := b.String()
 			if tt.want != got {
@@ -463,12 +467,13 @@ func TestCompactTransform(t *testing.T) {
 			if err != nil {
 				t.Error(err)
 			}
-			ExtractStyles(doc)
+			transformOptions := TransformOptions{
+				Compact: true,
+			}
+			ExtractStyles(doc, &transformOptions)
 			// Clear doc.Styles to avoid scoping behavior, we're not testing that here
 			doc.Styles = make([]*astro.Node, 0)
-			Transform(doc, TransformOptions{
-				Compact: true,
-			}, &handler.Handler{})
+			Transform(doc, transformOptions, &handler.Handler{})
 			astro.PrintToSource(&b, doc)
 			got := strings.TrimSpace(b.String())
 			if tt.want != got {

packages/compiler/src/shared/types.ts

@@ -65,6 +65,7 @@ export interface TransformOptions {
 	 * @experimental
 	 */
 	renderScript?: boolean;
+	experimentalScriptOrder?: boolean;
 }
 
 export type ConvertToTSXOptions = Pick<

packages/compiler/test/scripts/order.ts

@@ -0,0 +1,25 @@
+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>`,
+		{
+			experimentalScriptOrder: true,
+		}
+	);
+
+	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

@@ -33,19 +33,20 @@ test.before(async () => {
 	result = await transform(FIXTURE, {
 		sourcemap: true,
 		preprocessStyle,
+		experimentalScriptOrder: true,
 	});
 });
 
 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();