vinext 0.1.1 → 0.1.2

package/dist/plugins/sass.js

@@ -1,4 +1,80 @@
+import { createRequire } from "node:module";
+import fs from "node:fs";
+import path from "node:path";
+import { preprocessCSS } from "vite";
+import { pathToFileURL } from "node:url";
 //#region src/plugins/sass.ts
+/**
+* Map a Next.js `sassOptions` object onto Vite's
+* `css.preprocessorOptions.scss` / `.sass` shape.
+*
+* Next.js (webpack + sass-loader) accepts:
+* - `additionalData` (or legacy `prependData`) — prepended to every source
+* - `includePaths` — directories searched by `@import`
+* - `loadPaths`    — modern Sass equivalent of `includePaths`
+* - `implementation` — Sass implementation package name (e.g. `sass-embedded`)
+* - other Sass options that get forwarded as-is
+*
+* Reference (Next.js source — destructures the same keys before forwarding
+* the rest to sass-loader):
+*   .nextjs-ref/packages/next/src/build/webpack/config/blocks/css/index.ts#L150-L180
+*   https://github.com/vercel/next.js/blob/canary/packages/next/src/build/webpack/config/blocks/css/index.ts
+*
+* Vite expects:
+* - `additionalData` (string or function) on the preprocessor options
+* - modern Sass options (`loadPaths`, `importers`, `implementation`, …)
+*   flattened next to `additionalData`
+*
+* @see https://vite.dev/config/shared-options.html#css-preprocessoroptions
+*/
+/**
+* Create a Sass `FileImporter` that resolves webpack-style tilde (`~`) imports.
+*
+* Next.js (via sass-loader's `webpackImporter`) supports two tilde forms:
+*
+* 1. `~pkg/path` — resolves `pkg/path` from `node_modules`. Used for
+*    third-party SCSS/CSS, e.g. `@import '~nprogress/nprogress.css'`.
+*
+* 2. `~/path` — resolves relative to the **project root** (the `~` acts as
+*    an alias for the root). Used with Turbopack's `resolveAlias: { '~*': '*' }`
+*    convention, e.g. `@use '~/styles/variables' as *`.
+*
+* Vite's built-in Sass resolver does not strip the `~` prefix, so any SCSS
+* that uses tilde imports fails with "Can't find stylesheet to import" errors.
+* This `FileImporter` runs before Vite's internal importer (added at the end
+* of `importers[]` in the vite:css plugin) and canonicalises tilde URLs so
+* Sass can load them from the filesystem.
+*
+* The returned object implements the modern Sass `FileImporter` interface:
+* `findFileUrl` returns a `file://` URL and Sass automatically handles partial
+* resolution (`_variables.scss` for `variables`), index files, and extensions.
+*
+* @param root - Absolute path to the Vite project root (used as the base for
+*   `~/path` resolution and for locating `node_modules`).
+*/
+function createSassTildeImporter(root) {
+	const rootBaseUrl = pathToFileURL(root.endsWith("/") ? root : root + "/");
+	const nodeModulesBaseUrl = pathToFileURL(path.join(root, "node_modules") + "/");
+	return { findFileUrl(url) {
+		if (!url.startsWith("~")) return null;
+		const stripped = url.slice(1);
+		if (stripped.startsWith("/")) return new URL(stripped.slice(1), rootBaseUrl);
+		if (!stripped) return null;
+		const simpleResolved = new URL(stripped, nodeModulesBaseUrl);
+		const pkgName = stripped.startsWith("@") ? stripped.split("/").slice(0, 2).join("/") : stripped.split("/")[0] ?? "";
+		const directPkgDir = path.join(root, "node_modules", pkgName);
+		if (pkgName && fs.existsSync(directPkgDir)) return simpleResolved;
+		const req = createRequire(path.join(root, "package.json"));
+		try {
+			const pkgJsonPath = req.resolve(`${pkgName}/package.json`);
+			const pkgDir = path.dirname(pkgJsonPath);
+			const afterPkg = stripped.startsWith("@") ? stripped.split("/").slice(2).join("/") : stripped.split("/").slice(1).join("/");
+			return pathToFileURL(afterPkg ? path.join(pkgDir, afterPkg) : pkgDir);
+		} catch {
+			return null;
+		}
+	} };
+}
 function buildSassPreprocessorOptions(sassOptions) {
 	if (!sassOptions || typeof sassOptions !== "object") return void 0;
 	const { prependData, additionalData, includePaths, loadPaths, ...rest } = sassOptions;
@@ -16,5 +92,177 @@ function buildSassPreprocessorOptions(sassOptions) {
 	if (Object.keys(out).length === 0) return void 0;
 	return out;
 }
+/**
+* Sort key comparator used by postcss-modules' FileSystemLoader to determine
+* the order in which dependency CSS is prepended to the output.
+* Mirrors the original `traceKeySorter` from postcss-modules source.
+*/
+function traceKeySorter(a, b) {
+	if (a.length < b.length) return a < b.substring(0, a.length) ? -1 : 1;
+	if (a.length > b.length) return a.substring(0, b.length) <= b ? -1 : 1;
+	return a < b ? -1 : 1;
+}
+/**
+* Mirrors Vite's internal `cssModuleRE` (`/\.module\.(css|less|sass|scss|…)/`).
+*
+* postcss-modules treats *every* `composes: x from './file'` dependency as a
+* CSS module regardless of its filename, but Vite's pipeline only applies
+* CSS-module scoping to `*.module.*` files. When a dependency is not named
+* `*.module.*` (e.g. `composes: x from './plain.css'`), we hand
+* `preprocessCSS` a virtual `*.module.*` filename (same directory, so Sass
+* imports and relative resolution are unaffected) so the dependency's classes
+* are scoped and its export tokens extracted — matching what postcss-modules'
+* built-in `FileSystemLoader` did.
+*/
+const CSS_MODULE_RE = /\.module\.\w+$/;
+/**
+* Sass-aware replacement for postcss-modules' `FileSystemLoader`.
+*
+* Implements the same constructor + `fetch` + `finalSource` interface that
+* postcss-modules calls when resolving `composes: className from 'file'`
+* dependencies.
+*
+* For every dependency file, Vite's `preprocessCSS` is used so that:
+* - `.scss`/`.sass` files are compiled through Sass *before* CSS-module
+*   scoping runs (fixing the "Invalid empty selector" LightningCSS crash).
+* - `.module.css` and `.module.scss` files have their class names scoped and
+*   export tokens extracted in exactly the same way as the top-level file.
+*
+* Failure handling: a missing Sass implementation is downgraded to a logged
+* warning and an empty token map so the build continues (class composition
+* will be incomplete); any other preprocessing error (e.g. a syntax error in
+* the composed dependency) propagates and fails the build, matching the
+* built-in `FileSystemLoader`. When no resolved config has been bound —
+* only reachable if the Loader is used outside vinext's `configResolved`
+* wiring — the Loader silently returns an empty token map.
+*
+* Recursion boundary: nested `composes` chains are handled by delegating to
+* `preprocessCSS`, which re-applies postcss-modules (and therefore this
+* Loader) for each dependency — every composed subtree gets its own inner
+* Loader instance rather than sharing this instance's `tokensByFile`/
+* `sources` state. Two intentional consequences, versus the built-in
+* single-loader recursion:
+* - A dependency reached from two sibling `composes` branches is inlined
+*   once per subtree; the duplicate identical rules are collapsed by
+*   LightningCSS during minification (bloat-free in practice, but the
+*   pre-minification CSS differs from the built-in loader's single pass).
+* - Circular `composes` chains are not short-circuited across the
+*   `preprocessCSS` boundary (the built-in loader's shared cache caught
+*   them). Cycles are invalid CSS-module inputs — webpack/Next.js errors on
+*   them too — so no cycle bookkeeping is layered on here.
+*
+* Not exported directly: postcss-modules constructs the Loader itself with a
+* fixed `(root, plugins, fileResolve)` signature, so the resolved Vite config
+* cannot be a constructor argument. `createSassAwareFileSystemLoader` returns
+* a subclass with the config bound per factory call (i.e. per vinext plugin
+* instance) instead of a module-level singleton, so multiple builds in one
+* process (monorepos, programmatic multi-build runners) each preprocess
+* `composes` dependencies with their own root/sass options/scoped-name
+* generator.
+*/
+var SassAwareFileSystemLoader = class {
+	root;
+	fileResolve;
+	sources;
+	traces;
+	importNr;
+	tokensByFile;
+	constructor(root, _plugins, fileResolve) {
+		if (root === "/" && process.platform === "win32") {
+			const cwdDrive = process.cwd().slice(0, 3);
+			if (!/^[A-Za-z]:\\$/.test(cwdDrive)) throw new Error(`Failed to obtain root from "${process.cwd()}".`);
+			root = cwdDrive;
+		}
+		this.root = root;
+		this.fileResolve = fileResolve;
+		this.sources = {};
+		this.traces = {};
+		this.importNr = 0;
+		this.tokensByFile = {};
+	}
+	/**
+	* The resolved Vite config used to preprocess `composes` dependencies.
+	* The base implementation has no config (`fetch` silently returns empty
+	* tokens); `createSassAwareFileSystemLoader` overrides this with the
+	* config bound to that factory call.
+	*/
+	getResolvedConfig() {
+		return null;
+	}
+	async fetch(_newPath, relativeTo, _trace) {
+		const newPath = _newPath.replace(/^["']|["']$/g, "");
+		const trace = _trace ?? String.fromCharCode(this.importNr++);
+		const useFileResolve = typeof this.fileResolve === "function";
+		const fileResolvedPath = useFileResolve ? await this.fileResolve(newPath, relativeTo) : void 0;
+		if (fileResolvedPath !== void 0 && !path.isAbsolute(fileResolvedPath)) throw new Error("The returned path from the \"fileResolve\" option must be absolute.");
+		const relativeDir = path.dirname(relativeTo);
+		const fileRelativePath = fileResolvedPath ?? (() => {
+			let resolved = path.resolve(path.resolve(this.root, relativeDir), newPath);
+			if (!useFileResolve && newPath[0] !== "." && !path.isAbsolute(newPath)) try {
+				resolved = createRequire(import.meta.url).resolve(newPath);
+			} catch {}
+			return resolved;
+		})();
+		const cached = this.tokensByFile[fileRelativePath];
+		if (cached) return cached;
+		const config = this.getResolvedConfig();
+		const rawSource = await fs.promises.readFile(fileRelativePath, "utf-8");
+		if (config) try {
+			const ext = path.extname(fileRelativePath);
+			const result = await preprocessCSS(rawSource, CSS_MODULE_RE.test(fileRelativePath) ? fileRelativePath : ext === "" ? `${fileRelativePath}.module.css` : `${fileRelativePath.slice(0, -ext.length)}.module${ext}`, config);
+			const exportTokens = result.modules ?? {};
+			this.sources[fileRelativePath] = result.code;
+			this.traces[trace] = fileRelativePath;
+			this.tokensByFile[fileRelativePath] = exportTokens;
+			return exportTokens;
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			if (!message.includes("Preprocessor dependency")) throw error;
+			config.logger.warn(`[vinext] Failed to preprocess \`composes\` dependency ${fileRelativePath}: ${message}. Classes composed from this file will be missing from the build output.`);
+		}
+		this.sources[fileRelativePath] = "";
+		this.traces[trace] = fileRelativePath;
+		this.tokensByFile[fileRelativePath] = {};
+		return {};
+	}
+	get finalSource() {
+		const { traces, sources } = this;
+		const written = /* @__PURE__ */ new Set();
+		return Object.keys(traces).sort(traceKeySorter).map((key) => {
+			const filename = traces[key];
+			if (!filename || written.has(filename)) return null;
+			written.add(filename);
+			return sources[filename];
+		}).join("");
+	}
+};
+/**
+* Create a per-build binding of {@link SassAwareFileSystemLoader}.
+*
+* Returns:
+* - `Loader` — a class to inject as postcss-modules' `css.modules.Loader`
+*   option. postcss-modules instantiates it with the fixed
+*   `(root, plugins, fileResolve)` signature, so the resolved Vite config is
+*   captured in this factory's closure rather than passed to the constructor.
+* - `setResolvedConfig` — called from vinext's `configResolved` hook to bind
+*   that build's resolved config.
+*
+* One binding is created per vinext plugin instance, so concurrent or
+* back-to-back builds in a single process never observe another build's
+* config (root, sass options, `generateScopedName`, logger, …).
+*/
+function createSassAwareFileSystemLoader() {
+	let resolvedConfig = null;
+	return {
+		Loader: class extends SassAwareFileSystemLoader {
+			getResolvedConfig() {
+				return resolvedConfig;
+			}
+		},
+		setResolvedConfig(config) {
+			resolvedConfig = config;
+		}
+	};
+}
 //#endregion
-export { buildSassPreprocessorOptions };
+export { buildSassPreprocessorOptions, createSassAwareFileSystemLoader, createSassTildeImporter };

package/dist/plugins/wasm-module-import.d.ts

@@ -0,0 +1,15 @@
+import { Plugin } from "vite";
+
+//#region src/plugins/wasm-module-import.d.ts
+/**
+ * vinext:wasm-module-import — handle `import x from '*.wasm?module'`.
+ *
+ * Resolutions marked external by Vite or a target adapter are preserved. For
+ * non-external resolutions, this plugin reads the WASM file, inlines it as
+ * base64, and exports a compiled WebAssembly.Module.
+ *
+ * Fixes #1351.
+ */
+declare function createWasmModuleImportPlugin(): Plugin;
+//#endregion
+export { createWasmModuleImportPlugin };

package/dist/plugins/wasm-module-import.js

@@ -0,0 +1,50 @@
+import { stripViteModuleQuery } from "../utils/path.js";
+import fs from "node:fs";
+//#region src/plugins/wasm-module-import.ts
+/**
+* vinext:wasm-module-import — handle `import x from '*.wasm?module'`.
+*
+* Resolutions marked external by Vite or a target adapter are preserved. For
+* non-external resolutions, this plugin reads the WASM file, inlines it as
+* base64, and exports a compiled WebAssembly.Module.
+*
+* Fixes #1351.
+*/
+function createWasmModuleImportPlugin() {
+	return {
+		name: "vinext:wasm-module-import",
+		enforce: "pre",
+		resolveId: {
+			filter: { id: /\.wasm\?module$/ },
+			async handler(source, importer) {
+				if (this.environment?.name === "client") return null;
+				if ((importer ? (importer.startsWith("\0") ? importer.slice(1) : importer).split("?")[0] : "").includes("@vercel/og")) return null;
+				const resolved = await this.resolve(source, importer, { skipSelf: true });
+				if (!resolved) return null;
+				if (resolved.external) return resolved;
+				return `\0vinext-wasm-module:${stripViteModuleQuery(resolved.id)}`;
+			}
+		},
+		load: {
+			filter: { id: /^\u0000vinext-wasm-module:/ },
+			handler(id) {
+				const filePath = id.replace(/^\u0000vinext-wasm-module:/, "");
+				this.addWatchFile(filePath);
+				let bytes;
+				try {
+					bytes = fs.readFileSync(filePath);
+				} catch {
+					return this.error(`[vinext] Could not read WASM file: ${filePath}`);
+				}
+				const base64 = bytes.toString("base64");
+				return [
+					`const _b64 = ${JSON.stringify(base64)};`,
+					`const _buf = Uint8Array.from(atob(_b64), c => c.charCodeAt(0));`,
+					`export default await WebAssembly.compile(_buf.buffer);`
+				].join("\n");
+			}
+		}
+	};
+}
+//#endregion
+export { createWasmModuleImportPlugin };

package/dist/routing/app-route-graph.d.ts

@@ -276,6 +276,28 @@ declare function buildAppRouteGraph(appDir: string, matcher: ValidFileMatcher):
   routeManifest: RouteManifest;
 }>;
 declare function computeRootParamNames(routeSegments: readonly string[], layoutTreePositions: readonly number[]): string[];
+/**
+ * Find the best route to attach a sibling intercept to, given the directory
+ * that contains the interception marker.
+ *
+ * 1. Exact hit: a route whose page/handler lives directly in `dir`.
+ * 2. Subtree hit: shallowest route whose page lives anywhere under `dir`
+ *    (handles catch-all routes like `/templates/:catchAll+`).
+ * 3. Ancestor walk: walk up the directory tree toward `appDir` looking for
+ *    any of the above. This handles the case where the marker directory has
+ *    no sibling pages at all (e.g. `deep/path/(...)target` with no
+ *    `deep/path/page.tsx`).
+ *
+ * All comparisons happen in forward-slash space: `appDir` is forward-slash
+ * (normalized once in the config hook), but `dir` and route file paths
+ * descend through native `path.join`/`path.dirname`, which reintroduce
+ * backslashes on Windows. Without normalizing, the `current === appDir`
+ * termination never fires there and the walk overshoots the app root.
+ * `routesByDir` keys must be forward-slash dirnames of the route file paths.
+ *
+ * Exported for tests.
+ */
+declare function findOwnerRouteForDir(dir: string, appDir: string, routes: readonly AppRouteGraphRoute[], routesByDir: Map<string, AppRouteGraphRoute>): AppRouteGraphRoute | null;
 /**
  * Convert filesystem path segments to URL route parts, skipping invisible segments
  * (route groups, @slots, ".") and converting dynamic segment syntax to Express-style
@@ -310,4 +332,4 @@ declare function computeAppRouteStaticSiblings(allRoutes: readonly {
   patternParts?: readonly string[] | null;
 }): string[];
 //#endregion
-export { AppRoute, AppRouteGraphRoute, AppRouteSemanticIds, GraphVersion, RootBoundaryId, RouteManifest, RouteManifestInterception, RouteManifestRootBoundary, RouteManifestRoute, RouteManifestSlotBinding, StaticSegmentGraph, buildAppRouteGraph, computeAppRouteStaticSiblings, computeRootParamNames, convertSegmentsToRouteParts, isInvisibleSegment };
+export { AppRoute, AppRouteGraphRoute, AppRouteSemanticIds, GraphVersion, RootBoundaryId, RouteManifest, RouteManifestInterception, RouteManifestRootBoundary, RouteManifestRoute, RouteManifestSlotBinding, StaticSegmentGraph, buildAppRouteGraph, computeAppRouteStaticSiblings, computeRootParamNames, convertSegmentsToRouteParts, findOwnerRouteForDir, isInvisibleSegment };

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

@@ -1,3 +1,4 @@
+import { normalizePathSeparators } from "../utils/path.js";
 import { compareRoutes, decodeRouteSegment, isInvisibleSegment } from "./utils.js";
 import { findFileWithExts, scanWithExtensions } from "./file-matcher.js";
 import { validateRoutePatterns } from "./route-validation.js";
@@ -485,7 +486,7 @@ function discoverSlotSubRoutes(routes, matcher, ghostParents = []) {
 			const existingRoute = routesByPattern.get(pattern);
 			if (existingRoute) {
 				if (existingRoute.routePath && !existingRoute.pagePath) throw new Error(`You cannot have two routes that resolve to the same path ("${pattern}").`);
-				applySlotSubPages(existingRoute, slotPages, rawSegments);
+				if (urlParts.length > 0) applySlotSubPages(existingRoute, slotPages, rawSegments);
 				continue;
 			}
 			const syntheticParts = [...parentRoute.patternParts, ...urlParts];
@@ -1026,6 +1027,34 @@ function patternsStructurallyEquivalent(a, b) {
 	return true;
 }
 /**
+* Find a page file at the root URL level of a parallel slot directory, including
+* through transparent route-group subdirectories (e.g. `@slot/(group)/page.tsx`
+* is equivalent to `@slot/page.tsx` since `(group)` is invisible in the URL).
+*
+* Returns the absolute page path, or null if no root-level page is found.
+*
+* Only descends into route-group directories (those whose name starts with `(`
+* and ends with `)`). Dynamic segments, regular named dirs, and `@slot` dirs
+* are not transparent and are therefore not searched.
+*/
+function findSlotRootPage(slotDir, matcher) {
+	const directPage = findFile(slotDir, "page", matcher);
+	if (directPage) return directPage;
+	let entries;
+	try {
+		entries = fs.readdirSync(slotDir, { withFileTypes: true });
+	} catch {
+		return null;
+	}
+	for (const entry of entries) {
+		if (!entry.isDirectory()) continue;
+		if (!entry.name.startsWith("(") || !entry.name.endsWith(")")) continue;
+		const found = findSlotRootPage(path.join(slotDir, entry.name), matcher);
+		if (found) return found;
+	}
+	return null;
+}
+/**
 * Discover parallel route slots (@team, @analytics, etc.) in a directory.
 * Returns a ParallelSlot for each @-prefixed subdirectory that has a page or default component.
 */
@@ -1038,7 +1067,7 @@ function discoverParallelSlots(dir, appDir, matcher) {
 		if (entry.name === "@children") continue;
 		const slotName = entry.name.slice(1);
 		const slotDir = path.join(dir, entry.name);
-		const pagePath = findFile(slotDir, "page", matcher);
+		const pagePath = findSlotRootPage(slotDir, matcher);
 		const defaultPath = findFile(slotDir, "default", matcher);
 		const interceptingRoutes = discoverInterceptingRoutes(slotDir, dir, appDir, matcher);
 		if (!pagePath && !defaultPath && interceptingRoutes.length === 0) continue;
@@ -1127,7 +1156,7 @@ function discoverSiblingInterceptingRoutes(routes, appDir, matcher) {
 	for (const route of routes) {
 		const filePath = route.pagePath ?? route.routePath;
 		if (!filePath) continue;
-		const routeDir = path.dirname(filePath);
+		const routeDir = normalizePathSeparators(path.dirname(filePath));
 		if (!routesByDir.has(routeDir)) routesByDir.set(routeDir, route);
 	}
 	function walk(dir) {
@@ -1171,22 +1200,32 @@ function discoverSiblingInterceptingRoutes(routes, appDir, matcher) {
 *    any of the above. This handles the case where the marker directory has
 *    no sibling pages at all (e.g. `deep/path/(...)target` with no
 *    `deep/path/page.tsx`).
+*
+* All comparisons happen in forward-slash space: `appDir` is forward-slash
+* (normalized once in the config hook), but `dir` and route file paths
+* descend through native `path.join`/`path.dirname`, which reintroduce
+* backslashes on Windows. Without normalizing, the `current === appDir`
+* termination never fires there and the walk overshoots the app root.
+* `routesByDir` keys must be forward-slash dirnames of the route file paths.
+*
+* Exported for tests.
 */
 function findOwnerRouteForDir(dir, appDir, routes, routesByDir) {
-	let current = dir;
+	const appRoot = normalizePathSeparators(appDir);
+	let current = normalizePathSeparators(dir);
 	while (true) {
 		const exact = routesByDir.get(current);
 		if (exact) return exact;
-		const currentWithSep = current + path.sep;
+		const currentWithSep = current + "/";
 		let best = null;
 		for (const route of routes) {
 			const filePath = route.pagePath ?? route.routePath;
 			if (!filePath) continue;
-			if (!filePath.startsWith(currentWithSep)) continue;
+			if (!normalizePathSeparators(filePath).startsWith(currentWithSep)) continue;
 			if (!best || route.patternParts.length < best.patternParts.length) best = route;
 		}
 		if (best) return best;
-		if (current === appDir) break;
+		if (current === appRoot) break;
 		const parent = path.dirname(current);
 		if (parent === current) break;
 		current = parent;
@@ -1446,4 +1485,4 @@ function computeAppRouteStaticSiblings(allRoutes, matchedRoute) {
 	return Array.from(siblings);
 }
 //#endregion
-export { buildAppRouteGraph, computeAppRouteStaticSiblings, computeRootParamNames, convertSegmentsToRouteParts, isInvisibleSegment };
+export { buildAppRouteGraph, computeAppRouteStaticSiblings, computeRootParamNames, convertSegmentsToRouteParts, findOwnerRouteForDir, isInvisibleSegment };

package/dist/routing/file-matcher.js

@@ -69,7 +69,7 @@ function findFileWithExtensions(basePath, matcher) {
 */
 function findFileWithExts(dir, name, matcher) {
 	for (const ext of matcher.dottedExtensions) {
-		const filePath = path.join(dir, name + ext);
+		const filePath = path.posix.join(dir, name + ext);
 		if (existsSync(filePath)) return filePath;
 	}
 	return null;