From 4d6475227458f02361b62ff9603e79594bf7ec11 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Thu, 4 Aug 2022 11:43:25 -0400
Subject: [PATCH] Order server CSS the same as static (#4149)

* Order server CSS the same as static

* Adds a changeset
---
 .changeset/curvy-donuts-build.md              |  5 ++
 .../astro/src/core/build/vite-plugin-ssr.ts   |  2 +-
 packages/astro/test/css-order.test.js         | 57 +++++++++++++++++++
 .../test/fixtures/css-order/package.json      |  6 ++
 .../css-order/src/components/CommonHead.astro |  5 ++
 .../fixtures/css-order/src/pages/one.astro    | 17 ++++++
 .../fixtures/css-order/src/pages/two.astro    | 17 ++++++
 packages/astro/test/ssr-response.test.js      |  1 -
 pnpm-lock.yaml                                |  6 ++
 9 files changed, 114 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/curvy-donuts-build.md
 create mode 100644 packages/astro/test/css-order.test.js
 create mode 100644 packages/astro/test/fixtures/css-order/package.json
 create mode 100644 packages/astro/test/fixtures/css-order/src/components/CommonHead.astro
 create mode 100644 packages/astro/test/fixtures/css-order/src/pages/one.astro
 create mode 100644 packages/astro/test/fixtures/css-order/src/pages/two.astro

diff --git a/.changeset/curvy-donuts-build.md b/.changeset/curvy-donuts-build.md
new file mode 100644
index 000000000..a9a7c44d0
--- /dev/null
+++ b/.changeset/curvy-donuts-build.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes SSR CSS ordering to match static mode
diff --git a/packages/astro/src/core/build/vite-plugin-ssr.ts b/packages/astro/src/core/build/vite-plugin-ssr.ts
index e7fbfd995..7e373d0ea 100644
--- a/packages/astro/src/core/build/vite-plugin-ssr.ts
+++ b/packages/astro/src/core/build/vite-plugin-ssr.ts
@@ -139,7 +139,7 @@ function buildManifest(
 
 		routes.push({
 			file: '',
-			links: Array.from(pageData.css),
+			links: Array.from(pageData.css).reverse(),
 			scripts: [
 				...scripts,
 				...astroConfig._ctx.scripts
diff --git a/packages/astro/test/css-order.test.js b/packages/astro/test/css-order.test.js
new file mode 100644
index 000000000..82370af2b
--- /dev/null
+++ b/packages/astro/test/css-order.test.js
@@ -0,0 +1,57 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+import testAdapter from './test-adapter.js';
+
+describe('CSS production ordering', () => {
+	let staticHTML, serverHTML;
+	let staticCSS, serverCSS;
+
+	const commonConfig = Object.freeze({
+		root: './fixtures/css-order/',
+	});
+
+	function getLinks(html) {
+		let $ = cheerio.load(html);
+		let out = [];
+		$('link[rel=stylesheet]').each((i, el) => {
+			out.push($(el).attr('href'))
+		});
+		return out;
+	}
+
+	before(async () => {
+		let fixture = await loadFixture({ ...commonConfig });
+		await fixture.build();
+		staticHTML = await fixture.readFile('/one/index.html');
+		staticCSS = await Promise.all(getLinks(staticHTML).map(async (href) => {
+			const css = await fixture.readFile(href);
+			return { href, css };
+		}));
+	});
+
+	before(async () => {
+		let fixture = await loadFixture({
+			...commonConfig,
+			adapter: testAdapter(),
+			output: 'server',
+		});
+		await fixture.build();
+
+		const app = await fixture.loadTestAdapterApp();
+		const request = new Request('http://example.com/one');
+		const response = await app.render(request);
+		serverHTML = await response.text();
+		serverCSS = await Promise.all(getLinks(serverHTML).map(async (href) => {
+			const css = await fixture.readFile(`/client${href}`);
+			return { href, css };
+		}));
+	});
+
+	it('is in the same order for output: server and static', async () => {
+		const staticContent = staticCSS.map(o => o.css);
+		const serverContent = serverCSS.map(o => o.css);
+
+		expect(staticContent).to.deep.equal(serverContent);
+	});
+});
diff --git a/packages/astro/test/fixtures/css-order/package.json b/packages/astro/test/fixtures/css-order/package.json
new file mode 100644
index 000000000..cf8074efe
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@test/css-order",
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/css-order/src/components/CommonHead.astro b/packages/astro/test/fixtures/css-order/src/components/CommonHead.astro
new file mode 100644
index 000000000..8341c981c
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order/src/components/CommonHead.astro
@@ -0,0 +1,5 @@
+<style is:global>
+	body {
+		color: red;
+	}
+</style>
diff --git a/packages/astro/test/fixtures/css-order/src/pages/one.astro b/packages/astro/test/fixtures/css-order/src/pages/one.astro
new file mode 100644
index 000000000..6bd665de8
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order/src/pages/one.astro
@@ -0,0 +1,17 @@
+---
+import CommonHead from '../components/CommonHead.astro';
+---
+<html>
+	<head>
+		<title>Testing</title>
+		<CommonHead />
+		<style>
+			body {
+				margin: 1px;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>Testing</h1>
+	</body>
+</html>
diff --git a/packages/astro/test/fixtures/css-order/src/pages/two.astro b/packages/astro/test/fixtures/css-order/src/pages/two.astro
new file mode 100644
index 000000000..46d899bed
--- /dev/null
+++ b/packages/astro/test/fixtures/css-order/src/pages/two.astro
@@ -0,0 +1,17 @@
+---
+import CommonHead from '../components/CommonHead.astro';
+---
+<html>
+	<head>
+		<title>Testing</title>
+		<CommonHead />
+		<style>
+			body {
+				margin: 2px;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>Testing</h1>
+	</body>
+</html>
diff --git a/packages/astro/test/ssr-response.test.js b/packages/astro/test/ssr-response.test.js
index f5e311636..2044c513c 100644
--- a/packages/astro/test/ssr-response.test.js
+++ b/packages/astro/test/ssr-response.test.js
@@ -1,5 +1,4 @@
 import { expect } from 'chai';
-import { load as cheerioLoad } from 'cheerio';
 import { loadFixture } from './test-utils.js';
 import testAdapter from './test-adapter.js';
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c88dfca80..a199f91ec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1462,6 +1462,12 @@ importers:
   packages/astro/test/fixtures/css-assets/packages/font-awesome:
     specifiers: {}
 
+  packages/astro/test/fixtures/css-order:
+    specifiers:
+      astro: workspace:*
+    dependencies:
+      astro: link:../../..
+
   packages/astro/test/fixtures/custom-404:
     specifiers:
       astro: workspace:*