vinext 0.2.0 → 0.2.1

package/dist/packages/cloudflare/src/tpr.js

@@ -306,6 +306,25 @@ const PRERENDER_PORT = 19384;
 const SERVER_STARTUP_TIMEOUT = 3e4;
 /** Max concurrent fetch requests during pre-rendering. */
 const FETCH_CONCURRENCY = 10;
+const NON_CACHEABLE_CACHE_CONTROL_RE = /\b(?:no-store|no-cache|private)\b/i;
+function getTprHeader(headers, name) {
+	const normalizedName = name.toLowerCase();
+	for (const [key, value] of Object.entries(headers)) if (key.toLowerCase() === normalizedName) return value;
+}
+function hasNonCacheableCacheControl(headers) {
+	const cacheControl = getTprHeader(headers, "cache-control");
+	return cacheControl ? NON_CACHEABLE_CACHE_CONTROL_RE.test(cacheControl) : false;
+}
+function readTprRevalidateHeader(headers) {
+	const revalidateHeader = getTprHeader(headers, VINEXT_REVALIDATE_HEADER);
+	if (revalidateHeader === void 0) return void 0;
+	return Number(revalidateHeader);
+}
+function isTprCacheable(headers) {
+	if (hasNonCacheableCacheControl(headers)) return false;
+	const revalidate = readTprRevalidateHeader(headers);
+	return revalidate === void 0 || Number.isFinite(revalidate) && revalidate > 0;
+}
 /**
 * Start a local production server, fetch each route to produce HTML,
 * and return the results. Pages that fail to render are skipped.
@@ -333,11 +352,12 @@ async function prerenderRoutes(routes, root, hostDomain) {
 						redirect: "manual"
 					});
 					if (response.status < 400) {
-						const html = await response.text();
 						const headers = {};
 						response.headers.forEach((value, key) => {
 							if (key === "content-type" || key === "cache-control" || key === "x-vinext-revalidate" || key === "location") headers[key] = value;
 						});
+						if (!isTprCacheable(headers)) return;
+						const html = await response.text();
 						results.set(routePath, {
 							html,
 							status: response.status,
@@ -427,10 +447,11 @@ function buildTprKVPairs(entries, buildId, defaultRevalidateSeconds) {
 	const now = Date.now();
 	const pairs = [];
 	for (const [routePath, result] of entries) {
-		const revalidateHeader = result.headers[VINEXT_REVALIDATE_HEADER];
-		const revalidateSeconds = revalidateHeader && !isNaN(Number(revalidateHeader)) ? Number(revalidateHeader) : defaultRevalidateSeconds;
-		const revalidateAt = revalidateSeconds > 0 ? now + revalidateSeconds * 1e3 : null;
-		const kvTtl = revalidateSeconds > 0 ? MAX_KV_TTL_SECONDS : 24 * 3600;
+		if (!isTprCacheable(result.headers)) continue;
+		const revalidateSeconds = readTprRevalidateHeader(result.headers) ?? defaultRevalidateSeconds;
+		if (!Number.isFinite(revalidateSeconds) || revalidateSeconds <= 0) continue;
+		const revalidateAt = now + revalidateSeconds * 1e3;
+		const kvTtl = MAX_KV_TTL_SECONDS;
 		const tags = buildAppPageCacheTags(routePath, []);
 		const entry = {
 			value: {

package/dist/plugins/fonts.js

@@ -1,11 +1,11 @@
 import { escapeRegExp } from "../utils/regex.js";
+import { ASSET_PREFIX_URL_DIR } from "../utils/asset-prefix.js";
 import { lastSignificantChar } from "../utils/has-trailing-comma.js";
 import { buildFallbackFontFace, getFallbackFontOverrideMetrics } from "../build/google-fonts/fallback-metrics.js";
 import { validateGoogleFontOptions } from "../build/google-fonts/validate.js";
 import { getFontAxes } from "../build/google-fonts/get-axes.js";
 import { buildGoogleFontsUrl } from "../build/google-fonts/build-url.js";
 import { findFontFilesInCss } from "../build/google-fonts/find-font-files-in-css.js";
-import { ASSET_PREFIX_URL_DIR } from "../utils/asset-prefix.js";
 import { CONTENT_TYPES } from "../server/static-file-cache.js";
 import fs from "node:fs";
 import path from "node:path";

package/dist/plugins/ignore-dynamic-requests.js

@@ -384,7 +384,7 @@ function dynamicImportReplacement() {
 function transformVeryDynamicRequests(code, id) {
 	if (!code.includes("require") && !mayContainDynamicImport(code)) return null;
 	const extension = path.extname(id.split("?", 1)[0]);
-	const lang = extension === ".ts" || extension === ".mts" || extension === ".cts" ? "ts" : extension === ".tsx" ? "tsx" : extension === ".jsx" ? "jsx" : "js";
+	const lang = extension === ".ts" || extension === ".mts" || extension === ".cts" ? "ts" : extension === ".tsx" ? "tsx" : extension === ".js" || extension === ".jsx" || extension === ".mjs" || extension === ".cjs" ? "jsx" : "js";
 	let ast;
 	try {
 		ast = parseAst(code, { lang });

package/dist/plugins/og-assets.js

@@ -1,3 +1,4 @@
+import { normalizePathSeparators } from "../utils/path.js";
 import { OgAssetOwnership } from "./og-asset-ownership.js";
 import { createRequire } from "node:module";
 import fs from "node:fs";
@@ -182,7 +183,7 @@ function createOgAssetsPlugin() {
 					for (const chunk of chunks) {
 						const re = fallbackUrlRegex(base);
 						const chunkDir = path.posix.dirname(chunk.fileName);
-						const rel = path.posix.relative(chunkDir, emitted);
+						const rel = normalizePathSeparators(path.relative(chunkDir, emitted));
 						const ref = rel.startsWith(".") ? rel : `./${rel}`;
 						const s = new MagicString(chunk.code);
 						let edited = false;

package/dist/plugins/optimize-imports.js

@@ -1,5 +1,5 @@
-import { escapeRegExp } from "../utils/regex.js";
 import { normalizePathSeparators } from "../utils/path.js";
+import { escapeRegExp } from "../utils/regex.js";
 import { VIRTUAL_MODULE_ID_RE } from "../utils/virtual-module.js";
 import { getAstName } from "./ast-utils.js";
 import { createRequire } from "node:module";

package/dist/plugins/rsc-reference-validation-normalizer.d.ts

@@ -0,0 +1,12 @@
+import { Plugin } from "vite";
+
+//#region src/plugins/rsc-reference-validation-normalizer.d.ts
+/**
+ * @vitejs/plugin-rsc stores dev virtual client-reference keys in Vite's encoded
+ * `/@id/__x00__...` form, but React's SSR consumer can ask validation for the
+ * decoded `/@id/\0...` form. Treat those as equivalent and fall through to the
+ * upstream validator for all other invalid references.
+ */
+declare function createRscReferenceValidationNormalizerPlugin(): Plugin;
+//#endregion
+export { createRscReferenceValidationNormalizerPlugin };

