From 87762410f3c2b887e049422d61a17e9c0fdabd88 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Thu, 17 Feb 2022 10:32:24 -0500
Subject: [PATCH] Fix loading of styles in static build (#2605)

* Fix loading of styles in static build

* Adds a changeset
---
 .changeset/fuzzy-drinks-drop.md               |  5 +++++
 packages/astro/src/core/path.ts               |  4 ++++
 packages/astro/src/vite-plugin-astro/index.ts | 15 ++++++++++-----
 packages/astro/test/static-build.test.js      |  9 +++++++++
 4 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/fuzzy-drinks-drop.md

diff --git a/.changeset/fuzzy-drinks-drop.md b/.changeset/fuzzy-drinks-drop.md
new file mode 100644
index 000000000..5c59ae267
--- /dev/null
+++ b/.changeset/fuzzy-drinks-drop.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes Astro style resolution in the static build
diff --git a/packages/astro/src/core/path.ts b/packages/astro/src/core/path.ts
index 9f66baf28..16945d960 100644
--- a/packages/astro/src/core/path.ts
+++ b/packages/astro/src/core/path.ts
@@ -10,6 +10,10 @@ export function removeEndingForwardSlash(path: string) {
 	return path.endsWith('/') ? path.slice(0, path.length - 1) : path;
 }
 
+export function startsWithForwardSlash(path: string) {
+	return path[0] === '/';
+}
+
 export function startsWithDotDotSlash(path: string) {
 	const c1 = path[0];
 	const c2 = path[1];
diff --git a/packages/astro/src/vite-plugin-astro/index.ts b/packages/astro/src/vite-plugin-astro/index.ts
index e96006735..c6818c5ee 100644
--- a/packages/astro/src/vite-plugin-astro/index.ts
+++ b/packages/astro/src/vite-plugin-astro/index.ts
@@ -11,7 +11,7 @@ import { parseAstroRequest } from './query.js';
 import { cachedCompilation } from './compile.js';
 import ancestor from 'common-ancestor-path';
 import { trackCSSDependencies, handleHotUpdate } from './hmr.js';
-import { isRelativePath } from '../core/path.js';
+import { isRelativePath, startsWithForwardSlash } from '../core/path.js';
 
 const FRONTMATTER_PARSE_REGEXP = /^\-\-\-(.*)^\-\-\-/ms;
 interface AstroPluginOptions {
@@ -29,6 +29,11 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 		}
 		return filename;
 	}
+	function relativeToRoot(pathname: string) {
+		const arg = startsWithForwardSlash(pathname) ? '.' + pathname : pathname;
+		const url = new URL(arg, config.projectRoot);
+		return slash(fileURLToPath(url)) + url.search;
+	}
 
 	let viteTransform: TransformHook;
 	let viteDevServer: vite.ViteDevServer | null = null;
@@ -52,13 +57,13 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 			// we need to resolve relative paths ourselves.
 			if (from) {
 				const { query: fromQuery, filename } = parseAstroRequest(from);
-				if (fromQuery.astro && isRelativePath(id)) {
+				if (fromQuery.astro && isRelativePath(id) && fromQuery.type === 'script') {
 					const resolvedURL = new URL(id, `file://${filename}`);
 					const resolved = resolvedURL.pathname;
 					if (isBrowserPath(resolved)) {
-						return slash(fileURLToPath(new URL('.' + resolved, config.projectRoot)));
+						return relativeToRoot(resolved + resolvedURL.search);
 					}
-					return slash(fileURLToPath(resolvedURL));
+					return slash(fileURLToPath(resolvedURL)) + resolvedURL.search;
 				}
 			}
 
@@ -69,7 +74,7 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 				// Because this needs to be the id for the Vite CSS plugin to property resolve
 				// relative @imports.
 				if (query.type === 'style' && isBrowserPath(id)) {
-					return slash(fileURLToPath(new URL('.' + id, config.projectRoot)));
+					return relativeToRoot(id);
 				}
 
 				return id;
diff --git a/packages/astro/test/static-build.test.js b/packages/astro/test/static-build.test.js
index 45a125f9b..bb903e968 100644
--- a/packages/astro/test/static-build.test.js
+++ b/packages/astro/test/static-build.test.js
@@ -91,6 +91,15 @@ describe('Static build', () => {
 		};
 	}
 
+	describe('Page CSS', () => {
+		const findEvidence = createFindEvidence(/height:( )*45vw/);
+
+		it('Page level CSS is added', async () => {
+			const found = await findEvidence('/subpath/index.html');
+			expect(found).to.equal(true, 'Did not find page-level CSS on this page');
+		});
+	});
+
 	describe('Shared CSS', () => {
 		const findEvidence = createFindEvidence(/var\(--c\)/);