@kasperpeulen/vitest-plugin-nextjs 0.0.0-alpha.0 → 0.1.0-alpha.0

package/dist/styles.js

@@ -0,0 +1,730 @@
+import { builtFilesPath, componentPagePath, cssDirectory, cssVersionPattern, stylesheetsChangedEvent, stylesheetsEvent } from "./styles-shared.js";
+import { fontRequestOf } from "./compile.js";
+import { routeChunksOf } from "./route-chunks.js";
+import { clientReferenceOfModule } from "./client-files.js";
+import { isBuiltin } from "node:module";
+import { clientReferencesId } from "@kasperpeulen/vitest-plugin-rsc/internal/built-layers";
+import { isCSSRequest, normalizePath, parseAst, send, version } from "vite";
+import path from "node:path";
+import { createHash } from "node:crypto";
+import fs from "node:fs";
+import { getPluginApi } from "@vitejs/plugin-rsc/plugin";
+import { cssBuildDirPlaceholder, toBuildDir } from "@kasperpeulen/vitest-plugin-rsc/internal/static-build";
+import { answerPage } from "@kasperpeulen/vitest-plugin-rsc/internal/page-bridge";
+//#region src/styles.ts
+const linkedQuery = "next-linked";
+const linkedRE = new RegExp(`[?&]${linkedQuery}\\b`);
+const directRE = /[?&]direct\b/;
+const transformOnly = "transform-only";
+/** The id of a stylesheet that Next links, of the id of its file, in a build or not. */
+const linked = (id, build = false) => `${id}${id.includes("?") ? "&" : "?"}${linkedQuery}${build ? `&${transformOnly}` : ""}`;
+const isLinked = (id) => linkedRE.test(id);
+const metaKey = "vitest-plugin-rsc:next-linked";
+/**
+* Whether a module is that of a stylesheet that Next links, whose links the
+* page moves to the version of now after a change
+* (`stylesheetsChangedEvent`). One without class names, which its module
+* exports as a CSS module does, and so exports nothing. Not with
+* `experimental.inlineCss`, with which Next puts the CSS of a page load in a
+* `<style>`, which is no link: the page loads again for it.
+*/
+const movesItsLinks = (node) => (node.info?.meta)?.[metaKey]?.movesLinks === true;
+/**
+* Whether a stylesheet changes in place after a change, and what imports it
+* sees nothing of it: one that accepts its own update, which Vite swaps as
+* its `<style>`, and the module of a stylesheet that Next links without
+* class names, whose links the page moves to the version of now
+* (`stylesheetsChangedEvent`).
+*/
+const changesInPlace = (node) => isCSSRequest(node.url) && (node.isSelfAccepting === true || movesItsLinks(node));
+const isScriptRequest = (source) => /\.[cm]?[jt]sx?$/.test(source);
+const codeExtensionRE = /^(?:[cm]?[jt]sx?|vue|marko|svelte|astro|imba|mdx)$/;
+function isCode(id, pageExtensions) {
+	const file = id.split("?")[0];
+	const extension = /\.([^./]+)$/.exec(file)?.[1];
+	return extension === void 0 || codeExtensionRE.test(extension) || pageExtensions.some((pageExtension) => file.endsWith(`.${pageExtension}`));
+}
+/**
+* The order of the cascade layers of a stylesheet, kept where Vite inlines
+* its `@import`s. A layer comes in the order in which a stylesheet names it
+* first, and an `@import` with `layer()` names it before an `@layer`
+* statement that follows the import. `postcss-import`, with which Vite
+* inlines an import, puts such a statement before the CSS of the import, so
+* that its layers come first. With a statement of every layer of the imports
+* at the top, which can precede an `@import`, the order is the stylesheet's
+* own. Not that of a stylesheet it imports, which `postcss-import` reads
+* itself, nor of a layer without a name, which a statement cannot name.
+*/
+function declareImportedLayers(css) {
+	const layers = [];
+	let start = 0;
+	let importsLayer = false;
+	let reordered = false;
+	for (let at = 0;;) {
+		const space = /^(?:\s+|\/\*[\s\S]*?\*\/)*/.exec(css.slice(at))[0];
+		at += space.length;
+		const rule = /^@(charset|import|layer)\b((?:"[^"]*"|'[^']*'|\([^)]*\)|[^;{"'(])*);/i.exec(css.slice(at));
+		if (!rule) break;
+		const [statement, name, prelude] = rule;
+		at += statement.length;
+		if (name.toLowerCase() === "charset") start = at;
+		else if (name.toLowerCase() === "import") {
+			const layer = /\blayer\(\s*([^)\s]+)\s*\)/i.exec(prelude.replace(/"[^"]*"|'[^']*'/g, ""));
+			if (layer && !layers.includes(layer[1])) layers.push(layer[1]);
+			importsLayer ||= Boolean(layer);
+		} else {
+			reordered ||= importsLayer;
+			for (const layer of prelude.split(",").map((part) => part.trim())) if (layer && !layers.includes(layer)) layers.push(layer);
+		}
+	}
+	if (!reordered) return css;
+	return `${css.slice(0, start)}@layer ${layers.join(", ")};${css.slice(start)}`;
+}
+const directory = cssDirectory;
+const versionRE = new RegExp(`^${directory}/(${cssVersionPattern})(/.*)$`);
+function boundNames(node, names) {
+	if (!node || typeof node !== "object") return;
+	const { type } = node;
+	if (type === "Identifier") names.add(node.name);
+	else if (type === "ImportDeclaration") for (const { local } of node.specifiers) boundNames(local, names);
+	else if (type === "VariableDeclaration") for (const { id } of node.declarations) boundNames(id, names);
+	else if (type === "FunctionDeclaration" || type === "ClassDeclaration") boundNames(node.id, names);
+	else for (const key of [
+		"properties",
+		"elements",
+		"value",
+		"argument",
+		"left"
+	]) for (const part of [node[key]].flat()) boundNames(part, names);
+}
+function identifiersOf(node, names) {
+	if (!node || typeof node !== "object") return false;
+	const { type } = node;
+	if (type === "Identifier") names.add(node.name);
+	let meta = type === "MetaProperty";
+	for (const value of Object.values(node)) if (value && typeof value === "object") meta = identifiersOf(value, names) || meta;
+	return meta;
+}
+/**
+* The exports of Vite's module for a stylesheet, without the code that puts
+* the CSS in the document.
+*
+* Vite's module for a client (`vite:css-post`) puts the CSS in a `<style>`,
+* and has the class names of a CSS module as its exports, as Vite documents
+* them. Its module for a server is those exports, with the constants they
+* are made of: one for a class name that is no name of a variable, like
+* `switch`. So the exports are kept, with the statements they use, and the
+* rest is not. That holds as long as what they use is not the code of the
+* `<style>`: an import, or `import.meta`.
+*/
+function exportsOfStylesheet(code, id) {
+	const body = parseAst(code).body;
+	const isExport = (node) => node.type === "ExportNamedDeclaration" && !node.source || node.type === "ExportDefaultDeclaration";
+	const declaredBy = /* @__PURE__ */ new Map();
+	for (const node of body) {
+		if (isExport(node)) continue;
+		const names = /* @__PURE__ */ new Set();
+		boundNames(node, names);
+		for (const name of names) declaredBy.set(name, node);
+	}
+	let other;
+	const kept = new Set(body.filter(isExport));
+	for (const node of kept) {
+		const used = /* @__PURE__ */ new Set();
+		if (identifiersOf(node, used)) other = code.slice(node.start, node.end);
+		for (const name of used) {
+			const declaration = declaredBy.get(name);
+			if (!declaration || kept.has(declaration)) continue;
+			if (declaration.type === "ImportDeclaration") other = name;
+			else kept.add(declaration);
+		}
+	}
+	for (const node of body) if (node.type === "ExportNamedDeclaration" || node.type === "ExportAllDeclaration") {
+		if (!kept.has(node)) other = code.slice(node.start, node.end);
+	}
+	if (other !== void 0) throw new Error(`vitest-plugin-rsc: vite@${version} differs from the Vite this plugin was written for: the exports of its module for the stylesheet ${id} need more than the class names (\`${other}\`). Use a version of @kasperpeulen/vitest-plugin-nextjs that supports vite@${version}.`);
+	const exports = body.filter((node) => kept.has(node));
+	return exports.length > 0 ? exports.map((node) => code.slice(node.start, node.end)).join("\n") : noExports;
+}
+const noExports = "export {}";
+function createStyles(options) {
+	const { getProject, environments } = options;
+	const layers = new Map(Object.entries(environments).map(([layer, name]) => [name, layer]));
+	const lists = new Set(options.lists);
+	const inlinesCss = () => getProject().config.experimental?.inlineCss === true;
+	const stylesheetIds = /* @__PURE__ */ new Map();
+	function serveAt(stylesheet) {
+		const url = stylesheet.url.split("?")[0];
+		const name = url.startsWith("/") ? url : `/${createHash("sha1").update(url).digest("hex").slice(0, 16)}.css`;
+		stylesheetIds.set(directory + name, stylesheet.id);
+		return directory + name;
+	}
+	const segments = /* @__PURE__ */ new Map();
+	function segmentsOf(route) {
+		let files = segments.get(route);
+		if (!files) {
+			files = getProject().loadRouteEntry(route).then((entry) => entry.segments);
+			segments.set(route, files);
+			files.catch(() => segments.delete(route));
+		}
+		return files;
+	}
+	const loads = /* @__PURE__ */ new Map();
+	function reach(vite, queue) {
+		const references = getPluginApi(vite.config)?.manager.clientReferenceMetaMap;
+		if (!references) throw new Error("vitest-plugin-rsc: vitestPluginNext() needs vitestPluginRSC() before it in the plugins.");
+		const graphs = {
+			rsc: vite.environments[environments.rsc],
+			browser: vite.environments[environments.browser]
+		};
+		const clientModules = /* @__PURE__ */ new Map();
+		const followed = /* @__PURE__ */ new Set();
+		const { pageExtensions = [] } = getProject().config;
+		async function load(layer, url) {
+			if (url.startsWith("/@id/")) url = url.slice(5).replace("__x00__", "\0");
+			const key = `${layer}:${url}`;
+			const inGraph = () => graphs[layer].moduleGraph.getModuleByUrl(url).catch(() => void 0);
+			if (queue) return queue(() => graphs[layer].transformRequest(url)).then(inGraph, () => void 0);
+			let loaded = loads.get(key);
+			if (loaded) {
+				const node = await loaded.module ?? await inGraph();
+				if (node && node.lastInvalidationTimestamp !== loaded.invalidated) loaded = void 0;
+			}
+			if (!loaded) {
+				const entry = {
+					module: graphs[layer].transformRequest(url).then(inGraph).catch((error) => {
+						if (error?.code === "ERR_LOAD_URL") vite.config.logger.warnOnce(`vitest-plugin-rsc: the CSS of ${url} is not linked: ${String(error)}`);
+					}).then(async (found) => {
+						entry.invalidated = (found ?? await inGraph())?.lastInvalidationTimestamp;
+						return found;
+					}),
+					invalidated: void 0
+				};
+				loaded = entry;
+				loads.set(key, loaded);
+			}
+			return loaded.module;
+		}
+		const isEnd = (id) => lists.has(id);
+		/** Has Vite's graphs know what `node` imports, as far as it goes. */
+		async function follow(layer, node) {
+			if (followed.has(node) || !node.id || isEnd(node.id)) return;
+			followed.add(node);
+			const reference = layer === "rsc" ? clientReferenceOfModule(references, node.id) : void 0;
+			if (reference) {
+				const client = await load("browser", reference.importId);
+				if (!client) return;
+				clientModules.set(node, client);
+				return follow("browser", client);
+			}
+			await Promise.all(Array.from(node.importedModules, async (imported) => {
+				if (!imported.id || isCSSRequest(imported.id) || isBuiltin(imported.id)) return;
+				if (!isCode(imported.id, pageExtensions)) return;
+				if (options.isHostPackageFile(imported.id.split("?")[0])) return;
+				const loaded = imported.transformResult ? imported : await load(layer, imported.url);
+				if (loaded) await follow(layer, loaded);
+			}));
+		}
+		/** The stylesheets that `start` reaches, in the order of the imports. */
+		function collect(start) {
+			const paths = /* @__PURE__ */ new Set();
+			const seen = /* @__PURE__ */ new Set();
+			const visit = (node) => {
+				if (seen.has(node) || !node.id || isEnd(node.id)) return;
+				seen.add(node);
+				const client = clientModules.get(node);
+				if (client) return visit(client);
+				for (const imported of node.importedModules) {
+					if (!imported.id) continue;
+					if (isLinked(imported.id)) paths.add(serveAt(imported));
+					else if (!isCSSRequest(imported.id)) visit(imported);
+				}
+			};
+			start.forEach(visit);
+			return [...paths];
+		}
+		return {
+			load,
+			follow,
+			collect
+		};
+	}
+	/**
+	* The stylesheets of a route, per file of a segment: see `Stylesheets`. The
+	* node of a test is the page of its route, and no file: its stylesheets are
+	* those of the files of the host that render it, `hostFiles` of
+	* renderServer(), in their order. Under Vitest those are the setup files
+	* and the test file; see `nodeFiles` in registry.ts. With `layouts: true`
+	* the layouts of the app around it have their own.
+	*/
+	async function stylesheetsOf(vite, files, entry, inline) {
+		const route = options.pageRoutes().get(entry);
+		if (!route) return {};
+		const { load, follow, collect } = reach(vite);
+		const starts = /* @__PURE__ */ new Map();
+		await Promise.all((await segmentsOf(route)).map(async ({ file, stylesheetsKey }) => {
+			const node = await load("rsc", file);
+			if (node) starts.set(stylesheetsKey, [node]);
+		}));
+		if ("component" in route) starts.set(componentPagePath, hostFileNodes(vite, files, "the files that render a node, `hostFiles` of renderServer() or its default under Vitest,"));
+		await Promise.all([...starts.values()].flat().map((node) => follow("rsc", node)));
+		const contentOf = async (path) => inline && inlinesCss() ? (await cssOf(vite, path))?.code : void 0;
+		const fontsOf = async (path) => {
+			const request = fontRequestOf(stylesheetIds.get(path) ?? "");
+			return request === void 0 ? void 0 : (await getProject().loadFont(request)).files;
+		};
+		return Object.fromEntries(await Promise.all(Array.from(starts, async ([file, start]) => [file, await Promise.all(collect(start).map(async (path) => ({
+			path: await versioned(vite, path),
+			content: await contentOf(path),
+			fonts: await fontsOf(path)
+		})))])));
+	}
+	async function compileRoute(vite, entry) {
+		const route = options.pageRoutes().get(entry);
+		if (!route) return;
+		const queue = oneAtATime();
+		const { load, follow, collect } = reach(vite, queue);
+		const starts = (await Promise.all((await segmentsOf(route)).map(({ file }) => load("rsc", file)))).filter((node) => node !== void 0);
+		await Promise.all(starts.map((node) => follow("rsc", node)));
+		const rsc = vite.environments[environments.rsc];
+		await Promise.all(collect(starts).map((path) => Promise.all([queue(() => rsc.transformRequest(stylesheetIds.get(path))), queue(() => cssOf(vite, path))]).catch(() => {})));
+	}
+	function hostFileNodes(vite, files, named) {
+		const rsc = vite.environments[environments.rsc];
+		return files.flatMap((file) => {
+			if (!options.isHostFile(file)) {
+				vite.config.logger.warnOnce(`vitest-plugin-rsc: ${named} name ${file}, which is neither a test file or setup file of Vitest nor matched by \`host.files\` of vitestPluginNext(); an in-source test file is a file of the app. Its stylesheets are not linked.`);
+				return [];
+			}
+			const nodes = rsc.moduleGraph.getModulesByFile(file);
+			if (!nodes?.size) vite.config.logger.warnOnce(`vitest-plugin-rsc: ${named} name ${file}, which the rsc layer has not loaded: the stylesheets it imports are not linked.`);
+			return [...nodes ?? []];
+		});
+	}
+	const fileOf = (file) => normalizePath(path.resolve(getProject().root, file));
+	async function versioned(server, path) {
+		const css = await cssOf(server, path).catch(() => null);
+		return css ? `${directory}/${versionOf(css)}${path.slice(directory.length)}` : path;
+	}
+	/**
+	* The stylesheets of the files of the host that the host uses,
+	* `linkStylesheetsOf()`: what each imports, as for a file that renders a
+	* node, in their order, each once. Such a use has no page of the app, so
+	* the page links them itself: see client-graph.ts.
+	*/
+	async function hostFilesStylesheetsOf(vite, files) {
+		const { follow, collect } = reach(vite);
+		const nodes = hostFileNodes(vite, files, "`linkStylesheetsOf()`");
+		await Promise.all(nodes.map((node) => follow("rsc", node)));
+		return linkedAt(vite, collect(nodes));
+	}
+	function linkedAt(vite, paths) {
+		const urlOf = (path) => path.split("/").map(encodeURIComponent).join("/");
+		return Promise.all(paths.map(async (path) => getProject().assetPath + urlOf(await versioned(vite, path))));
+	}
+	function changedStylesheets(graph, modules) {
+		const changed = /* @__PURE__ */ new Map();
+		if (inlinesCss()) return changed;
+		const reached = new Set(modules.flatMap((node) => [node, ...node.importers]));
+		for (const [path, id] of stylesheetIds) {
+			const css = graph.getModuleById(`${id}&direct`);
+			if (!css?.isSelfAccepting || !reached.has(css)) continue;
+			graph.invalidateModule(css);
+			changed.set(path, css);
+		}
+		return changed;
+	}
+	async function cssOf(server, path) {
+		const id = stylesheetIds.get(path);
+		return id ? server.environments[environments.rsc].transformRequest(`${id}&direct`) : null;
+	}
+	const versions = /* @__PURE__ */ new WeakMap();
+	function versionOf(css) {
+		let version = versions.get(css);
+		if (!version) {
+			version = createHash("sha1").update(css.code).update(css.map?.mappings ?? "").digest("hex").slice(0, 16);
+			versions.set(css, version);
+		}
+		return version;
+	}
+	async function serve(server, request, response) {
+		const { assetPath } = getProject();
+		const { pathname } = new URL(request.url, "http://n");
+		if (!pathname.startsWith(`${assetPath}${directory}/`)) return false;
+		let path;
+		try {
+			path = pathname.slice(assetPath.length).split("/").map(decodeURIComponent).join("/");
+		} catch {
+			return false;
+		}
+		const [, hash, rest] = versionRE.exec(path) ?? [];
+		const version = hash && !stylesheetIds.has(path) && stylesheetIds.has(directory + rest) ? hash : void 0;
+		if (version) path = directory + rest;
+		const css = await cssOf(server, path);
+		if (!css) return false;
+		const current = versionOf(css);
+		send(request, response, css.code, "css", {
+			etag: `"${current}"`,
+			cacheControl: version === current ? "public, max-age=31536000, immutable" : "no-cache",
+			headers: server.config.server.headers,
+			map: css.map
+		});
+		return true;
+	}
+	const built = createBuiltFiles(options, segmentsOf);
+	return {
+		plugins: [
+			{
+				name: "vitest-plugin-rsc:next-styles",
+				enforce: "pre",
+				configureServer(vite) {
+					answerPage(vite, stylesheetsEvent, (question) => "hostFiles" in question ? hostFilesStylesheetsOf(vite, question.hostFiles.map(fileOf)) : stylesheetsOf(vite, question.files.map(fileOf), question.entry, question.inline));
+					vite.watcher.on("all", () => {
+						for (const [key, loaded] of loads) loaded.module.then((node) => {
+							if (!node && loads.get(key) === loaded) loads.delete(key);
+						});
+					});
+					vite.middlewares.use(async (request, response, next) => {
+						let served;
+						try {
+							served = await serve(vite, request, response);
+						} catch (error) {
+							vite.config.logger.error(`vitest-plugin-rsc: ${request.url} failed. ${String(error)}`);
+							response.statusCode = 500;
+							response.end("Internal Server Error");
+							return;
+						}
+						if (!served) next();
+					});
+				},
+				hotUpdate: {
+					order: "pre",
+					async handler({ modules, server }) {
+						if (!layers.has(this.environment.name)) return;
+						const moved = /* @__PURE__ */ new Set();
+						if (this.environment.name === environments.rsc) {
+							const changed = changedStylesheets(this.environment.moduleGraph, modules);
+							if (changed.size > 0) {
+								const data = await linkedAt(server, [...changed.keys()]);
+								this.environment.hot.send({
+									type: "custom",
+									event: stylesheetsChangedEvent,
+									data
+								});
+							}
+							for (const css of changed.values()) moved.add(css);
+						}
+						const updated = modules.filter((node) => !moved.has(node) && !movesItsLinks(node));
+						if (updated.length < modules.length) return updated;
+					}
+				},
+				async resolveId(source, importer, resolveOptions) {
+					const layer = layers.get(this.environment.name);
+					if (!layer || !importer || source.includes("?") || isScriptRequest(source)) return;
+					const file = importer.split("?")[0];
+					if (layer === "rsc" && !options.isServerCode(file) && !options.isHostFile(file)) return;
+					const resolved = await this.resolve(source, importer, {
+						...resolveOptions,
+						skipSelf: true
+					});
+					if (!resolved || resolved.external || resolved.id.includes("?")) return resolved;
+					if (!isCSSRequest(resolved.id)) return resolved;
+					return {
+						...resolved,
+						id: linked(resolved.id, this.environment.mode === "build")
+					};
+				},
+				transform(code, id) {
+					if (!/\.css(?:$|\?)/.test(id) || /[?&](?:raw|url)\b/.test(id)) return;
+					const declared = declareImportedLayers(code);
+					if (declared !== code) return {
+						code: declared,
+						map: null
+					};
+				}
+			},
+			{
+				name: "vitest-plugin-rsc:next-styles-module",
+				enforce: "post",
+				applyToEnvironment: (environment) => layers.has(environment.name),
+				transform(code, id) {
+					if (!isLinked(id) || directRE.test(id)) return;
+					const exports = exportsOfStylesheet(code, id);
+					const movesLinks = exports === noExports && !inlinesCss();
+					return {
+						code: exports,
+						map: { mappings: "" },
+						meta: { [metaKey]: { movesLinks } }
+					};
+				}
+			},
+			...built.plugins
+		],
+		compileRoute,
+		builtFiles: built.files
+	};
+}
+function oneAtATime() {
+	let last = Promise.resolve();
+	return (task) => {
+		const run = last.then(() => new Promise((resolve) => setImmediate(resolve))).then(task);
+		last = run.catch(() => {});
+		return run;
+	};
+}
+const realRoots = /* @__PURE__ */ new Map();
+function realRootOf(root) {
+	let real = realRoots.get(root);
+	if (real === void 0) {
+		real = fs.existsSync(root) ? normalizePath(fs.realpathSync(root)) : normalizePath(root);
+		realRoots.set(root, real);
+	}
+	return real;
+}
+/**
+* The key of a file of the host in `hostFiles` of `BuiltFiles`, by the
+* id of its module in a build: its path from the root of the project, the
+* same on every machine. Nothing for a file on another drive of Windows,
+* which has no way from the root: its path is the machine's.
+*/
+function builtHostFileKey(id, root) {
+	const file = normalizePath(path.relative(realRootOf(normalizePath(root)), id));
+	return path.isAbsolute(file) ? void 0 : file;
+}
+/**
+* The key of a module of a build, as `builtHostFileKey()` has it, when the
+* module is a file of the host: matched by its path from the root, as
+* `host.files` are from the root as the config has it. Nothing for a module
+* that is no file, or one with a query.
+*/
+function builtHostFileOf(id, root, isHostFile) {
+	if (id.startsWith("\0") || id.includes("?")) return void 0;
+	const file = builtHostFileKey(id, root);
+	if (file === void 0 || !isHostFile(path.posix.join(normalizePath(root), file))) return;
+	return file;
+}
+const builtAssetRE = /__VITE_ASSET__([\w$]+)__/g;
+const publicAssetRE = /__VITE_PUBLIC_ASSET__([a-z\d]{8})__/g;
+const publicAssetHash = (url) => createHash("sha256").update(url).digest("hex").slice(0, 8);
+const cssUrlRE = /\burl\(\s*(?:"([^"]*)"|'([^']*)'|([^'")\s]*))\s*\)|"(\/[^"]*)"|'(\/[^']*)'/g;
+/**
+* The stylesheets of a static build, which has no dev server to ask. So the
+* build does what Next's build does: it writes each stylesheet into a file of
+* its own under `/_next/static/css/`, and the stylesheets of every page route
+* into a file next to the layers, which the page reads (`builtStylesheetsOf()`
+* in styles-shared.ts).
+*
+* The CSS is what Vite's CSS plugin compiles the file into, with the files it
+* names by the way from the stylesheet. Vite leaves a stylesheet that Next
+* links out of the CSS of its chunks, see `linked()`: it is on the pages that
+* link it, and only there. The lists are read off the module graphs of the
+* build, as `reach()` reads them off the dev server's: the rsc layer for the
+* files of the segments and the files of the host, and the layer of the
+* browser for the Client Components, which is built after it. The node of a
+* route has the stylesheets of the files of the host that the page names
+* when it renders the node, as with the dev server: the build lists them
+* for every file of the host it has, by its path from the root of the
+* project, which is the same on every machine.
+*
+* The file also lists the modules of every page route, which a page load
+* starts at once with the stylesheets: see route-chunks.ts.
+*/
+function createBuiltFiles(options, segmentsOf) {
+	const { environments, getProject } = options;
+	const lists = new Set(options.lists);
+	const layerOf = (environment) => environment === environments.rsc ? "rsc" : environment === environments.browser ? "browser" : void 0;
+	let manager;
+	let publicDir = false;
+	const key = (layer, id) => `${layer}\0${id}`;
+	const compiled = /* @__PURE__ */ new Map();
+	const files = /* @__PURE__ */ new Map();
+	const fonts = /* @__PURE__ */ new Map();
+	const routes = /* @__PURE__ */ new Map();
+	const hostFiles = /* @__PURE__ */ new Map();
+	const clients = /* @__PURE__ */ new Map();
+	const modules = /* @__PURE__ */ new Map();
+	const publicUrls = /* @__PURE__ */ new Map();
+	let listed = false;
+	const publicUrl = (hash) => {
+		if (!listed) {
+			listed = true;
+			const files = publicDir ? fs.readdirSync(publicDir, { recursive: true }) : [];
+			for (const file of files) {
+				const url = `/${normalizePath(String(file))}`;
+				publicUrls.set(publicAssetHash(url), url);
+			}
+		}
+		return publicUrls.get(hash);
+	};
+	function importsIn(context) {
+		const imports = /* @__PURE__ */ new Map();
+		return (id) => {
+			if (!imports.has(id)) {
+				const info = context.getModuleInfo(id);
+				imports.set(id, info ? [...info.importedIds, ...info.dynamicallyImportedIds] : void 0);
+			}
+			return imports.get(id);
+		};
+	}
+	function reachIn(imports, starts, references = {}) {
+		const reached = [];
+		const seen = /* @__PURE__ */ new Set();
+		const visit = (id) => {
+			if (seen.has(id) || lists.has(id)) return;
+			seen.add(id);
+			const reference = references[id];
+			if (reference) {
+				reached.push({ client: reference.importId });
+				return;
+			}
+			for (const imported of imports(id) ?? []) if (isLinked(imported)) reached.push({ stylesheet: imported });
+			else if (!isCSSRequest(imported)) visit(imported);
+		};
+		starts.forEach(visit);
+		return reached;
+	}
+	const plugin = {
+		name: "vitest-plugin-rsc:next-styles-build",
+		apply: "build",
+		configResolved(config) {
+			manager = getPluginApi(config)?.manager;
+			publicDir = config.publicDir || false;
+		},
+		buildStart() {
+			const layer = layerOf(this.environment.name);
+			if (!layer || manager?.isScanBuild) return;
+			for (const map of [compiled, files]) for (const id of map.keys()) if (id.startsWith(key(layer, ""))) map.delete(id);
+			if (layer === "rsc") {
+				routes.clear();
+				hostFiles.clear();
+				modules.clear();
+			} else clients.clear();
+		},
+		transform(code, id) {
+			const layer = layerOf(this.environment.name);
+			if (!layer || manager?.isScanBuild || !isLinked(id) || directRE.test(id)) return;
+			compiled.set(key(layer, id), code);
+		},
+		async buildEnd(error) {
+			const layer = layerOf(this.environment.name);
+			if (error || !layer || !manager || manager.isScanBuild) return;
+			const imports = importsIn(this);
+			if (layer === "rsc") {
+				for (const [entry, route] of options.pageRoutes()) {
+					const segments = /* @__PURE__ */ new Map();
+					for (const { file, stylesheetsKey } of await segmentsOf(route)) {
+						let id = normalizePath(file);
+						if (!this.getModuleInfo(id) && fs.existsSync(file)) id = normalizePath(fs.realpathSync(file));
+						const reached = reachIn(imports, [id], manager.clientReferenceMetaMap);
+						segments.set(stylesheetsKey, reached);
+					}
+					if ("component" in route) segments.set(componentPagePath, []);
+					routes.set(entry, segments);
+				}
+				const project = getProject();
+				const { pageExtensions = [] } = project.config;
+				for (const id of this.getModuleIds()) {
+					if (!isCode(id, pageExtensions)) continue;
+					const file = builtHostFileOf(id, project.root, options.isHostFile);
+					if (file === void 0) continue;
+					hostFiles.set(file, reachIn(imports, [id], manager.clientReferenceMetaMap));
+				}
+				return;
+			}
+			const stylesheetsOf = (reached) => reached.flatMap((item) => "stylesheet" in item ? [item.stylesheet] : []);
+			const importer = `\0${clientReferencesId}`;
+			const reached = [...[...routes.values()].flatMap((segments) => [...segments.values()]), ...hostFiles.values()];
+			for (const item of reached.flat()) {
+				if (!("client" in item) || clients.has(item.client)) continue;
+				const resolved = await this.resolve(item.client, importer);
+				clients.set(item.client, resolved ? stylesheetsOf(reachIn(imports, [resolved.id])) : []);
+			}
+		},
+		async generateBundle(_options, bundle) {
+			const layer = layerOf(this.environment.name);
+			if (!layer || manager?.isScanBuild) return;
+			if (layer === "rsc") {
+				const routes = Array.from(options.pageRoutes().keys(), (route) => {
+					const entry = options.entryIdOf(route);
+					return [route, [entry, ...this.getModuleInfo(entry)?.dynamicallyImportedIds ?? []]];
+				});
+				for (const [route, chunks] of routeChunksOf(bundle, [...lists], routes)) modules.set(route, chunks);
+			}
+			const directory = `${getProject().assetPath.slice(1)}static/css/`;
+			const toRoot = toBuildDir(`${directory}stylesheet.css`);
+			for (const [id, css] of compiled) {
+				if (!id.startsWith(key(layer, ""))) continue;
+				const source = css.replace(builtAssetRE, (_, reference) => toRoot + this.getFileName(reference)).replace(publicAssetRE, (placeholder, hash) => {
+					const url = publicUrl(hash);
+					return url ? toRoot + url.slice(1) : placeholder;
+				}).replaceAll(`${cssBuildDirPlaceholder}/`, toRoot);
+				const file = id.slice(key(layer, "").length).split("?")[0];
+				const name = file.startsWith("\0") ? "font" : path.basename(file).replace(/\.[^.]*$/, "");
+				const hash = createHash("sha256").update(source).digest("hex").slice(0, 8);
+				const fileName = `${directory}${name.replace(/[^\w.-]+/g, "_")}-${hash}.css`;
+				this.emitFile({
+					type: "asset",
+					fileName,
+					source
+				});
+				files.set(id, fileName);
+				const request = fontRequestOf(file);
+				if (request !== void 0) {
+					const { files: fontFiles } = await getProject().loadFont(request);
+					const assetDirectory = getProject().assetPath.slice(1);
+					fonts.set(fileName, fontFiles.map((font) => assetDirectory + font));
+				}
+			}
+		}
+	};
+	const urls = {
+		name: "vitest-plugin-rsc:next-styles-build-urls",
+		apply: "build",
+		enforce: "pre",
+		transform(code, id) {
+			if (!layerOf(this.environment.name) || !isLinked(id) || directRE.test(id)) return;
+			for (const match of code.matchAll(cssUrlRE)) {
+				const url = match.slice(1).find((group) => group !== void 0).replace(/\\(\W)/g, "$1");
+				if (!url.startsWith("/") || url.startsWith("//")) continue;
+				try {
+					const decoded = decodeURI(url);
+					publicUrls.set(publicAssetHash(decoded), decoded);
+				} catch {}
+			}
+		}
+	};
+	/**
+	* The stylesheets of every page route and every file of the host, and the
+	* modules of every page route, by the files of the build.
+	*/
+	function builtFiles() {
+		if (routes.size === 0) return [];
+		const built = {
+			assetPath: getProject().assetPath,
+			routes: {},
+			hostFiles: {},
+			chunks: [],
+			modules: {},
+			fonts: Object.fromEntries([...fonts].sort(([a], [b]) => a.localeCompare(b)))
+		};
+		const indexes = /* @__PURE__ */ new Map();
+		for (const [route, chunks] of modules) built.modules[route] = chunks.map((chunk) => {
+			if (!indexes.has(chunk)) indexes.set(chunk, built.chunks.push(chunk) - 1);
+			return indexes.get(chunk);
+		});
+		const filesOf = (ids) => [...new Set(ids.flatMap((id) => files.get(id) ?? []))];
+		const idsOf = (reached) => reached.flatMap((item) => "stylesheet" in item ? [key("rsc", item.stylesheet)] : (clients.get(item.client) ?? []).map((id) => key("browser", id)));
+		for (const [entry, segments] of routes) built.routes[entry] = Object.fromEntries(Array.from(segments, ([segment, reached]) => [segment, filesOf(idsOf(reached))]));
+		for (const file of [...hostFiles.keys()].sort()) built.hostFiles[file] = filesOf(idsOf(hostFiles.get(file)));
+		return [{
+			pathname: `/${builtFilesPath}`,
+			body: Buffer.from(JSON.stringify(built))
+		}];
+	}
+	return {
+		plugins: [urls, plugin],
+		files: builtFiles
+	};
+}
+//#endregion
+export { builtHostFileKey, builtHostFileOf, changesInPlace, createStyles, declareImportedLayers, exportsOfStylesheet, isCode, linked, movesItsLinks };