Add a warning when passing the --experimental-static-build flag

* feat: add renderHead util to server

* feat: remove `layouts` from config, Vite plugin

* fix: improve head injection during rendering

* chore: update compiler

* fix: do not escape links

.changeset/modern-elephants-burn.md

@@ -0,0 +1,19 @@
+---
+'astro': minor
+---
+
+New default build strategy
+
+This change marks the "static build" as the new default build strategy. If you are unfamiliar with this build strategy check out the [migration guide](https://docs.astro.build/en/migrate/#planned-deprecations) on how to change your code to be compatible with this new bulid strategy.
+
+If you'd like to keep using the old build strategy, use the flag `--legacy-build` both in your `astro dev` and `astro build` scripts, for ex:
+
+```json
+{
+  "scripts": {
+    "build": "astro build --legacy-build"
+  }
+}
+```
+
+Note that the legacy build *is* deprecated and will be removed in a future version. You should only use this flag until you have the time to migration your code.

.changeset/pre.json

@@ -0,0 +1,52 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@example/blog": "0.0.1",
+    "@example/blog-multiple-authors": "0.0.1",
+    "@example/component": "0.0.1",
+    "@example/my-component-demo": "0.0.1",
+    "@example/my-component": "0.0.1",
+    "@example/docs": "0.0.1",
+    "@example/env-vars": "0.0.1",
+    "@example/fast-build": "0.0.1",
+    "@example/framework-alpine": "0.0.1",
+    "@example/framework-lit": "0.0.1",
+    "@example/framework-multiple": "0.0.1",
+    "@example/framework-preact": "0.0.1",
+    "@example/framework-react": "0.0.1",
+    "@example/framework-solid": "0.0.1",
+    "@example/framework-svelte": "0.0.1",
+    "@example/framework-vue": "0.0.1",
+    "@example/minimal": "0.0.1",
+    "@example/non-html-pages": "0.0.1",
+    "@example/portfolio": "0.0.1",
+    "@example/portfolio-svelte": "0.0.1",
+    "@example/ssr": "0.0.1",
+    "@example/starter": "0.0.1",
+    "@example/subpath": "0.0.1",
+    "@example/with-markdown": "0.0.1",
+    "@example/with-markdown-plugins": "0.0.2",
+    "@example/with-markdown-shiki": "0.0.1",
+    "@example/with-nanostores": "0.0.1",
+    "@example/with-tailwindcss": "0.0.1",
+    "@example/with-vite-plugin-pwa": "0.0.1",
+    "astro": "0.23.3",
+    "@astrojs/parser": "0.22.1",
+    "@astrojs/prism": "0.4.0",
+    "@astrojs/test-custom-element-renderer": "0.1.0",
+    "@astrojs/test-static-build-pkg": "0.0.3",
+    "create-astro": "0.7.1",
+    "@astrojs/markdown-remark": "0.6.2",
+    "@astrojs/renderer-lit": "0.4.0",
+    "@astrojs/renderer-preact": "0.5.0",
+    "@astrojs/renderer-react": "0.5.0",
+    "@astrojs/renderer-solid": "0.4.0",
+    "@astrojs/renderer-svelte": "0.4.0",
+    "@astrojs/renderer-vue": "0.4.0",
+    "astro-scripts": "0.0.1",
+    "astro.build": "0.0.1",
+    "docs": "0.0.7"
+  },
+  "changesets": []
+}

packages/astro/package.json

@@ -52,11 +52,11 @@
     "dev": "astro-scripts dev \"src/**/*.ts\"",
     "postbuild": "astro-scripts copy \"src/**/*.astro\"",
     "benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js",
-    "test": "mocha --parallel --timeout 15000 --ignore **/lit-element.test.js && mocha **/lit-element.test.js",
-    "test:match": "mocha --timeout 15000 -g"
+    "test": "mocha --parallel --timeout 20000 --ignore **/lit-element.test.js && mocha --timeout 20000 **/lit-element.test.js",
+    "test:match": "mocha --timeout 20000 -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.11.4",
+    "@astrojs/compiler": "^0.12.0-next.8",
     "@astrojs/language-server": "^0.8.6",
     "@astrojs/markdown-remark": "^0.6.2",
     "@astrojs/prism": "0.4.0",

packages/astro/src/@types/astro.ts

@@ -27,8 +27,10 @@ export interface CLIFlags {
 	hostname?: string;
 	port?: number;
 	config?: string;
+	/** @deprecated */
 	experimentalStaticBuild?: boolean;
 	experimentalSsr?: boolean;
+	legacyBuild?: boolean;
 	drafts?: boolean;
 }
 
@@ -129,12 +131,19 @@ export interface AstroUserConfig {
 		 */
 		drafts?: boolean;
 		/**
-		 * Experimental: Enables "static build mode" for faster builds.
+		 * Enables "legacy build mode" for compatibility with older Astro versions.
 		 * Default: false
 		 */
+		legacyBuild?: boolean;
+		/**
+		 * @deprecated
+		 * Experimental: Enables "static build mode" for faster builds.
+		 * Default: true
+		 */
 		experimentalStaticBuild?: boolean;
 		/**
 		 * Enable a build for SSR support.
+		 * Default: false
 		 */
 		experimentalSsr?: boolean;
 	};
@@ -294,17 +303,6 @@ export type Params = Record<string, string | undefined>;
 
 export type Props = Record<string, unknown>;
 
