Fix loading of styles in static build (#2605)

* Fix loading of styles in static build

* Adds a changeset

.changeset/fuzzy-drinks-drop.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes Astro style resolution in the static build

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];

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;

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\)/);