package/dist/plugins/rsc-reference-validation-normalizer.js

@@ -0,0 +1,48 @@
+//#region src/plugins/rsc-reference-validation-normalizer.ts
+const REFERENCE_VALIDATION_ID_PREFIX = "\0virtual:vite-rsc/reference-validation?";
+function parseReferenceValidationQuery(id) {
+	const queryStart = id.indexOf("?");
+	if (queryStart === -1) return null;
+	return Object.fromEntries(new URLSearchParams(id.slice(queryStart + 1)));
+}
+function normalizeReferenceKey(id) {
+	return id.replaceAll("\0", "__x00__");
+}
+function hasReference(referenceMetaMap, referenceId) {
+	if (!referenceMetaMap || !referenceId) return false;
+	const normalizedReferenceId = normalizeReferenceKey(referenceId);
+	return Object.values(referenceMetaMap).some((meta) => normalizeReferenceKey(meta.referenceKey) === normalizedReferenceId);
+}
+/**
+* @vitejs/plugin-rsc stores dev virtual client-reference keys in Vite's encoded
+* `/@id/__x00__...` form, but React's SSR consumer can ask validation for the
+* decoded `/@id/\0...` form. Treat those as equivalent and fall through to the
+* upstream validator for all other invalid references.
+*/
+function createRscReferenceValidationNormalizerPlugin() {
+	let rscApi;
+	return {
+		name: "vinext:rsc-reference-validation-normalizer",
+		enforce: "pre",
+		apply(_config, env) {
+			return env.command === "serve" && env.isPreview !== true;
+		},
+		configResolved(config) {
+			rscApi = config.plugins.find((plugin) => plugin.name === "rsc:minimal")?.api;
+		},
+		load: {
+			filter: { id: /^\u0000virtual:vite-rsc\/reference-validation\?/ },
+			handler(id) {
+				if (!id.startsWith(REFERENCE_VALIDATION_ID_PREFIX)) return null;
+				const query = parseReferenceValidationQuery(id);
+				if (!query) return null;
+				const manager = rscApi?.manager;
+				if (query.type === "client" && hasReference(manager?.clientReferenceMetaMap, query.id)) return "export {}";
+				if (query.type === "server" && hasReference(manager?.serverReferenceMetaMap, query.id)) return "export {}";
+				return null;
+			}
+		}
+	};
+}
+//#endregion
+export { createRscReferenceValidationNormalizerPlugin };