-export interface RenderPageOptions {
-	request: {
-		params?: Params;
-		url: URL;
-		canonicalURL: URL;
-	};
-	children: any[];
-	props: Props;
-	css?: string[];
-}
-
 type Body = string;
 
 export interface EndpointOutput<Output extends Body = Body> {
@@ -422,7 +420,7 @@ export interface SSRElement {
 export interface SSRMetadata {
 	renderers: Renderer[];
 	pathname: string;
-	experimentalStaticBuild: boolean;
+	legacyBuild: boolean;
 }
 
 export interface SSRResult {

packages/astro/src/core/app/index.ts

@@ -46,7 +46,7 @@ export class App {
 		const scripts = createModuleScriptElementWithSrcSet(info.scripts, manifest.site);
 
 		return render({
-			experimentalStaticBuild: true,
+			legacyBuild: false,
 			links,
 			logging: defaultLogOptions,
 			markdownRender: manifest.markdown.render,

packages/astro/src/core/build/index.ts

@@ -110,7 +110,7 @@ class AstroBuilder {
 		timer.buildStart = performance.now();
 
 		// Use the new faster static based build.
-		if (this.config.buildOptions.experimentalStaticBuild) {
+		if (!this.config.buildOptions.legacyBuild) {
 			await staticBuild({
 				allPages,
 				astroConfig: this.config,

packages/astro/src/core/build/static-build.ts

@@ -38,8 +38,7 @@ export interface StaticBuildOptions {
 const MAX_CONCURRENT_RENDERS = 10;
 
 function addPageName(pathname: string, opts: StaticBuildOptions): void {
-	const pathrepl = opts.astroConfig.buildOptions.pageUrlFormat === 'directory' ? '/index.html' : pathname === '/' ? 'index.html' : '.html';
-	opts.pageNames.push(pathname.replace(/\/?$/, pathrepl).replace(/^\//, ''));
+	opts.pageNames.push(pathname.replace(/\/?$/, '/').replace(/^\//, ''));
 }
 
 // Gives back a facadeId that is relative to the root.
@@ -130,6 +129,8 @@ export async function staticBuild(opts: StaticBuildOptions) {
 			const topLevelImports = new Set([
 				// Any component that gets hydrated
 				...metadata.hydratedComponentPaths(),
+				// Client-only components
+				...metadata.clientOnlyComponentPaths(),
 				// Any hydration directive like astro/client/idle.js
 				...metadata.hydrationDirectiveSpecifiers(),
 				// The client path for each renderer
@@ -181,6 +182,7 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp
 		logLevel: 'error',
 		mode: 'production',
 		build: {
+			...viteConfig.build,
 			emptyOutDir: false,
 			manifest: ssr,
 			minify: false,
@@ -359,12 +361,12 @@ async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: G
 	debug('build', `Generating: ${pathname}`);
 
 	const site = astroConfig.buildOptions.site;
-	const links = createLinkStylesheetElementSet(linkIds, site);
+	const links = createLinkStylesheetElementSet(linkIds.reverse(), site);
 	const scripts = createModuleScriptElementWithSrcSet(hoistedId ? [hoistedId] : [], site);
 
 	try {
 		const html = await render({
-			experimentalStaticBuild: true,
+			legacyBuild: false,
 			links,
 			logging,
 			markdownRender: astroConfig.markdownOptions.render,
@@ -453,8 +455,7 @@ async function generateManifest(result: RollupOutput, opts: StaticBuildOptions,
 }
 
 function getOutRoot(astroConfig: AstroConfig): URL {
-	const rootPathname = appendForwardSlash(astroConfig.buildOptions.site ? new URL(astroConfig.buildOptions.site).pathname : '/');
-	return new URL('.' + rootPathname, astroConfig.dist);
+	return new URL('./', astroConfig.dist);
 }
 
 function getServerRoot(astroConfig: AstroConfig): URL {
@@ -480,8 +481,10 @@ function getOutFolder(astroConfig: AstroConfig, pathname: string, routeType: Rou
 			switch (astroConfig.buildOptions.pageUrlFormat) {
 				case 'directory':
 					return new URL('.' + appendForwardSlash(pathname), outRoot);
-				case 'file':
+				case 'file': {
 					return new URL('.' + appendForwardSlash(npath.dirname(pathname)), outRoot);
+				}
+					
 			}
 	}
 }
@@ -494,8 +497,10 @@ function getOutFile(astroConfig: AstroConfig, outFolder: URL, pathname: string,
 			switch (astroConfig.buildOptions.pageUrlFormat) {
 				case 'directory':
 					return new URL('./index.html', outFolder);
-				case 'file':
-					return new URL('./' + npath.basename(pathname) + '.html', outFolder);
+				case 'file': {
+					const baseName = npath.basename(pathname);
+					return new URL('./' + (baseName || 'index') + '.html', outFolder);
+				}
 			}
 	}
 }

packages/astro/src/core/config.ts

@@ -26,11 +26,6 @@ export const AstroConfigSchema = z.object({
 		.optional()
 		.default('./src/pages')
 		.transform((val) => new URL(val)),
-	layouts: z
-		.string()
-		.optional()
-		.default('./src/layouts')
-		.transform((val) => new URL(val)),
 	public: z
 		.string()
 		.optional()
@@ -62,7 +57,8 @@ export const AstroConfigSchema = z.object({
 				.union([z.literal('file'), z.literal('directory')])
 				.optional()
 				.default('directory'),
-			experimentalStaticBuild: z.boolean().optional().default(false),
+			legacyBuild: z.boolean().optional().default(false),
+			experimentalStaticBuild: z.boolean().optional().default(true),
 			experimentalSsr: z.boolean().optional().default(false),
 			drafts: z.boolean().optional().default(false),
 		})
@@ -100,10 +96,6 @@ export async function validateConfig(userConfig: any, root: string): Promise<Ast
 			.string()
 			.default('./src/pages')
 			.transform((val) => new URL(addTrailingSlash(val), fileProtocolRoot)),
-		layouts: z
-			.string()
-			.default('./src/layouts')
-			.transform((val) => new URL(addTrailingSlash(val), fileProtocolRoot)),
 		public: z
 			.string()
 			.default('./public')
@@ -123,6 +115,10 @@ function addTrailingSlash(str: string): string {
 
 /** Convert the generic "yargs" flag object into our own, custom TypeScript object. */
 function resolveFlags(flags: Partial<Flags>): CLIFlags {
+	if(flags.experimentalStaticBuild) {
+		console.warn(`Passing --experimental-static-build is no longer necessary and is now the default. The flag will be removed in a future version of Astro.`)
+	}
+
 	return {
 		projectRoot: typeof flags.projectRoot === 'string' ? flags.projectRoot : undefined,
 		site: typeof flags.site === 'string' ? flags.site : undefined,
@@ -130,7 +126,8 @@ function resolveFlags(flags: Partial<Flags>): CLIFlags {
 		port: typeof flags.port === 'number' ? flags.port : undefined,
 		config: typeof flags.config === 'string' ? flags.config : undefined,
 		hostname: typeof flags.hostname === 'string' ? flags.hostname : undefined,
-		experimentalStaticBuild: typeof flags.experimentalStaticBuild === 'boolean' ? flags.experimentalStaticBuild : false,
+		legacyBuild: typeof flags.legacyBuild === 'boolean' ? flags.legacyBuild : false,
+		experimentalStaticBuild: typeof flags.experimentalStaticBuild === 'boolean' ? flags.experimentalStaticBuild : true,
 		experimentalSsr: typeof flags.experimentalSsr === 'boolean' ? flags.experimentalSsr : false,
 		drafts: typeof flags.drafts === 'boolean' ? flags.drafts : false,
 	};
@@ -149,6 +146,7 @@ function mergeCLIFlags(astroConfig: AstroUserConfig, flags: CLIFlags) {
 		astroConfig.buildOptions.experimentalSsr = flags.experimentalSsr;
 		if (flags.experimentalSsr) {
 			astroConfig.buildOptions.experimentalStaticBuild = true;
+			astroConfig.buildOptions.legacyBuild = false;
 		}
 	}
 	if (typeof flags.drafts === 'boolean') astroConfig.buildOptions.drafts = flags.drafts;

packages/astro/src/core/render/core.ts

@@ -1,7 +1,7 @@
 import type { ComponentInstance, EndpointHandler, MarkdownRenderOptions, Params, Props, Renderer, RouteData, SSRElement } from '../../@types/astro';
 import type { LogOptions } from '../logger.js';
 
-import { renderEndpoint, renderPage } from '../../runtime/server/index.js';
+import { renderEndpoint, renderHead, renderToString } from '../../runtime/server/index.js';
 import { getParams } from '../routing/index.js';
 import { createResult } from './result.js';
 import { findPathItemByKey, RouteCache, callGetStaticPaths } from './route-cache.js';
@@ -47,7 +47,7 @@ async function getParamsAndProps(opts: GetParamsAndPropsOptions): Promise<[Param
 }
 
 interface RenderOptions {
-	experimentalStaticBuild: boolean;
+	legacyBuild: boolean;
 	logging: LogOptions;
 	links: Set<SSRElement>;
 	markdownRender: MarkdownRenderOptions;
@@ -63,7 +63,7 @@ interface RenderOptions {
 }
 
 export async function render(opts: RenderOptions): Promise<string> {
-	const { experimentalStaticBuild, links, logging, origin, markdownRender, mod, pathname, scripts, renderers, resolve, route, routeCache, site } = opts;
+	const { legacyBuild, links, logging, origin, markdownRender, mod, pathname, scripts, renderers, resolve, route, routeCache, site } = opts;
 
 	const [params, pageProps] = await getParamsAndProps({
 		logging,
@@ -84,7 +84,7 @@ export async function render(opts: RenderOptions): Promise<string> {
 	if (!Component.isAstroComponentFactory) throw new Error(`Unable to SSR non-Astro component (${route?.component})`);
 
 	const result = createResult({
-		experimentalStaticBuild,
+		legacyBuild,
 		links,
 		logging,
 		markdownRender,
@@ -97,10 +97,17 @@ export async function render(opts: RenderOptions): Promise<string> {
 		scripts,
 	});
 
-	let html = await renderPage(result, Component, pageProps, null);
+	let html = await renderToString(result, Component, pageProps, null);
+
+	// handle final head injection if it hasn't happened already
+	if (html.indexOf("<!--astro:head:injected-->") == -1) {
+		html = await renderHead(result) + html;
+	}
+	// cleanup internal state flags
+	html = html.replace("<!--astro:head:injected-->", '');
 
 	// inject <!doctype html> if missing (TODO: is a more robust check needed for comments, etc.?)
-	if (experimentalStaticBuild && !/<!doctype html/i.test(html)) {
+	if (!legacyBuild && !/<!doctype html/i.test(html)) {
 		html = '<!DOCTYPE html>\n' + html;
 	}
 

packages/astro/src/core/render/dev/index.ts

@@ -1,5 +1,5 @@
 import type * as vite from 'vite';
-import type { AstroConfig, ComponentInstance, Renderer, RouteData, RuntimeMode } from '../../../@types/astro';
+import type { AstroConfig, ComponentInstance, Renderer, RouteData, RuntimeMode, SSRElement } from '../../../@types/astro';
 import { LogOptions } from '../../logger.js';
 import { fileURLToPath } from 'url';
 import { getStylesForURL } from './css.js';
@@ -48,14 +48,15 @@ export async function preload({ astroConfig, filePath, viteServer }: SSROptions)
 /** use Vite to SSR */
 export async function render(renderers: Renderer[], mod: ComponentInstance, ssrOpts: SSROptions): Promise<string> {
 	const { astroConfig, filePath, logging, mode, origin, pathname, route, routeCache, viteServer } = ssrOpts;
+	const legacy = astroConfig.buildOptions.legacyBuild;
 
 	// Add hoisted script tags
 	const scripts = createModuleScriptElementWithSrcSet(
-		astroConfig.buildOptions.experimentalStaticBuild && mod.hasOwnProperty('$$metadata') ? Array.from(mod.$$metadata.hoistedScriptPaths()) : []
+		!legacy && mod.hasOwnProperty('$$metadata') ? Array.from(mod.$$metadata.hoistedScriptPaths()) : []
 	);
 
 	// Inject HMR scripts
-	if (mod.hasOwnProperty('$$metadata') && mode === 'development' && astroConfig.buildOptions.experimentalStaticBuild) {
+	if (mod.hasOwnProperty('$$metadata') && mode === 'development' && !legacy) {
 		scripts.add({
 			props: { type: 'module', src: '/@vite/client' },
 			children: '',
@@ -66,9 +67,31 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
 		});
 	}
 
+	// Pass framework CSS in as link tags to be appended to the page.
+	let links = new Set<SSRElement>();
+	if(!legacy) {
+		[...getStylesForURL(filePath, viteServer)].forEach((href) => {
+			if (mode === 'development' && svelteStylesRE.test(href)) {
+				scripts.add({
+					props: { type: 'module', src: href },
+					children: '',
+				});
+			} else {
+				links.add({
+					props: {
+						rel: 'stylesheet',
+						href,
+						'data-astro-injected': true,
+					},
+					children: '',
+				});
+			}
+		});
+	}
+
 	let content = await coreRender({
-		experimentalStaticBuild: astroConfig.buildOptions.experimentalStaticBuild,
-		links: new Set(),
+		legacyBuild: astroConfig.buildOptions.legacyBuild,
+		links,
 		logging,
 		markdownRender: astroConfig.markdownOptions.render,
 		mod,
@@ -80,7 +103,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
 			// The legacy build needs these to remain unresolved so that vite HTML
 			// Can do the resolution. Without this condition the build output will be
 			// broken in the legacy build. This can be removed once the legacy build is removed.
-			if (astroConfig.buildOptions.experimentalStaticBuild) {
+			if (!astroConfig.buildOptions.legacyBuild) {
 				const [, resolvedPath] = await viteServer.moduleGraph.resolveUrl(s);
 				return resolvedPath;
 			} else {
@@ -101,7 +124,7 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
 	const tags: vite.HtmlTagDescriptor[] = [];
 
 	// dev only: inject Astro HMR client
-	if (mode === 'development' && !astroConfig.buildOptions.experimentalStaticBuild) {
+	if (mode === 'development' && legacy) {
 		tags.push({
 			tag: 'script',
 			attrs: { type: 'module' },
@@ -113,31 +136,34 @@ export async function render(renderers: Renderer[], mod: ComponentInstance, ssrO
 	}
 
 	// inject CSS
-	[...getStylesForURL(filePath, viteServer)].forEach((href) => {
-		if (mode === 'development' && svelteStylesRE.test(href)) {
-			tags.push({
-				tag: 'script',
-				attrs: { type: 'module', src: href },
-				injectTo: 'head',
-			});
-		} else {
-			tags.push({
-				tag: 'link',
-				attrs: {
-					rel: 'stylesheet',
-					href,
-					'data-astro-injected': true,
-				},
-				injectTo: 'head',
-			});
-		}
-	});
+	if(legacy) {
+		[...getStylesForURL(filePath, viteServer)].forEach((href) => {
+			if (mode === 'development' && svelteStylesRE.test(href)) {
+				tags.push({
+					tag: 'script',
+					attrs: { type: 'module', src: href },
+					injectTo: 'head',
+				});
+			} else {
+				tags.push({
+					tag: 'link',
+					attrs: {
+						rel: 'stylesheet',
+						href,
+						'data-astro-injected': true,
+					},
+					injectTo: 'head',
+				});
+			}
+		});
+	}
+
 
 	// add injected tags
 	content = injectTags(content, tags);
 
 	// run transformIndexHtml() in dev to run Vite dev transformations
-	if (mode === 'development' && !astroConfig.buildOptions.experimentalStaticBuild) {
+	if (mode === 'development' && astroConfig.buildOptions.legacyBuild) {
 		const relativeURL = filePath.href.replace(astroConfig.projectRoot.href, '/');
 		content = await viteServer.transformIndexHtml(relativeURL, content, pathname);
 	}

packages/astro/src/core/render/result.ts

@@ -8,7 +8,7 @@ import { renderSlot } from '../../runtime/server/index.js';
 import { warn, LogOptions } from '../logger.js';
 
 export interface CreateResultArgs {
-	experimentalStaticBuild: boolean;
+	legacyBuild: boolean;
 	logging: LogOptions;
 	origin: string;
 	markdownRender: MarkdownRenderOptions;
@@ -22,7 +22,7 @@ export interface CreateResultArgs {
 }
 
 export function createResult(args: CreateResultArgs): SSRResult {
-	const { experimentalStaticBuild, origin, markdownRender, params, pathname, renderers, resolve, site: buildOptionsSite } = args;
+	const { legacyBuild, origin, markdownRender, params, pathname, renderers, resolve, site: buildOptionsSite } = args;
 
 	// Create the result object that will be passed into the render function.
 	// This object starts here as an empty shell (not yet the result) but then
@@ -45,7 +45,7 @@ export function createResult(args: CreateResultArgs): SSRResult {
 					url,
 				},
 				resolve(path: string) {
-					if (experimentalStaticBuild) {
+					if (!legacyBuild) {
 						let extra = `This can be replaced with a dynamic import like so: await import("${path}")`;
 						if (isCSSRequest(path)) {
 							extra = `It looks like you are resolving styles. If you are adding a link tag, replace with this:
@@ -116,7 +116,7 @@ ${extra}`
 		_metadata: {
 			renderers,
 			pathname,
-			experimentalStaticBuild,
+			legacyBuild
 		},
 	};
 

packages/astro/src/core/render/sitemap.ts

@@ -3,7 +3,6 @@ const STATUS_CODE_PAGE_REGEXP = /\/[0-9]{3}\/?$/;
 /** Construct sitemap.xml given a set of URLs */
 export function generateSitemap(pages: string[]): string {
 	// TODO: find way to respect <link rel="canonical"> URLs here
-
 	// TODO: find way to exclude pages from sitemap
 
 	// copy just in case original copy is needed

packages/astro/src/core/routing/manifest/create.ts

@@ -216,7 +216,7 @@ export function createRouteManifest({ config, cwd }: { config: AstroConfig; cwd?
 				basename,
 				ext,
 				parts,
-				file: slash(file),
+				file: file.replace(/\\/g, '/'),
 				isDir,
 				isIndex,
 				isPage,

packages/astro/src/runtime/server/index.ts

@@ -71,7 +71,7 @@ export class AstroComponent {
 			const html = htmlParts[i];
 			const expression = expressions[i];
 
-			yield _render(unescapeHTML(html));
+			yield unescapeHTML(html);
 			yield _render(expression);
 		}
 	}
@@ -337,12 +337,14 @@ export function createAstro(filePathname: string, _site: string, projectRootStr:
 	};
 }
 
-const toAttributeString = (value: any) => String(value).replace(/&/g, '&').replace(/"/g, '"');
+const toAttributeString = (value: any, shouldEscape = true) => shouldEscape ?
+	String(value).replace(/&/g, '&').replace(/"/g, '"') :
+	value;
 
 const STATIC_DIRECTIVES = new Set(['set:html', 'set:text']);
 
 // A helper used to turn expressions into attribute key/value
-export function addAttribute(value: any, key: string) {
+export function addAttribute(value: any, key: string, shouldEscape = true) {
 	if (value == null) {
 		return '';
 	}
@@ -372,15 +374,15 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
 	if (value === true && (key.startsWith('data-') || htmlBooleanAttributes.test(key))) {
 		return unescapeHTML(` ${key}`);
 	} else {
-		return unescapeHTML(` ${key}="${toAttributeString(value)}"`);
+		return unescapeHTML(` ${key}="${toAttributeString(value, shouldEscape)}"`);
 	}
 }
 
 // Adds support for `<Component {...value} />
-export function spreadAttributes(values: Record<any, any>) {
+export function spreadAttributes(values: Record<any, any>, shouldEscape = true) {
 	let output = '';
 	for (const [key, value] of Object.entries(values)) {
-		output += addAttribute(value, key);
+		output += addAttribute(value, key, shouldEscape);
 	}
 	return unescapeHTML(output);
 }
@@ -403,20 +405,6 @@ export function defineScriptVars(vars: Record<any, any>) {
 	return output;
 }
 
-// Calls a component and renders it into a string of HTML
-export async function renderToString(result: SSRResult, componentFactory: AstroComponentFactory, props: any, children: any) {
-	const Component = await componentFactory(result, props, children);
-	let template = await renderAstroComponent(Component);
-	return unescapeHTML(template);
-}
-
-// Filter out duplicate elements in our set
-const uniqueElements = (item: any, index: number, all: any[]) => {
-	const props = JSON.stringify(item.props);
-	const children = item.children;
-	return index === all.findIndex((i) => JSON.stringify(i.props) === props && i.children == children);
-};
-
 // Renders an endpoint request to completion, returning the body.
 export async function renderEndpoint(mod: EndpointHandler, params: any) {
 	const method = 'get';
@@ -431,15 +419,34 @@ export async function renderEndpoint(mod: EndpointHandler, params: any) {
 	return body;
 }
 
+// Calls a component and renders it into a string of HTML
+export async function renderToString(result: SSRResult, componentFactory: AstroComponentFactory, props: any, children: any) {
+	const Component = await componentFactory(result, props, children);
+	let template = await renderAstroComponent(Component);
+
+	// <!--astro:head--> injected by compiler
+	// Must be handled at the end of the rendering process
+	if (template.indexOf('<!--astro:head-->') > -1) {
+		template = template.replace('<!--astro:head-->', await renderHead(result));
+	}
+	return template;
+}
+
+// Filter out duplicate elements in our set
+const uniqueElements = (item: any, index: number, all: any[]) => {
+	const props = JSON.stringify(item.props);
+	const children = item.children;
+	return index === all.findIndex((i) => JSON.stringify(i.props) === props && i.children == children);
+};
+
+
 // Renders a page to completion by first calling the factory callback, waiting for its result, and then appending
 // styles and scripts into the head.
-export async function renderPage(result: SSRResult, Component: AstroComponentFactory, props: any, children: any) {
-	const template = await renderToString(result, Component, props, children);
+export async function renderHead(result: SSRResult) {
 	const styles = Array.from(result.styles)
 		.filter(uniqueElements)
 		.map((style) => {
-			const styleChildren = result._metadata.experimentalStaticBuild ? '' : style.children;
-
+			const styleChildren = !result._metadata.legacyBuild ? '' : style.children;
 			return renderElement('style', {
 				children: styleChildren,
 				props: { ...style.props, 'astro-style': true },
@@ -460,17 +467,10 @@ export async function renderPage(result: SSRResult, Component: AstroComponentFac
 	if (needsHydrationStyles) {
 		styles.push(renderElement('style', { props: { 'astro-style': true }, children: 'astro-root, astro-fragment { display: contents; }' }));
 	}
-
 	const links = Array.from(result.links)
 		.filter(uniqueElements)
-		.map((link) => renderElement('link', link));
-
-	// inject styles & scripts at end of <head>
-	let headPos = template.indexOf('</head>');
-	if (headPos === -1) {
-		return links.join('\n') + styles.join('\n') + scripts.join('\n') + template; // if no </head>, prepend styles & scripts
-	}
-	return template.substring(0, headPos) + links.join('\n') + styles.join('\n') + scripts.join('\n') + template.substring(headPos);
+		.map((link) => renderElement('link', link, false));
+	return unescapeHTML(links.join('\n') + styles.join('\n') + scripts.join('\n') + '\n' + '<!--astro:head:injected-->');
 }
 
 export async function renderAstroComponent(component: InstanceType<typeof AstroComponent>) {
@@ -513,7 +513,7 @@ function getHTMLElementName(constructor: typeof HTMLElement) {
 	return assignedName;
 }
 
-function renderElement(name: string, { props: _props, children = '' }: SSRElement) {
+function renderElement(name: string, { props: _props, children = '' }: SSRElement, shouldEscape = true) {
 	// Do not print `hoist`, `lang`, `global`
 	const { lang: _, 'data-astro-id': astroId, 'define:vars': defineVars, ...props } = _props;
 	if (defineVars) {
@@ -530,5 +530,5 @@ function renderElement(name: string, { props: _props, children = '' }: SSRElemen
 			children = defineScriptVars(defineVars) + '\n' + children;
 		}
 	}
-	return `<${name}${spreadAttributes(props)}>${children}</${name}>`;
+	return `<${name}${spreadAttributes(props, shouldEscape)}>${children}</${name}>`;
 }

packages/astro/src/runtime/server/metadata.ts

@@ -13,6 +13,7 @@ interface ComponentMetadata {
 interface CreateMetadataOptions {
 	modules: ModuleInfo[];
 	hydratedComponents: any[];
+	clientOnlyComponents: any[];
 	hydrationDirectives: Set<string>;
 	hoisted: any[];
 }
@@ -22,6 +23,7 @@ export class Metadata {
 	public modules: ModuleInfo[];
 	public hoisted: any[];
 	public hydratedComponents: any[];
+	public clientOnlyComponents: any[];
 	public hydrationDirectives: Set<string>;
 
 	private metadataCache: Map<any, ComponentMetadata | null>;
@@ -30,6 +32,7 @@ export class Metadata {
 		this.modules = opts.modules;
 		this.hoisted = opts.hoisted;
 		this.hydratedComponents = opts.hydratedComponents;
+		this.clientOnlyComponents = opts.clientOnlyComponents;
 		this.hydrationDirectives = opts.hydrationDirectives;
 		this.mockURL = new URL(filePathname, 'http://example.com');
 		this.metadataCache = new Map<any, ComponentMetadata | null>();
@@ -66,6 +69,19 @@ export class Metadata {
 		}
 	}
 
+	*clientOnlyComponentPaths() {
+		const found = new Set<string>();
+		for (const metadata of this.deepMetadata()) {
+			for (const component of metadata.clientOnlyComponents) {
+				const path = metadata.resolvePath(component);
+				if (path && !found.has(path)) {
+					found.add(path);
+					yield path;
+				}
+			}
+		}
+	}
+
 	/**
 	 * Gets all of the hydration specifiers used within this component.
 	 */

packages/astro/src/vite-plugin-astro/compile.ts

@@ -33,11 +33,8 @@ function safelyReplaceImportPlaceholder(code: string) {
 const configCache = new WeakMap<AstroConfig, CompilationCache>();
 
 async function compile(config: AstroConfig, filename: string, source: string, viteTransform: TransformHook, opts: { ssr: boolean }): Promise<CompileResult> {
-	// pages and layouts should be transformed as full documents (implicit <head> <body> etc)
-	// everything else is treated as a fragment
 	const filenameURL = new URL(`file://${filename}`);
 	const normalizedID = fileURLToPath(filenameURL);
-	const isPage = normalizedID.startsWith(fileURLToPath(config.pages)) || normalizedID.startsWith(fileURLToPath(config.layouts));
 	const pathname = filenameURL.pathname.substr(config.projectRoot.pathname.length - 1);
 
 	let rawCSSDeps = new Set<string>();
@@ -47,22 +44,21 @@ async function compile(config: AstroConfig, filename: string, source: string, vi
 	// use `sourcemap: "both"` so that sourcemap is included in the code
 	// result passed to esbuild, but also available in the catch handler.
 	const transformResult = await transform(source, {
-		as: isPage ? 'document' : 'fragment',
 		pathname,
 		projectRoot: config.projectRoot.toString(),
 		site: config.buildOptions.site,
 		sourcefile: filename,
 		sourcemap: 'both',
 		internalURL: 'astro/internal',
-		experimentalStaticExtraction: config.buildOptions.experimentalStaticBuild,
+		experimentalStaticExtraction: !config.buildOptions.legacyBuild,
 		// TODO add experimental flag here
 		preprocessStyle: async (value: string, attrs: Record<string, string>) => {
 			const lang = `.${attrs?.lang || 'css'}`.toLowerCase();
 
 			try {
 				// In the static build, grab any @import as CSS dependencies for HMR.
-				if (config.buildOptions.experimentalStaticBuild) {
-					value = value.replace(/(?:@import)\s(?:url\()?\s?["\'](.*?)["\']\s?\)?(?:[^;]*);?/gi, (match, spec) => {
+				if (!config.buildOptions.legacyBuild) {
+					value.replace(/(?:@import)\s(?:url\()?\s?["\'](.*?)["\']\s?\)?(?:[^;]*);?/gi, (match, spec) => {
 						rawCSSDeps.add(spec);
 						// If the language is CSS: prevent `@import` inlining to prevent scoping of imports.
 						// Otherwise: Sass, etc. need to see imports for variables, so leave in for their compiler to handle.

packages/astro/test/0-css.test.js

@@ -15,6 +15,11 @@ describe('CSS', function () {
 		fixture = await loadFixture({
 			projectRoot: './fixtures/0-css/',
 			renderers: ['@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
+			vite: {
+				build: {
+					assetsInlineLimit: 0
+				}
+			}
 		});
 	});
 
@@ -31,7 +36,7 @@ describe('CSS', function () {
 			// get bundled CSS (will be hashed, hence DOM query)
 			const html = await fixture.readFile('/index.html');
 			$ = cheerio.load(html);
-			const bundledCSSHREF = $('link[rel=stylesheet][href^=./assets/]').attr('href');
+			const bundledCSSHREF = $('link[rel=stylesheet][href^=/assets/]').attr('href');
 			bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
 		});
 
@@ -47,7 +52,8 @@ describe('CSS', function () {
 				expect(el2.attr('class')).to.equal(`visible ${scopedClass}`);
 
 				// 2. check CSS
-				expect(bundledCSS).to.include(`.blue.${scopedClass}{color:#b0e0e6}.color\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`);
+				const expected = `.blue.${scopedClass}{color:#b0e0e6}.color\\\\:blue.${scopedClass}{color:#b0e0e6}.visible.${scopedClass}{display:block}`;
+				expect(bundledCSS).to.include(expected);
 			});
 
 			it('No <style> skips scoping', async () => {
@@ -60,7 +66,8 @@ describe('CSS', function () {
 			});
 
 			it('Using hydrated components adds astro-root styles', async () => {
-				expect(bundledCSS).to.include('display:contents');
+				const inline = $('style').html();
+				expect(inline).to.include('display: contents');
 			});
 
 			it('<style lang="sass">', async () => {
@@ -217,7 +224,7 @@ describe('CSS', function () {
 			it('<style>', async () => {
 				const el = $('#svelte-css');
 				const classes = el.attr('class').split(' ');
-				const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
+				const scopedClass = classes.find((name) => name !== 'svelte-css' && /^svelte-[A-Za-z0-9-]+/.test(name));
 
 				// 1. check HTML
 				expect(el.attr('class')).to.include('svelte-css');
@@ -229,7 +236,7 @@ describe('CSS', function () {
 			it('<style lang="sass">', async () => {
 				const el = $('#svelte-sass');
 				const classes = el.attr('class').split(' ');
-				const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
+				const scopedClass = classes.find((name) => name !== 'svelte-sass' && /^svelte-[A-Za-z0-9-]+/.test(name));
 
 				// 1. check HTML
 				expect(el.attr('class')).to.include('svelte-sass');
@@ -241,7 +248,7 @@ describe('CSS', function () {
 			it('<style lang="scss">', async () => {
 				const el = $('#svelte-scss');
 				const classes = el.attr('class').split(' ');
-				const scopedClass = classes.find((name) => /^s-[A-Za-z0-9-]+/.test(name));
+				const scopedClass = classes.find((name) => name !== 'svelte-scss' && /^svelte-[A-Za-z0-9-]+/.test(name));
 
 				// 1. check HTML
 				expect(el.attr('class')).to.include('svelte-scss');
@@ -272,11 +279,6 @@ describe('CSS', function () {
 			expect((await fixture.fetch(href)).status).to.equal(200);
 		});
 
-		it('resolves CSS in src/', async () => {
-			const href = $('link[href$="linked.css"]').attr('href');
-			expect((await fixture.fetch(href)).status).to.equal(200);
-		});
-
 		// Skipped until upstream fix lands
 		// Our fix: https://github.com/withastro/astro/pull/2106
 		// OG Vite PR: https://github.com/vitejs/vite/pull/5940

packages/astro/test/astro-assets.test.js

@@ -11,7 +11,14 @@ describe('Assets', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-assets/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-assets/',
+			vite: {
+				build: {
+					assetsInlineLimit: 0
+				}
+			}
+		});
 		await fixture.build();
 	});
 
@@ -19,7 +26,7 @@ describe('Assets', () => {
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
 		const imgPath = $('img').attr('src');
-		const data = await fixture.readFile('/' + imgPath);
+		const data = await fixture.readFile( imgPath);
 		expect(!!data).to.equal(true);
 	});
 
@@ -29,7 +36,7 @@ describe('Assets', () => {
 		const srcset = $('img').attr('srcset');
 		const candidates = matchSrcset(srcset);
 		const match = candidates.find((a) => a.density === 2);
-		const data = await fixture.readFile('/' + match.url);
+		const data = await fixture.readFile(match.url);
 		expect(!!data).to.equal(true);
 	});
 
@@ -39,14 +46,14 @@ describe('Assets', () => {
 		const srcset = $('img').attr('srcset');
 		const candidates = matchSrcset(srcset);
 		const match = candidates.find((a) => a.density === 3);
-		const data = await fixture.readFile('/' + match.url);
+		const data = await fixture.readFile(match.url);
 		expect(!!data).to.equal(true);
 	});
 
 	it('built image from an import specifier', async () => {
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
-		const src = '/' + $('#import-no-url').attr('src');
+		const src = $('#import-no-url').attr('src');
 		const data = await fixture.readFile(src);
 		expect(!!data).to.equal(true);
 	});
@@ -54,7 +61,7 @@ describe('Assets', () => {
 	it('built image from an import specifier using ?url', async () => {
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
-		const src = '/' + $('#import-url').attr('src');
+		const src = $('#import-url').attr('src');
 		const data = await fixture.readFile(src);
 		expect(!!data).to.equal(true);
 	});

packages/astro/test/astro-basic.test.js

@@ -7,7 +7,9 @@ describe('Astro basics', () => {
 	let previewServer;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-basic/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-basic/',
+		});
 		await fixture.build();
 		previewServer = await fixture.preview();
 	});

packages/astro/test/astro-client-only.test.js

@@ -6,7 +6,9 @@ describe('Client only components', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-client-only/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-client-only/',
+		});
 		await fixture.build();
 	});
 
@@ -16,19 +18,10 @@ describe('Client only components', () => {
 
 		// test 1: <astro-root> is empty
 		expect($('astro-root').html()).to.equal('');
-		const src = $('script').attr('src');
+		const $script = $('script');
+		const script = $script.html();
 
-		const script = await fixture.readFile(src);
 		// test 2: svelte renderer is on the page
-		const exp = /import\("(.\/client.*)"\)/g;
-		let match, svelteRenderer;
-		while ((match = exp.exec(script))) {
-			svelteRenderer = match[1].replace(/^\./, '/assets/');
-		}
-		expect(svelteRenderer).to.be.ok;
-
-		// test 3: can load svelte renderer
-		const svelteClient = await fixture.readFile(svelteRenderer);
-		expect(svelteClient).to.be.ok;
+		expect(/import\(".\/PersistentCounter.*/g.test(script)).to.be.ok;
 	});
 });

packages/astro/test/astro-components.test.js

@@ -1,56 +0,0 @@
-/**
- * UNCOMMENT: add support for functional components in frontmatter
-import { expect } from 'chai';
-import cheerio from 'cheerio';
-import { loadFixture } from './test-utils.js';
-
-let fixture;
-
-before(async () => {
-  fixture = await loadFixture({ projectRoot: './fixtures/astro-components/' });
-  await fixture.build();
-});
-
-// TODO: add support for functional components in frontmatter
-describe('Components tests', () => {
-  it('Astro components are able to render framework components', async () => {
-    const html = await fixture.readFile('/index.html');
-    const $ = cheerio.load(html);
-
-    // test 1: Renders Astro component
-    const $astro = $('#astro');
-    expect($astro.children()).to.have.lengthOf(3);
-
-    // test 2: Renders React component
-    const $react = $('#react');
-    expect($react).not.to.have.lengthOf(0);
-
-    // test 3: Renders Vue component
-    const $vue = $('#vue');
-    expect($vue).not.to.have.lengthOf(0);
-
-    // test 4: Renders Svelte component
-    const $svelte = $('#svelte');
-    expect($svelte).not.to.have.lengthOf(0);
-  });
-
-  it('Allows Components defined in frontmatter', async () => {
-    const html = await fixture.readFile('/frontmatter-component/index.html');
-    const $ = cheerio.load(html);
-
-    expect($('h1')).to.have.lengthOf(1);
-  });
-
-  it('Still throws an error for undefined components', async () => {
-    const result = await fixture.readFile('/undefined-component/index.html');
-    expect(result.status).to.equal(500);
-  });
-
-  it('Client attrs not added', async () => {
-    const html = await fixture.readFile('/client/index.html');
-    expect(html).not.to.include(`"client:load": true`);
-  });
-});
-*/
-
-it.skip('is skipped', () => {});

packages/astro/test/astro-css-bundling-import.test.js

@@ -6,7 +6,9 @@ describe('CSS Bundling (ESM import)', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling-import/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-css-bundling-import/',
+		});
 		await fixture.build();
 	});
 
@@ -32,8 +34,7 @@ describe('CSS Bundling (ESM import)', () => {
 		expect(css.indexOf('p{color:green}')).to.be.greaterThan(css.indexOf('p{color:#00f}'));
 	});
 
-	// TODO: re-enable this
-	it.skip('no empty CSS files', async () => {
+	it('no empty CSS files', async () => {
 		for (const page of ['/page-1/index.html', '/page-2/index.html']) {
 			const html = await fixture.readFile(page);
 			const $ = cheerio.load(html);

packages/astro/test/astro-css-bundling-nested-layouts.test.js

@@ -1,38 +0,0 @@
-import { expect } from 'chai';
-import cheerio from 'cheerio';
-import { loadFixture } from './test-utils.js';
-
-describe('nested layouts', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling-nested-layouts/' });
-		await fixture.build();
-	});
-
-	it('page-1 has all CSS', async () => {
-		const html = await fixture.readFile('/page-1/index.html');
-		const $ = cheerio.load(html);
-
-		const stylesheets = $('link[rel=stylesheet]')
-			.toArray()
-			.map((el) => el.attribs.href);
-
-		// page-one.[hash].css exists
-		expect(stylesheets.some((href) => /page-one\.\w+\.css/.test(href))).to.be.true;
-	});
-
-	it('page-2 has all CSS', async () => {
-		const html = await fixture.readFile('/page-2/index.html');
-		const $ = cheerio.load(html);
-
-		const stylesheets = $('link[rel=stylesheet]')
-			.toArray()
-			.map((el) => el.attribs.href);
-
-		// page-one.[hash].css exists
-		expect(stylesheets.some((href) => /page-one\.\w+\.css/.test(href))).to.be.true;
-		// page-2.[hash].css exists
-		expect(stylesheets.some((href) => /page-2\.\w+\.css/.test(href))).to.be.true;
-	});
-});

packages/astro/test/astro-css-bundling.test.js

@@ -5,11 +5,9 @@ import { loadFixture } from './test-utils.js';
 // note: the hashes should be deterministic, but updating the file contents will change hashes
 // be careful not to test that the HTML simply contains CSS, because it always will! filename and quanity matter here (bundling).
 const EXPECTED_CSS = {
-	'/index.html': ['./assets/index', './assets/typography'], // don’t match hashes, which change based on content
-	'/one/index.html': ['../assets/one'],
-	'/two/index.html': ['../assets/two', '../assets/typography'],
-	'/preload/index.html': ['../assets/preload'],
-	'/preload-merge/index.html': ['../assets/preload-merge'],
+	'/index.html': ['/assets/index'], // don’t match hashes, which change based on content
+	'/one/index.html': ['/assets/one'],
+	'/two/index.html': ['/assets/two'],
 };
 const UNEXPECTED_CSS = ['/src/components/nav.css', '../css/typography.css', '../css/colors.css', '../css/page-index.css', '../css/page-one.css', '../css/page-two.css'];
 
@@ -17,7 +15,9 @@ describe('CSS Bundling', function () {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-css-bundling/',
+		});
 		await fixture.build({ mode: 'production' });
 	});
 
@@ -43,21 +43,7 @@ describe('CSS Bundling', function () {
 				expect(link).to.have.lengthOf(0);
 			}
 
-			// test 3: preload tags was not removed and attributes was preserved
-			if (filepath === '/preload/index.html') {
-				const stylesheet = $('link[rel="stylesheet"][href^="../assets/preload"]');
-				const preload = $('link[rel="preload"][href^="../assets/preload"]');
-				expect(stylesheet[0].attribs.media).to.equal('print');
-				expect(preload).to.have.lengthOf(1); // Preload tag was removed
-			}
-
-			// test 4: preload tags was not removed and attributes was preserved
-			if (filepath === '/preload-merge/index.html') {
-				const preload = $('link[rel="preload"]');
-				expect(preload).to.have.lengthOf(1);
-			}
-
-			// test 5: assert all bundled CSS was built and contains CSS
+			// test 3: assert all bundled CSS was built and contains CSS
 			for (const url of builtCSS.keys()) {
 				const css = await fixture.readFile(url);
 				expect(css).to.be.ok;

packages/astro/test/astro-dynamic.test.js

@@ -6,7 +6,9 @@ describe('Dynamic components', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-dynamic/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-dynamic/',
+		});
 		await fixture.build();
 	});
 
@@ -14,7 +16,7 @@ describe('Dynamic components', () => {
 		const html = await fixture.readFile('/index.html');
 
 		const $ = cheerio.load(html);
-		expect($('script').length).to.eq(1);
+		expect($('script').length).to.eq(2);
 	});
 
 	it('Loads pages using client:media hydrator', async () => {
@@ -23,11 +25,7 @@ describe('Dynamic components', () => {
 		const $ = cheerio.load(html);
 
 		// test 1: static value rendered
-		let js = await fixture.readFile(new URL($('script').attr('src'), root).pathname);
-		expect(js).to.include(`value:"(max-width: 700px)"`);
-
-		// test 2: dynamic value rendered
-		expect(js).to.include(`value:"(max-width: 600px)"`);
+		expect($('script').length).to.equal(2); // One for each
 	});
 
 	it('Loads pages using client:only hydrator', async () => {

packages/astro/test/astro-envs.test.js

@@ -5,7 +5,10 @@ describe('Environment Variables', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-envs/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-envs/',
+			buildOptions: { legacyBuild: true } // TODO make this test work without legacyBuild
+		});
 
 		await fixture.build();
 	});

packages/astro/test/astro-global.test.js

@@ -10,7 +10,7 @@ describe('Astro.*', () => {
 			projectRoot: './fixtures/astro-global/',
 			buildOptions: {
 				site: 'https://mysite.dev/blog/',
-				sitemap: false,
+				sitemap: false
 			},
 		});
 		await fixture.build();
@@ -48,13 +48,6 @@ describe('Astro.*', () => {
 		expect($('#site').attr('href')).to.equal('https://mysite.dev/blog/');
 	});
 
-	it('Astro.resolve built', async () => {
-		const html = await fixture.readFile('/resolve/index.html');
-		const $ = cheerio.load(html);
-		expect($('img').attr('src')).to.include('assets/penguin.ccd44411.png'); // Main src/images
-		expect($('#inner-child img').attr('src')).to.include('assets/penguin.b9ab122a.png');
-	});
-
 	it('Astro.fetchContent() returns the correct "url" property, including buildOptions.site subpath', async () => {
 		const html = await fixture.readFile('/posts/1/index.html');
 		const $ = cheerio.load(html);

packages/astro/test/astro-partial-html.test.js

@@ -7,7 +7,9 @@ describe('Partial HTML ', async () => {
 	let devServer;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-partial-html/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-partial-html/',
+		});
 		devServer = await fixture.startDevServer();
 	});
 
@@ -23,7 +25,12 @@ describe('Partial HTML ', async () => {
 		expect(html).to.match(/^<!DOCTYPE html/);
 
 		// test 2: correct CSS present
-		const css = $('style[astro-style]').html();
+		const link = $('link').attr('href');
+		const css = await fixture.fetch(link, {
+			headers: {
+				accept: 'text/css'
+			}
+		}).then(res => res.text());
 		expect(css).to.match(/\.astro-[^{]+{color:red;}/);
 	});
 

packages/astro/test/astro-scripts.test.js

@@ -7,7 +7,14 @@ describe('Scripts (hoisted and not)', () => {
 	let fixture;
 
 	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/astro-scripts/' });
+		fixture = await loadFixture({
+			projectRoot: './fixtures/astro-scripts/',
+			vite: {
+				build: {
+					assetsInlineLimit: 0
+				}
+			}
+		});
 		await fixture.build();
 	});
 
@@ -38,8 +45,8 @@ describe('Scripts (hoisted and not)', () => {
 		// test 2: attr removed
 		expect($('script').attr('data-astro')).to.equal(undefined);
 
-		let entryURL = path.join('inline', $('script').attr('src'));
-		let inlineEntryJS = await fixture.readFile(entryURL);
+		const entryURL =  $('script').attr('src');
+		const inlineEntryJS = await fixture.readFile(entryURL);
 
 		// test 3: the JS exists
 		expect(inlineEntryJS).to.be.ok;
@@ -53,7 +60,7 @@ describe('Scripts (hoisted and not)', () => {
 		expect($('script')).to.have.lengthOf(2);
 
 		let el = $('script').get(1);
-		let entryURL = path.join('external', $(el).attr('src'));
+		let entryURL = $(el).attr('src');
 		let externalEntryJS = await fixture.readFile(entryURL);
 
 		// test 2: the JS exists

packages/astro/test/builtins.test.js

@@ -1,27 +0,0 @@
-import { expect } from 'chai';
-import cheerio from 'cheerio';
-import { loadFixture } from './test-utils.js';
-
-describe('Node builtins', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({ projectRoot: './fixtures/builtins/' });
-		await fixture.build();
-	});
-
-	it('Can be used with the node: prefix', async () => {
-		const html = await fixture.readFile('/index.html');
-		const $ = cheerio.load(html);
-
-		expect($('#version').text()).to.equal('1.2.0');
-		expect($('#dep-version').text()).to.equal('0.1.0');
-	});
-
-	it('Can also be used with the non-prefixed version', async () => {
-		const html = await fixture.readFile('/bare/index.html');
-		const $ = cheerio.load(html);
-
-		expect($('h1').text()).to.equal('true');
-	});
-});

packages/astro/test/cli.test.js

@@ -1,47 +0,0 @@
-import { expect } from 'chai';
-import { cli } from './test-utils.js';
-import { promises as fs } from 'fs';
-import { fileURLToPath } from 'url';
-
-describe('astro cli', () => {
-	it('astro', async () => {
-		const proc = await cli();
-
-		expect(proc.stdout).to.include('astro - Futuristic web development tool');
-	});
-
-	it('astro --version', async () => {
-		const pkgURL = new URL('../package.json', import.meta.url);
-		const pkgVersion = await fs.readFile(pkgURL, 'utf8').then((data) => JSON.parse(data).version);
-
-		const proc = await cli('--version');
-
-		expect(proc.stdout).to.equal(pkgVersion);
-	});
-
-	it('astro dev', async () => {
-		const projectRootURL = new URL('./fixtures/astro-basic/', import.meta.url);
-
-		const proc = cli('dev', '--project-root', fileURLToPath(projectRootURL));
-
-		let stdout = '';
-
-		for await (const chunk of proc.stdout) {
-			stdout += chunk;
-
-			if (chunk.includes('Local:')) break;
-		}
-
-		proc.kill();
-
-		expect(stdout).to.include('Server started');
-	});
-
-	it('astro build', async () => {
-		const projectRootURL = new URL('./fixtures/astro-basic/', import.meta.url);
-
-		const proc = await cli('build', '--project-root', fileURLToPath(projectRootURL));
-
-		expect(proc.stdout).to.include('Done');
-	});
-});

packages/astro/test/custom-elements.test.js

@@ -47,8 +47,8 @@ describe('Custom Elements', () => {
 		expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1);
 
 		// Hydration
-		// test 3: Component and polyfill scripts bundled together
-		expect($('script[type=module]')).to.have.lengthOf(1);
+		// test 3: Component and polyfill scripts bundled separately
+		expect($('script[type=module]')).to.have.lengthOf(2);
 	});
 
 	it('Polyfills are added even if not hydrating', async () => {

packages/astro/test/fixtures/0-css/src/pages/index.astro

@@ -19,7 +19,7 @@ import VueScoped from '../components/VueScoped.vue';
 import VueScss from '../components/VueScss.vue';
 import ReactDynamic from '../components/ReactDynamic.jsx';
 
-import importedUrl from '../styles/imported-url.css?url';
+import '../styles/imported-url.css';
 ---
 
 <html>
@@ -36,10 +36,15 @@ import importedUrl from '../styles/imported-url.css?url';
       }
     </style>
     <link rel="stylesheet" type="text/css" href="/global.css">
-    <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.css')}>
-    <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.scss')}>
-    <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.sass')}>
-    <link rel="stylesheet" type="text/css" href={importedUrl}>
+		<style>
+			@import '../styles/linked.css';
+		</style>
+		<style lang="scss">
+			@import '../styles/linked.scss';
+		</style>
+		<style lang="sass">
+			@import '../styles/linked.sass'
+		</style>
   </head>
   <body>
     <div class="wrapper">

packages/astro/test/fixtures/astro-assets/src/pages/index.astro

@@ -9,7 +9,7 @@ import p2Url from '../images/penguin2.jpg?url';
 </style>
 <body>
   <h1>Icons</h1>
-  <img src={Astro.resolve('../images/twitter.png')} srcset={`${Astro.resolve('../images/twitter.png')} 1x, ${Astro.resolve('../images/twitter@2x.png')} 2x, ${Astro.resolve('../images/twitter@3x.png')} 3x`} />
+  <img src={(await import('../images/twitter.png')).default} srcset={`${(await import('../images/twitter.png')).default} 1x, ${(await import('../images/twitter@2x.png')).default} 2x, ${(await import('../images/twitter@3x.png')).default} 3x`} />
   <img srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 600w, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 800w">
   <img srcset="https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg, https://ik.imagekit.io/demo/tr:w-450,h-450/medium_cafe_B1iTdD0C.jpg 1.5x, https://ik.imagekit.io/demo/tr:w-600,h-600/medium_cafe_B1iTdD0C.jpg 2x">
   <!--

packages/astro/test/fixtures/astro-components/src/components/Component.astro

@@ -1,11 +0,0 @@
----
-import ReactComponent from './Component.jsx';
-import VueComponent from './Component.vue';
-import SvelteComponent from './Component.svelte';
----
-
-<div id="astro">
-  <ReactComponent />
-  <VueComponent />
-  <SvelteComponent />
-</div>

packages/astro/test/fixtures/astro-components/src/components/Component.jsx

@@ -1,5 +0,0 @@
-import { h } from 'preact';
-
-export default function PreactComponent({ children }) {
-  return <div id="preact">{children}</div>;
-}

packages/astro/test/fixtures/astro-components/src/components/Component.svelte

@@ -1,3 +0,0 @@
-<div id="svelte">
-    <slot />
-</div>

packages/astro/test/fixtures/astro-components/src/components/Component.vue

@@ -1,9 +0,0 @@
-<template>
-  <div id="vue">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {}
-</script>

packages/astro/test/fixtures/astro-components/src/components/Props-Component.astro

@@ -1,6 +0,0 @@
----
-export interface Props {
-    test: string;
-}
----
-<h1 id="direct-props-h1">{props.test}</h1>

packages/astro/test/fixtures/astro-components/src/pages/client.astro

@@ -1,9 +0,0 @@
----
-import SvelteComponent from '../components/Component.svelte';
----
-<html>
-<head><title>Components</title></head>
-<body>
-  <SvelteComponent client:load />
-</body>
-</html>

packages/astro/test/fixtures/astro-components/src/pages/frontmatter-component.astro

@@ -1,6 +0,0 @@
----
-const { level = 1 } = Astro.props;
-const Element = `h${level}`;
----
-
-<Element>Hello world!</Element>

packages/astro/test/fixtures/astro-components/src/pages/index.astro

@@ -1,9 +0,0 @@
----
-import AstroComponent from '../components/Component.astro';
----
-<html>
-<head><title>Components</title></head>
-<body>
-  <AstroComponent />
-</body>
-</html>

packages/astro/test/fixtures/astro-components/src/pages/props-shadowing.astro

@@ -1,4 +0,0 @@
----
-import PropsComponent from "../components/Props-Component.astro"
----
-<PropsComponent test="test string"/>

packages/astro/test/fixtures/astro-components/src/pages/undefined-component.astro

@@ -1,11 +0,0 @@
----
-function FnComponent() {
-  const lame = 'ugh';
-  return <h2>Hey</h2>
-}
-const Defined = 'h1'
----
-
-<FnComponent />
-<Defined>Hello world!</Defined>
-<Undefined />

packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/layouts/BaseLayout.astro

@@ -1,27 +0,0 @@
----
-import "../styles/site.css"
-
-const {title} = Astro.props;
----
-
-<html lang="en">
-
-<head>
-	<meta charset="utf-8" />
-	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
-	<meta name="viewport" content="width=device-width" />
-	<title>{title}</title>
-	<style>
-	</style>
-</head>
-
-<body>
-	<ul>
-		<li><a href="/page-1">Page 1</a></li>
-		<li><a href="/page-2">Page 2</a></li>
-		<!-- <li><a href="/page-2-reduced-layout">Page 2 reduced layout</a></li> -->
-	</ul>
-	<slot></slot>
-</body>
-
-</html>

packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/layouts/PageLayout.astro

@@ -1,12 +0,0 @@
----
-import BaseLayout from "./BaseLayout.astro"
-import "../styles/page-one.css"
-
-const {title} = Astro.props;
----
-
-<BaseLayout title={title}>
-  <main id="page">
-    <slot></slot>
-  </main>
-</BaseLayout>

packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-1.astro

@@ -1,15 +0,0 @@
----
-  import PageLayout from "../layouts/PageLayout.astro"
-
-  const date = new Date();
----
-
-<PageLayout title="Page 1">
-  <h1>Page 1</h1>
-  <p>This page has styling in dev-server. But the built page has no styling. </p>
-  <p>Check <code>dist/page-1/index.html</code>. There are no stylesheets imported.</p>
-  <p>Additionally, there is an empty js file in the <code>dist/assets</code> folder. Thankfully the file is not required by any page.</p>
-  <p>Execute the build <code>npm run build</code> and preview it <code>npx http-server dist/</code> at <a href="https://github-qoihup--8080.local.webcontainer.io/page-1/">https://github-qoihup--8080.local.webcontainer.io/page-1/</a></p>
-
-  <p>Date: {date}</p>
-</PageLayout>

packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/pages/page-2.astro

@@ -1,9 +0,0 @@
----
-  import PageLayout from "../layouts/PageLayout.astro"
-  import "../styles/page-two.css"
----
-
-<PageLayout title="Page 2">
-  <h1>Page 2</h1>
-  <p>Nothing to see here. Check <a href="/page-1">Page 1</a></p>
-</PageLayout>

packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/page-one.css

@@ -1,3 +0,0 @@
-p {
-  color: blue;
-}

packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/page-two.css

@@ -1,3 +0,0 @@
-p {
-  color: green;
-}

packages/astro/test/fixtures/astro-css-bundling-nested-layouts/src/styles/site.css

@@ -1,7 +0,0 @@
-p {
-  color: red;
-}
-
-h1 {
-  outline: 1px solid red;
-}

packages/astro/test/fixtures/astro-css-bundling/src/pages/index.astro

@@ -4,9 +4,11 @@ import Nav from '../components/Nav.astro';
 
 <html>
   <head>
-    <link rel="stylesheet" href={Astro.resolve('../css/typography.css')}>
-    <link rel="stylesheet" href={Astro.resolve('../css/colors.css')}>
-    <link rel="stylesheet" href={Astro.resolve('../css/page-index.css')}>
+		<style>
+			@import '../css/typography.css';
+			@import '../css/colors.css';
+			@import '../css/page-index.css';
+		</style>
   </head>
   <body>
     <Nav />

packages/astro/test/fixtures/astro-css-bundling/src/pages/one.astro

@@ -4,8 +4,10 @@ import Nav from '../components/Nav.astro';
 
 <html>
   <head>
-    <link rel="stylesheet" href={Astro.resolve('../css/typography.css')} />
-    <link rel="stylesheet" href={Astro.resolve('../css/page-one.css')} />
+		<style>
+			@import '../css/typography.css';
+			@import '../css/page-one.css';
+		</style>
   </head>
   <body>
     <Nav />

packages/astro/test/fixtures/astro-css-bundling/src/pages/preload-merge.astro

@@ -1,17 +0,0 @@
----
-import Nav from '../components/Nav.astro';
----
-
-<html>
-  <head>
-    <link rel="preload" as="style" href={Astro.resolve('../css/page-preload-merge.css')} />
-    <link rel="preload" as="style" href={Astro.resolve('../css/page-preload-merge-2.css')} />
-
-    <link rel="stylesheet" href={Astro.resolve('../css/page-preload-merge.css')} />
-    <link rel="stylesheet" href={Astro.resolve('../css/page-preload-merge-2.css')} />
-  </head>
-  <body>
-    <Nav />
-    <h1>Preload merge page</h1>
-  </body>
-</html>

packages/astro/test/fixtures/astro-css-bundling/src/pages/preload.astro

@@ -1,14 +0,0 @@
----
-import Nav from '../components/Nav.astro';
----
-
-<html>
-  <head>
-    <link rel="preload" as="style" href={Astro.resolve('../css/page-preload.css')} />
-    <link rel="stylesheet" href={Astro.resolve('../css/page-preload.css')} media="print" onload="this.media='all'" />
-  </head>
-  <body>
-    <Nav />
-    <h1>Preload page</h1>
-  </body>
-</html>

packages/astro/test/fixtures/astro-css-bundling/src/pages/two.astro

@@ -4,9 +4,11 @@ import Nav from '../components/Nav.astro';
 
 <html>
   <head>
-    <link rel="stylesheet" href={Astro.resolve('../css/typography.css')} />
-    <link rel="stylesheet" href={Astro.resolve('../css/colors.css')} />
-    <link rel="stylesheet" href={Astro.resolve('../css/page-two.css')} />
+		<style>
+			@import '../css/typography.css';
+			@import '../css/colors.css';
+			@import '../css/page-two.css';
+		</style>
   </head>
   <body>
     <Nav />

packages/astro/test/fixtures/astro-global/src/components/ChildResolve.astro

@@ -1,5 +0,0 @@
----
-const penguinUrl = Astro.resolve('../images/penguin.png');
----
-<img src={penguinUrl} />
-<img src="../images/penguin.png" />

packages/astro/test/fixtures/astro-global/src/components/nested/InnerChild.astro

@@ -1,6 +0,0 @@
----
-const penguinUrl = Astro.resolve('./images/penguin.png');
----
-<div id="inner-child">
-  <img src={penguinUrl} />
-</div>

packages/astro/test/fixtures/astro-global/src/pages/resolve.astro

@@ -1,14 +0,0 @@
----
-import Child from '../components/ChildResolve.astro';
-import InnerChild from '../components/nested/InnerChild.astro';
----
-
-<html>
-<head>
-  <title>Testing</title>
-</head>
-<body>
-  <Child />
-  <InnerChild />
-</body>
-</html>

packages/astro/test/fixtures/astro-scripts/src/components/NoHoistClassic.astro

@@ -1 +1,4 @@
-<script src={Astro.resolve("../scripts/no_hoist_nonmodule.js")}></script>
+---
+import url from "../scripts/no_hoist_nonmodule.js?url"
+---
+<script src={url}></script>

packages/astro/test/fixtures/astro-scripts/src/components/NoHoistModule.astro

@@ -1 +1,4 @@
-<script type="module" src={Astro.resolve("../scripts/no_hoist_module.js")}></script>
+---
+import url from '../scripts/no_hoist_module.js?url';
+---
+<script type="module" src={url}></script>

packages/astro/test/fixtures/astro-scripts/src/components/Widget.astro

@@ -1 +1 @@
-<script hoist type="module" src={Astro.resolve("../scripts/something.js")}></script>
+<script hoist type="module" src="../scripts/something.js"></script>

packages/astro/test/fixtures/astro-scripts/src/components/Widget2.astro

@@ -1 +1 @@
-<script hoist type="module" src={Astro.resolve("../scripts/another_external.js")}></script>
+<script hoist type="module" src="../scripts/another_external.js"></script>

packages/astro/test/fixtures/builtins/package.json

@@ -1,8 +0,0 @@
-{
-  "name": "@astrojs/astro-test-builtins",
-  "version": "1.2.0",
-  "private": true,
-  "dependencies": {
-    "@astrojs/astro-test-builtins-dep": "file:./packages/dep"
-  }
-}

packages/astro/test/fixtures/builtins/packages/dep/CHANGELOG.md

@@ -1,8 +0,0 @@
-# @astrojs/astro-test-builtins-dep
-
-## 0.1.0
-### Minor Changes
-
-
-
-- [#2202](https://github.com/withastro/astro/pull/2202) [`45cea6ae`](https://github.com/withastro/astro/commit/45cea6aec5a310fed4cb8da0d96670d6b99a2539) Thanks [@jonathantneal](https://github.com/jonathantneal)! - Officially drop support for Node v12. The minimum supported version is now Node v14.15+,

packages/astro/test/fixtures/builtins/packages/dep/main.js

@@ -1,10 +0,0 @@
-import fs from 'fs';
-
-const readFile = fs.promises.readFile;
-
-export async function readJson(path) {
-  const json = await readFile(path, 'utf-8');
-  const data = JSON.parse(json);
-  return data;
-}
-

packages/astro/test/fixtures/builtins/packages/dep/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "@astrojs/astro-test-builtins-dep",
-  "version": "0.1.0",
-  "private": true,
-  "module": "main.js",
-  "main": "main.js"
-}

packages/astro/test/fixtures/builtins/src/components/Version.astro

@@ -1,9 +0,0 @@
----
-import { promises as fs } from 'node:fs';
-
-const url = new URL('../../package.json', import.meta.url);
-const json = await fs.readFile(url, 'utf-8');
-const data = JSON.parse(json);
----
-
-<span id="version">{data.version}</span>

packages/astro/test/fixtures/builtins/src/pages/bare.astro

@@ -1,12 +0,0 @@
----
-import { builtinModules } from 'module';
----
-
-<html>
-<head>
-<title>Bare node import</title>
-</head>
-<body>
-<h1>{Array.isArray(builtinModules)}</h1>
-</body>
-</html>

packages/astro/test/fixtures/builtins/src/pages/index.astro

@@ -1,16 +0,0 @@
----
-import Version from '../components/Version.astro';
-import { readJson } from '@astrojs/astro-test-builtins-dep';
-
-const depPath = new URL('../../packages/dep/package.json', import.meta.url);
-
-const title = 'My App';
-const depVersion = (await readJson(depPath)).version;
----
-
-<title>{title}</title>
-
-<h1>{title}</h1>
-
-<Version />
-<span id="dep-version">{depVersion}</span>

packages/astro/test/fixtures/postcss/src/pages/index.astro

@@ -4,9 +4,12 @@ import JSX from '../components/Solid.jsx';
 import Svelte from '../components/Svelte.svelte';
 import Vue from '../components/Vue.vue';
 ---
+<html>
 <head>
   <link rel="stylesheet" type="text/css" href="/global.css">
-  <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/linked.css')}>
+	<style>
+		@import '../styles/linked.css';
+	</style>
   <style>
     .astro-page {
       appearance: none;
@@ -22,3 +25,5 @@ import Vue from '../components/Vue.vue';
     <Vue />
   </div>
 </body>
+
+</html>

packages/astro/test/lit-element.test.js

@@ -18,6 +18,9 @@ describe('LitElement test', function () {
 		fixture = await loadFixture({
 			projectRoot: './fixtures/lit-element/',
 			renderers: ['@astrojs/renderer-lit'],
+			buildOptions: {
+				legacyBuild: true
+			}
 		});
 		await fixture.build();
 	});
@@ -71,12 +74,3 @@ describe('LitElement test', function () {
 		expect($('my-element').html()).to.include(`<div>Testing...</div>`);
 	});
 });
-
-after(async () => {
-	// The Lit renderer adds browser globals that interfere with other tests, so remove them now.
-	const globals = Object.keys(globalThis.window || {});
-	globals.splice(globals.indexOf('global'), 1);
-	for (let name of globals) {
-		delete globalThis[name];
-	}
-});

packages/astro/test/postcss.test.js

@@ -18,7 +18,7 @@ describe('PostCSS', () => {
 		// get bundled CSS (will be hashed, hence DOM query)
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
-		const bundledCSSHREF = $('link[rel=stylesheet][href^=./assets/]').attr('href');
+		const bundledCSSHREF = $('link[rel=stylesheet][href^=/assets/]').attr('href');
 		bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
 	});
 
@@ -30,10 +30,6 @@ describe('PostCSS', () => {
 		expect(bundledCSS).to.match(new RegExp(`.astro-component.astro-[^{]+${PREFIXED_CSS}`));
 	});
 
-	it('works in <link>', () => {
-		expect(bundledCSS).to.match(new RegExp(`.a-n${PREFIXED_CSS}`));
-	});
-
 	it('works in JSX', () => {
 		expect(bundledCSS).to.match(new RegExp(`.solid${PREFIXED_CSS}`));
 	});

packages/astro/test/remote-css.test.js

@@ -17,7 +17,7 @@ describe('Remote CSS', () => {
 		const $ = cheerio.load(html);
 
 		const relPath = $('link').attr('href');
-		const css = await fixture.readFile('/' + relPath);
+		const css = await fixture.readFile(relPath);
 
 		expect(css).to.match(/https:\/\/unpkg.com\/open-props/);
 		expect(css).to.match(/body/);

packages/astro/test/static-build-page-url-format.test.js

@@ -23,12 +23,12 @@ describe("Static build - pageUrlFormat: 'file'", () => {
 	});
 
 	it('Builds pages in root', async () => {
-		const html = await fixture.readFile('/subpath/one.html');
+		const html = await fixture.readFile('/one.html');
 		expect(html).to.be.a('string');
 	});
 
 	it('Builds pages in subfolders', async () => {
-		const html = await fixture.readFile('/subpath/sub/page.html');
+		const html = await fixture.readFile('/sub/page.html');
 		expect(html).to.be.a('string');
 	});
 });

packages/astro/test/static-build.test.js

@@ -25,12 +25,12 @@ describe('Static build', () => {
 	});
 
 	it('Builds out .astro pages', async () => {
-		const html = await fixture.readFile('/subpath/index.html');
+		const html = await fixture.readFile('/index.html');
 		expect(html).to.be.a('string');
 	});
 
 	it('can build pages using fetchContent', async () => {
-		const html = await fixture.readFile('/subpath/index.html');
+		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
 		const link = $('.posts a');
 		const href = link.attr('href');
@@ -38,18 +38,18 @@ describe('Static build', () => {
 	});
 
 	it('Builds out .md pages', async () => {
-		const html = await fixture.readFile('/subpath/posts/thoughts/index.html');
+		const html = await fixture.readFile('/posts/thoughts/index.html');
 		expect(html).to.be.a('string');
 	});
 
 	it('Builds out .json files', async () => {
-		const content = await fixture.readFile('/subpath/company.json').then((text) => JSON.parse(text));
+		const content = await fixture.readFile('/company.json').then((text) => JSON.parse(text));
 		expect(content.name).to.equal('Astro Technology Company');
 		expect(content.url).to.equal('https://astro.build/');
 	});
 
 	it('Builds out async .json files', async () => {
-		const content = await fixture.readFile('/subpath/posts.json').then((text) => JSON.parse(text));
+		const content = await fixture.readFile('/posts.json').then((text) => JSON.parse(text));
 		expect(Array.isArray(content)).to.equal(true);
 		expect(content).deep.equal([
 			{
@@ -67,20 +67,20 @@ describe('Static build', () => {
 		const slugs = ['thing1', 'thing2'];
 
 		for (const slug of slugs) {
-			const content = await fixture.readFile(`/subpath/data/${slug}.json`).then((text) => JSON.parse(text));
+			const content = await fixture.readFile(`/data/${slug}.json`).then((text) => JSON.parse(text));
 			expect(content.name).to.equal('Astro Technology Company');
 			expect(content.url).to.equal('https://astro.build/');
 			expect(content.slug).to.equal(slug);
 		}
 	});
 
-	function createFindEvidence(expected) {
+	function createFindEvidence(expected, prefix) {
 		return async function findEvidence(pathname) {
 			const html = await fixture.readFile(pathname);
 			const $ = cheerio.load(html);
 			const links = $('link[rel=stylesheet]');
 			for (const link of links) {
-				const href = $(link).attr('href');
+				const href = $(link).attr('href').slice('/subpath'.length);
 				const data = await fixture.readFile(addLeadingSlash(href));
 				if (expected.test(data)) {
 					return true;
@@ -95,7 +95,7 @@ describe('Static build', () => {
 		const findEvidence = createFindEvidence(/height:( )*45vw/);
 
 		it('Page level CSS is added', async () => {
-			const found = await findEvidence('/subpath/index.html');
+			const found = await findEvidence('/index.html');
 			expect(found).to.equal(true, 'Did not find page-level CSS on this page');
 		});
 	});
@@ -104,12 +104,12 @@ describe('Static build', () => {
 		const findEvidence = createFindEvidence(/var\(--c\)/);
 
 		it('Included on the index page', async () => {
-			const found = await findEvidence('/subpath/index.html');
+			const found = await findEvidence('/index.html');
 			expect(found).to.equal(true, 'Did not find shared CSS on this page');
 		});
 
 		it('Included on a md page', async () => {
-			const found = await findEvidence('/subpath/posts/thoughts/index.html');
+			const found = await findEvidence('/posts/thoughts/index.html');
 			expect(found).to.equal(true, 'Did not find shared CSS on this page');
 		});
 	});
@@ -118,30 +118,30 @@ describe('Static build', () => {
 		const findEvidence = createFindEvidence(/var\(--c-black\)/);
 
 		it('Is included in the index CSS', async () => {
-			const found = await findEvidence('/subpath/index.html');
+			const found = await findEvidence('/index.html');
 			expect(found).to.equal(true, 'Did not find shared CSS module code');
 		});
 	});
 
 	describe('Hoisted scripts', () => {
 		it('Get bundled together on the page', async () => {
-			const html = await fixture.readFile('/subpath/hoisted/index.html');
+			const html = await fixture.readFile('/hoisted/index.html');
 			const $ = cheerio.load(html);
 			expect($('script[type="module"]').length).to.equal(1, 'hoisted script added');
 		});
 
 		it('Do not get added to the wrong page', async () => {
-			const hoistedHTML = await fixture.readFile('/subpath/hoisted/index.html');
+			const hoistedHTML = await fixture.readFile('/hoisted/index.html');
 			const $ = cheerio.load(hoistedHTML);
 			const href = $('script[type="module"]').attr('src');
-			const indexHTML = await fixture.readFile('/subpath/index.html');
+			const indexHTML = await fixture.readFile('/index.html');
 			const $$ = cheerio.load(indexHTML);
 			expect($$(`script[src="${href}"]`).length).to.equal(0, 'no script added to different page');
 		});
 	});
 
 	it('honors ssr config', async () => {
-		const html = await fixture.readFile('/subpath/index.html');
+		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
 		expect($('#ssr-config').text()).to.equal('testing');
 	});

scripts/memory/index.js

@@ -18,7 +18,7 @@ let config = await loadConfig({
 	cwd: fileURLToPath(projDir),
 });
 
-config.buildOptions.experimentalStaticBuild = true;
+config.buildOptions.legacyBuild = false;
 
 const server = await dev(config, { logging: { level: 'error' } });
 

yarn.lock

@@ -156,10 +156,10 @@
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
-"@astrojs/compiler@^0.11.4":
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.11.4.tgz#933853cf37ba2cbf0213a88463fd48c3a4329a07"
-  integrity sha512-T598FTCgBFjjPLPClvn+lc2SFGAJkjaF+lbxvHNjzmUpOYdz7YyH1apd3XAZvDp5r5WBBhicB6693GhQRpf3oQ==
+"@astrojs/compiler@^0.12.0-next.8":
+  version "0.12.0-next.8"
+  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.12.0-next.8.tgz#a15792791790aaeeaf944797635a40a56f806975"
+  integrity sha512-HeREaw5OR5J7zML+/LxhrqUr57571kyNXL4HD2pU929oevhx3PQ37PQ0FkD5N65X9YfO+gcoEO6whl76vtSZag==
   dependencies:
     typescript "^4.3.5"