package/dist/plugins/sass.d.ts

@@ -35,6 +35,22 @@ type VitePreprocessorOptions = {
 declare function createSassTildeImporter(root: string): {
   findFileUrl(url: string): URL | null;
 };
+type SassLoadedStylesheet = {
+  contents: string;
+  syntax: "scss" | "indented" | "css";
+};
+/**
+ * Preserve source-asset provenance for `url()` references inside imported Sass
+ * partials. Vite's transform hook only sees the entry stylesheet after Sass has
+ * flattened its imports, at which point relative URLs from a partial have lost
+ * the partial's source filename. Marking the partial before compilation keeps
+ * byte-identical assets associated with their original basenames.
+ */
+declare function createSassCssUrlAssetImporter(): {
+  canonicalize(url: string): URL | null;
+  load(canonicalUrl: URL): SassLoadedStylesheet | null;
+  rewriteImports(source: string, filename: string): string;
+};
 declare function buildSassPreprocessorOptions(sassOptions: Record<string, unknown> | null | undefined): VitePreprocessorOptions | undefined;
 /**
  * Create a per-build binding of {@link SassAwareFileSystemLoader}.
@@ -59,4 +75,4 @@ declare function createSassAwareFileSystemLoader(): {
   setResolvedConfig: (config: ResolvedConfig) => void;
 };
 //#endregion
-export { buildSassPreprocessorOptions, createSassAwareFileSystemLoader, createSassTildeImporter };
+export { buildSassPreprocessorOptions, createSassAwareFileSystemLoader, createSassCssUrlAssetImporter, createSassTildeImporter };

package/dist/plugins/sass.js

@@ -1,3 +1,4 @@
+import { markCssUrlAssetReferences, rebaseCssUrlAssetReferences } from "../build/css-url-assets.js";
 import { createRequire } from "node:module";
 import fs from "node:fs";
 import path from "node:path";
@@ -75,6 +76,78 @@ function createSassTildeImporter(root) {
 		}
 	} };
 }
+function sassStylesheetCandidates(importPath) {
+	const extension = path.extname(importPath);
+	const directory = path.dirname(importPath);
+	const basename = path.basename(importPath, extension);
+	const candidates = [];
+	const extensions = extension ? [extension] : [
+		".scss",
+		".sass",
+		".css"
+	];
+	for (const candidateExtension of extensions) {
+		const basePath = extension ? importPath : `${importPath}${candidateExtension}`;
+		candidates.push(basePath);
+		candidates.push(path.join(directory, `_${basename}${candidateExtension}`));
+	}
+	for (const candidateExtension of extensions) {
+		candidates.push(path.join(importPath, `index${candidateExtension}`));
+		candidates.push(path.join(importPath, `_index${candidateExtension}`));
+	}
+	return candidates;
+}
+function deriveSassNamespace(importUrl) {
+	const parts = importUrl.replaceAll("\\", "/").replace(/\/$/, "").split("/");
+	let basename = parts.pop() ?? "stylesheet";
+	basename = basename.replace(/^_/, "").replace(/\..*$/, "");
+	if (basename === "index" && parts.length > 0) basename = (parts.pop() ?? basename).replace(/^_/, "").replace(/\..*$/, "");
+	return basename;
+}
+/**
+* Preserve source-asset provenance for `url()` references inside imported Sass
+* partials. Vite's transform hook only sees the entry stylesheet after Sass has
+* flattened its imports, at which point relative URLs from a partial have lost
+* the partial's source filename. Marking the partial before compilation keeps
+* byte-identical assets associated with their original basenames.
+*/
+function createSassCssUrlAssetImporter() {
+	const markedStylesheets = /* @__PURE__ */ new Map();
+	const importUrlPrefix = "vinext-css-url-asset:";
+	const prepareStylesheet = (filename, entryDirectory) => {
+		const contents = fs.readFileSync(filename, "utf8");
+		const marked = markCssUrlAssetReferences(rebaseCssUrlAssetReferences(contents, path.dirname(filename), entryDirectory) ?? contents, filename);
+		if (marked === null) return null;
+		const extension = path.extname(filename).toLowerCase();
+		return {
+			contents: rewriteImports(marked, filename, entryDirectory),
+			syntax: extension === ".sass" ? "indented" : extension === ".css" ? "css" : "scss"
+		};
+	};
+	const rewriteImports = (source, filename, entryDirectory = path.dirname(filename)) => source.replace(/(@(import|use|forward)\s+)(["'])(\.[^"']+)\3([^;]*;?)/g, (match, prefix, rule, quote, importUrl, suffix) => {
+		const importPath = path.resolve(path.dirname(filename), importUrl);
+		for (const candidate of sassStylesheetCandidates(importPath)) {
+			if (!fs.statSync(candidate, { throwIfNoEntry: false })?.isFile()) continue;
+			const prepared = prepareStylesheet(candidate, entryDirectory);
+			if (prepared === null) return match;
+			const canonicalUrl = pathToFileURL(candidate);
+			markedStylesheets.set(canonicalUrl.href, prepared);
+			const namespace = rule === "use" && !/\bas\s+(?:\*|[-\w]+)/.test(suffix) ? ` as ${deriveSassNamespace(importUrl)}` : "";
+			return `${prefix}${quote}${importUrlPrefix}${encodeURIComponent(candidate)}${quote}${namespace}${suffix}`;
+		}
+		return match;
+	});
+	return {
+		canonicalize(url) {
+			if (!url.startsWith(importUrlPrefix)) return null;
+			return pathToFileURL(decodeURIComponent(url.slice(21)));
+		},
+		load(canonicalUrl) {
+			return markedStylesheets.get(canonicalUrl.href) ?? null;
+		},
+		rewriteImports
+	};
+}
 function buildSassPreprocessorOptions(sassOptions) {
 	if (!sassOptions || typeof sassOptions !== "object") return void 0;
 	const { prependData, additionalData, includePaths, loadPaths, ...rest } = sassOptions;
@@ -265,4 +338,4 @@ function createSassAwareFileSystemLoader() {
 	};
 }
 //#endregion
-export { buildSassPreprocessorOptions, createSassAwareFileSystemLoader, createSassTildeImporter };
+export { buildSassPreprocessorOptions, createSassAwareFileSystemLoader, createSassCssUrlAssetImporter, createSassTildeImporter };

package/dist/plugins/styled-jsx.d.ts

@@ -0,0 +1,16 @@
+import { Plugin } from "vite";
+
+//#region src/plugins/styled-jsx.d.ts
+type NextSwcModule = {
+  loadBindings(): Promise<unknown>;
+  transform(source: string, options: Record<string, unknown>): Promise<{
+    code: string;
+    map?: string;
+  }>;
+};
+type StyledJsxPluginOptions = {
+  importModule?: (url: string) => Promise<NextSwcModule>;
+};
+declare function createStyledJsxPlugin(initialProjectRoot: string, options?: StyledJsxPluginOptions): Plugin;
+//#endregion
+export { createStyledJsxPlugin };

package/dist/plugins/styled-jsx.js

@@ -0,0 +1,149 @@
+import { createRequire } from "node:module";
+import path from "node:path";
+import { parseAst } from "vite";
+import { pathToFileURL } from "node:url";
+//#region src/plugins/styled-jsx.ts
+const STYLED_JSX_IMPORT_RE = /^styled-jsx(?:\/.*)?$/;
+const NODE_MODULES_RE = /[\\/]node_modules[\\/]/;
+const STYLED_JSX_SOURCE_RE = /(?:<style\b|from\s+["']styled-jsx\/css["']|require\s*\(\s*["']styled-jsx\/css["']\s*\))/;
+const STYLED_JSX_CSS_RE = /(?:from\s+["']styled-jsx\/css["']|require\s*\(\s*["']styled-jsx\/css["']\s*\))/;
+function hasStyledJsxTag(source, id) {
+	const cleanId = id.split("?")[0];
+	const extension = path.extname(cleanId);
+	const lang = extension === ".ts" || extension === ".mts" || extension === ".cts" ? "ts" : "tsx";
+	let ast;
+	try {
+		ast = parseAst(source, { lang });
+	} catch {
+		return false;
+	}
+	const pending = [ast];
+	const visited = /* @__PURE__ */ new Set();
+	while (pending.length > 0) {
+		const value = pending.pop();
+		if (!value || typeof value !== "object" || visited.has(value)) continue;
+		visited.add(value);
+		const node = value;
+		if (node.type === "JSXOpeningElement") {
+			const name = node.name;
+			if (name?.type === "JSXIdentifier" && name.name === "style") {
+				if (node.attributes?.some((attribute) => {
+					if (attribute.type !== "JSXAttribute") return false;
+					const attributeName = attribute.name;
+					return attributeName?.type === "JSXIdentifier" && attributeName.name === "jsx";
+				})) return true;
+			}
+		}
+		for (const child of Object.values(node)) if (Array.isArray(child)) pending.push(...child);
+		else if (child && typeof child === "object") pending.push(child);
+	}
+	return false;
+}
+function createProjectRequire(projectRoot) {
+	return createRequire(path.join(projectRoot, "package.json"));
+}
+function resolveNextRequire(projectRoot) {
+	try {
+		return createRequire(createProjectRequire(projectRoot).resolve("next/package.json"));
+	} catch {
+		return null;
+	}
+}
+function parserOptions(id) {
+	const extension = path.extname(id.split("?")[0]);
+	if (extension === ".ts" || extension === ".tsx") return {
+		syntax: "typescript",
+		tsx: extension === ".tsx",
+		decorators: true
+	};
+	return {
+		syntax: "ecmascript",
+		jsx: true
+	};
+}
+function createStyledJsxPlugin(initialProjectRoot, options = {}) {
+	let projectRoot = initialProjectRoot;
+	let development = false;
+	let nextRequire;
+	let compilerPromise = null;
+	const importModule = options.importModule ?? ((url) => import(url));
+	function getNextRequire() {
+		nextRequire ??= resolveNextRequire(projectRoot);
+		return nextRequire;
+	}
+	async function getCompiler() {
+		if (!compilerPromise) {
+			const requireFromNext = getNextRequire();
+			if (!requireFromNext) throw new Error("[vinext] styled-jsx requires an installed next package so vinext can use its matching compiler.");
+			compilerPromise = importModule(pathToFileURL(requireFromNext.resolve("next/dist/build/swc")).href).then(async (compiler) => {
+				await compiler.loadBindings();
+				return compiler;
+			});
+		}
+		return compilerPromise;
+	}
+	return {
+		name: "vinext:styled-jsx",
+		enforce: "pre",
+		configResolved(config) {
+			development = config.command === "serve";
+			if (config.root !== projectRoot) {
+				projectRoot = config.root;
+				nextRequire = void 0;
+				compilerPromise = null;
+			}
+		},
+		resolveId: {
+			filter: { id: STYLED_JSX_IMPORT_RE },
+			handler(source) {
+				try {
+					return getNextRequire()?.resolve(source) ?? null;
+				} catch {}
+				try {
+					return createProjectRequire(projectRoot).resolve(source);
+				} catch {
+					return null;
+				}
+			}
+		},
+		transform: {
+			filter: {
+				id: {
+					include: /\.[cm]?[jt]sx?(?:\?.*)?$/,
+					exclude: NODE_MODULES_RE
+				},
+				code: STYLED_JSX_SOURCE_RE
+			},
+			async handler(source, id) {
+				if (NODE_MODULES_RE.test(id.split("?")[0])) return null;
+				const hasStyledJsxCss = STYLED_JSX_CSS_RE.test(source);
+				const hasStyledJsxElement = !hasStyledJsxCss && hasStyledJsxTag(source, id);
+				if (!hasStyledJsxCss && !hasStyledJsxElement) return null;
+				if (!getNextRequire()) throw new Error("[vinext] styled-jsx requires an installed next package so vinext can use its matching compiler.");
+				const result = await (await getCompiler()).transform(source, {
+					filename: id.split("?")[0],
+					sourceMaps: true,
+					module: { type: "es6" },
+					styledJsx: { useLightningcss: false },
+					jsc: {
+						parser: parserOptions(id),
+						transform: {
+							react: {
+								runtime: "automatic",
+								development,
+								useBuiltins: true
+							},
+							optimizer: { simplify: false }
+						}
+					}
+				});
+				return {
+					code: result.code,
+					map: result.map ?? null
+				};
+			}
+		}
+	};
+}
+//#endregion
+export { createStyledJsxPlugin };

package/dist/routing/app-route-graph.js

@@ -1,5 +1,5 @@
-import { decodeRouteSegment, isInvisibleSegment, sortRoutes } from "./utils.js";
 import { normalizePathSeparators } from "../utils/path.js";
+import { decodeRouteSegment, isInvisibleSegment, sortRoutes } from "./utils.js";
 import { findFileWithExts, scanWithExtensions } from "./file-matcher.js";
 import { validateRoutePatterns } from "./route-validation.js";
 import { compareStrings } from "../utils/compare.js";
@@ -440,9 +440,9 @@ function validatePageRouteConflicts(routes, appDir) {
 	}
 }
 function formatAppFilePath(filePath, appDir) {
-	const relativePath = path.relative(appDir, filePath).replace(/\\/g, "/");
+	const relativePath = normalizePathSeparators(path.relative(appDir, filePath));
 	const parsedPath = path.parse(relativePath);
-	const withoutExtension = path.join(parsedPath.dir, parsedPath.name).replace(/\\/g, "/");
+	const withoutExtension = normalizePathSeparators(path.join(parsedPath.dir, parsedPath.name));
 	return withoutExtension.startsWith("/") ? withoutExtension : `/${withoutExtension}`;
 }
 /**
@@ -1180,9 +1180,7 @@ function findSlotRootPage(slotDir, matcher) {
 * default component, intercepting route, or nested page-backed sub-route.
 *
 * `dir` and `appDir` must be forward-slash. The slot directory is built from
-* `dir` with `path.posix.join`, and the owner segments and slot key come from
-* `path.posix.relative(appDir, …)`, which only yields a forward-slash relative
-* path when both operands already are.
+* `dir` with `path.posix.join`.
 */
 function discoverParallelSlots(dir, appDir, matcher, includeNestedOnlySlots = false) {
 	const entries = readDirEntriesCached(dir, matcher);
@@ -1197,12 +1195,12 @@ function discoverParallelSlots(dir, appDir, matcher, includeNestedOnlySlots = fa
 		const interceptingRoutes = discoverInterceptingRoutes(slotDir, dir, appDir, matcher);
 		const hasNestedPages = includeNestedOnlySlots && findSlotSubPages(slotDir, matcher).length > 0;
 		if (!pagePath && !defaultPath && interceptingRoutes.length === 0 && !hasNestedPages) continue;
-		const ownerSegments = path.posix.relative(appDir, dir).split("/").filter((segment) => segment.length > 0);
+		const ownerSegments = path.relative(appDir, dir).split(path.sep).filter((segment) => segment.length > 0);
 		const ownerTreePath = createAppRouteGraphTreePath(ownerSegments, ownerSegments.length);
 		const configLayoutPaths = findSlotConfigLayoutPaths(slotDir, pagePath, matcher);
 		slots.push({
 			id: createAppRouteGraphSlotId(slotName, ownerTreePath),
-			key: `${slotName}@${path.posix.relative(appDir, slotDir)}`,
+			key: `${slotName}@${normalizePathSeparators(path.relative(appDir, slotDir))}`,
 			name: slotName,
 			ownerDir: slotDir,
 			ownerTreePath,
@@ -1262,8 +1260,7 @@ function isInterceptionMarkerDir(name) {
 * They intercept navigation to another route and render within the slot instead.
 *
 * `slotDir`, `routeDir`, and `appDir` must be forward-slash. They are passed
-* down to `path.posix.join` and `path.posix.relative` when building the
-* intercept page paths and target patterns.
+* down to `path.posix.join` when building the intercept page paths.
 *
 * @param slotDir - The parallel slot directory (e.g. app/feed/@modal)
 * @param routeDir - The directory of the route that owns this slot (e.g. app/feed)
@@ -1283,13 +1280,17 @@ function discoverInterceptingRoutes(slotDir, routeDir, appDir, matcher) {
 * Sibling intercepts use the same conventions and target-computation logic as
 * slot intercepts, but their intercepting page replaces the full page response
 * (not a slot) during soft navigation.
+*
+* `appDir` and each route's `pagePath` / `routePath` must be forward-slash. The
+* owner directories are derived from `pagePath` / `routePath` and matched
+* against `appDir`-relative paths built with `path.posix.*`.
 */
 function discoverSiblingInterceptingRoutes(routes, appDir, matcher) {
 	const routesByDir = /* @__PURE__ */ new Map();
 	for (const route of routes) {
 		const filePath = route.pagePath ?? route.routePath;
 		if (!filePath) continue;
-		const routeDir = normalizePathSeparators(path.dirname(filePath));
+		const routeDir = path.posix.dirname(filePath);
 		if (!routesByDir.has(routeDir)) routesByDir.set(routeDir, route);
 	}
 	function walk(dir) {
@@ -1303,7 +1304,7 @@ function discoverSiblingInterceptingRoutes(routes, appDir, matcher) {
 			if (!entry.isDirectory()) continue;
 			if (entry.name.startsWith("_")) continue;
 			if (entry.name.startsWith("@")) continue;
-			const childDir = path.join(dir, entry.name);
+			const childDir = path.posix.join(dir, entry.name);
 			const marker = matchInterceptConvention(entry.name);
 			if (marker) {
 				const restOfName = entry.name.slice(marker.prefix.length);
@@ -1370,8 +1371,7 @@ function findOwnerRouteForDir(dir, appDir, routes, routesByDir) {
 * intercepting route directories.
 *
 * `currentDir`, `routeDir`, and `appDir` must be forward-slash. `currentDir`
-* descends with `path.posix.join` and all three reach the `path.posix.join` /
-* `path.posix.relative` calls that build the intercept page paths and patterns.
+* descends with `path.posix.join` when building the intercept page paths.
 */
 function scanForInterceptingPages(currentDir, routeDir, appDir, results, matcher) {
 	if (!fs.existsSync(currentDir)) return;
@@ -1397,6 +1397,12 @@ function matchInterceptConvention(name) {
 /**
 * Collect page.tsx files inside an intercepting route directory tree
 * and compute their target URL patterns.
+*
+* `currentDir`, `interceptRoot`, `routeDir`, `appDir`, and `interceptParentDir`
+* must all be forward-slash. `currentDir` descends with `path.posix.join` and
+* its `findFile` results become the stored layout/page paths. The others are
+* relativized against `appDir` (and each other) to derive the intercept page
+* segments and URL patterns.
 */
 function collectInterceptingPages(currentDir, interceptRoot, convention, interceptSegment, routeDir, appDir, interceptParentDir, results, matcher, parentLayoutPaths = []) {
 	const currentLayoutPath = findFile(currentDir, "layout", matcher);
@@ -1407,7 +1413,7 @@ function collectInterceptingPages(currentDir, interceptRoot, convention, interce
 		if (targetPattern) {
 			const sourceMatchPattern = computeInterceptSourceMatchPattern(interceptParentDir, appDir);
 			results.push({
-				branchSegments: [interceptSegment, ...normalizePathSeparators(path.relative(interceptRoot, path.dirname(page))).split("/").filter(Boolean)],
+				branchSegments: [interceptSegment, ...path.relative(interceptRoot, path.dirname(page)).split(path.sep).filter(Boolean)],
 				convention,
 				layoutPaths: [...layoutPaths],
 				layoutSegments: layoutPaths.map((layoutPath) => {
@@ -1426,7 +1432,7 @@ function collectInterceptingPages(currentDir, interceptRoot, convention, interce
 	for (const entry of entries) {
 		if (!entry.isDirectory()) continue;
 		if (entry.name.startsWith("_")) continue;
-		collectInterceptingPages(path.join(currentDir, entry.name), interceptRoot, convention, interceptSegment, routeDir, appDir, interceptParentDir, results, matcher, layoutPaths);
+		collectInterceptingPages(path.posix.join(currentDir, entry.name), interceptRoot, convention, interceptSegment, routeDir, appDir, interceptParentDir, results, matcher, layoutPaths);
 	}
 }
 /**

package/dist/routing/file-matcher.d.ts

@@ -39,11 +39,18 @@ declare function findFileWithExts(dir: string, name: string, matcher: ValidFileM
  *  1. User-configured pageExtensions go first (each prefixed with `.`) so
  *     the user's priority wins. e.g. `.platform.tsx` resolves before `.tsx`.
  *  2. Vite's defaults follow, with duplicates removed.
+ *  3. `.cjs`/`.cts` go last (lowest priority). Neither Vite's defaults nor the
+ *     user's pageExtensions include them, but `vinext init` renames CJS config
+ *     files (e.g. `tailwind.config.js` → `tailwind.config.cjs`) when it adds
+ *     `"type": "module"`, and app code imports those extensionlessly
+ *     (`import cfg from "../tailwind.config"`). Without these, the bundle fails
+ *     with "[UNRESOLVED_IMPORT] Could not resolve '../tailwind.config'".
  *
  * The user's pageExtensions retain their relative order, which is what
  * Next.js / Turbopack do via the `resolveExtensions` config option.
  *
- * See: cloudflare/vinext#1502
+ * See: cloudflare/vinext#1502 for page-extension ordering, and
+ * cloudflare/vinext#2435 for extensionless `.cjs` config imports.
  */
 declare function buildViteResolveExtensions(pageExtensions?: readonly string[] | null, viteDefaults?: readonly string[]): string[];
 /**

package/dist/routing/file-matcher.js

@@ -1,5 +1,5 @@
-import { escapeRegExp } from "../utils/regex.js";
 import { normalizePathSeparators } from "../utils/path.js";
+import { escapeRegExp } from "../utils/regex.js";
 import { existsSync } from "node:fs";
 import path from "node:path";
 import { glob } from "node:fs/promises";
@@ -91,11 +91,18 @@ function findFileWithExts(dir, name, matcher) {
 *  1. User-configured pageExtensions go first (each prefixed with `.`) so
 *     the user's priority wins. e.g. `.platform.tsx` resolves before `.tsx`.
 *  2. Vite's defaults follow, with duplicates removed.
+*  3. `.cjs`/`.cts` go last (lowest priority). Neither Vite's defaults nor the
+*     user's pageExtensions include them, but `vinext init` renames CJS config
+*     files (e.g. `tailwind.config.js` → `tailwind.config.cjs`) when it adds
+*     `"type": "module"`, and app code imports those extensionlessly
+*     (`import cfg from "../tailwind.config"`). Without these, the bundle fails
+*     with "[UNRESOLVED_IMPORT] Could not resolve '../tailwind.config'".
 *
 * The user's pageExtensions retain their relative order, which is what
 * Next.js / Turbopack do via the `resolveExtensions` config option.
 *
-* See: cloudflare/vinext#1502
+* See: cloudflare/vinext#1502 for page-extension ordering, and
+* cloudflare/vinext#2435 for extensionless `.cjs` config imports.
 */
 function buildViteResolveExtensions(pageExtensions, viteDefaults = [
 	".mjs",
@@ -109,7 +116,12 @@ function buildViteResolveExtensions(pageExtensions, viteDefaults = [
 	const dotted = normalizePageExtensions(pageExtensions).map((ext) => `.${ext}`);
 	const seen = /* @__PURE__ */ new Set();
 	const result = [];
-	for (const ext of [...dotted, ...viteDefaults]) {
+	for (const ext of [
+		...dotted,
+		...viteDefaults,
+		".cjs",
+		".cts"
+	]) {
 		if (seen.has(ext)) continue;
 		seen.add(ext);
 		result.push(ext);