@vizejs/vite-plugin 0.154.0 → 0.156.0

package/dist/index.mjs

@@ -137,7 +137,7 @@ function generateOutput(compiled, options) {
 		output += "\n_sfc_main.ssrRender = ssrRender;";
 		output += "\nexport default _sfc_main;";
 	}
-	if (hasDelegatedStyles(compiled) && filePath) {
+	if (!!filePath && !!compiled.styles?.length && (hasDelegatedStyles(compiled) || !ssr && isProduction && extractCss)) {
 		const styleImports = [];
 		const cssModuleImports = [];
 		for (const block of compiled.styles) {
@@ -394,10 +394,17 @@ function getCompileOptionsForRequest(state, ssr) {
 	};
 }
 function syncCollectedCssForFile(state, filePath, compiled) {
-	if (!compiled || !state.isProduction) return;
+	if (!compiled || !state.extractCss) return;
+	if (compiled.styles?.length) {
+		state.collectedCss.delete(filePath);
+		return;
+	}
 	if (compiled.css && !hasDelegatedStyles(compiled)) state.collectedCss.set(filePath, resolveCssImports(compiled.css, filePath, state.cssAliasRules, false));
 	else state.collectedCss.delete(filePath);
 }
+function shouldExtractCssForRequest(state, ssr) {
+	return state.isProduction && !ssr;
+}
 function clearBuildCaches(state) {
 	state.cache.clear();
 	state.ssrCache.clear();
@@ -430,7 +437,7 @@ async function compileAll(state) {
 	for (const file of deletedFiles) {
 		state.cache.delete(file);
 		state.ssrCache.delete(file);
-		state.collectedCss.delete(file);
+		if (state.extractCss) state.collectedCss.delete(file);
 		state.precompileMetadata.delete(file);
 		state.pendingHmrUpdateTypes.delete(file);
 	}
@@ -441,7 +448,7 @@ async function compileAll(state) {
 		return;
 	}
 	for (const file of changedFiles) {
-		state.collectedCss.delete(file);
+		if (state.extractCss) state.collectedCss.delete(file);
 		state.pendingHmrUpdateTypes.delete(file);
 	}
 	let successCount = 0;
@@ -460,7 +467,7 @@ async function compileAll(state) {
 		} catch (e) {
 			failedCount++;
 			state.cache.delete(file);
-			state.collectedCss.delete(file);
+			if (state.extractCss) state.collectedCss.delete(file);
 			state.precompileMetadata.delete(file);
 			precompileFailures.push(`[vize] Failed to read ${file}: ${formatUnknownError$1(e)}`);
 			state.logger.error(`Failed to read ${file}:`, e);
@@ -480,7 +487,7 @@ async function compileAll(state) {
 			const metadata = currentMetadata.get(fileResult.path);
 			if (fileResult.errors.length > 0) {
 				state.cache.delete(fileResult.path);
-				state.collectedCss.delete(fileResult.path);
+				if (state.extractCss) state.collectedCss.delete(fileResult.path);
 				state.precompileMetadata.delete(fileResult.path);
 				precompileFailures.push(formatCompileErrorMessage(fileResult.path, fileResult.errors));
 				continue;
@@ -509,11 +516,37 @@ const EMPTY_NATIVE_ALIAS_RULES = [];
 function resolveAliasRequest(state, id) {
 	return resolveViteAliasRequest(id, nativeCssAliasRules(state));
 }
+function getBarePackageName(id) {
+	if (!isViteBareSpecifier(id)) return null;
+	const segments = id.split("/");
+	if (id.startsWith("@")) return segments.length >= 2 ? `${segments[0]}/${segments[1]}` : null;
+	return segments[0] || null;
+}
+function resolveBareImportFromPnpmHoist(request, base) {
+	const packageName = getBarePackageName(request);
+	if (!packageName) return null;
+	let current = path.dirname(base);
+	while (current !== path.dirname(current)) {
+		const directPackage = path.join(current, "node_modules", packageName);
+		if (fs.existsSync(directPackage)) return null;
+		const hoistRoot = path.join(current, "node_modules", ".pnpm", "node_modules");
+		const hoistedPackage = path.join(hoistRoot, packageName);
+		if (fs.existsSync(hoistedPackage)) try {
+			return createRequire(path.join(hoistRoot, "__vize_probe__.js")).resolve(request);
+		} catch {}
+		current = path.dirname(current);
+	}
+	return null;
+}
 function resolveBareImportWithNode(state, id, importer) {
 	const { request, querySuffix } = splitViteIdQuery(id);
-	for (const candidate of createViteBareImportBases(state.root, importer)) try {
-		return `${createRequire(candidate).resolve(request)}${querySuffix}`;
-	} catch {}
+	for (const candidate of createViteBareImportBases(state.root, importer)) {
+		const hoisted = resolveBareImportFromPnpmHoist(request, candidate);
+		if (hoisted) return `${hoisted}${querySuffix}`;
+		try {
+			return `${createRequire(candidate).resolve(request)}${querySuffix}`;
+		} catch {}
+	}
 	return null;
 }
 function resolveBareImportCandidatesWithNode(state, id, importer, resolvedId) {
@@ -576,9 +609,8 @@ function isVueResolvableFromRoot(root) {
 		const directPackageJson = path.join(rootNodeModules, "vue", "package.json");
 		cached = fs.existsSync(directPackageJson);
 		if (!cached) try {
-			const resolved = createRequire(path.join(root, "__vize_probe__.js")).resolve("vue/package.json");
-			const relative = path.relative(rootNodeModules, resolved);
-			cached = relative !== "" && !relative.startsWith("..") && !path.isAbsolute(relative);
+			createRequire(path.join(root, "__vize_probe__.js")).resolve("vue/package.json");
+			cached = true;
 		} catch {}
 		vueResolvableFromRootCache.set(root, cached);
 	}
@@ -594,7 +626,9 @@ function isPotentialVizeResolveId(id) {
 	return id.startsWith("\0") || id.startsWith("vize:") || id.startsWith("/@fs") || id === "virtual:vize-styles" || id.endsWith(".vue") || id.includes(".vue?") || id.includes("?macro=true") || id.includes("?definePage");
 }
 function isPotentialVizeImporter(importer) {
-	return importer !== void 0 && (importer.startsWith("\0") || importer.startsWith("vize:"));
+	if (importer === void 0) return false;
+	if (importer.startsWith("\0") || importer.startsWith("vize:")) return true;
+	return classifyVitePluginRequest(importer).isVueSfcPath;
 }
 function shouldCompileVueSfcRequest(request) {
 	if (!request.isVueSfcPath || request.isVueStyleQuery || request.hasMacroQuery || request.hasDefinePageQuery) return false;
@@ -607,6 +641,12 @@ function hasNuxtComponentQuery$1(request) {
 	if (!request.querySuffix) return false;
 	return new URLSearchParams(request.querySuffix.slice(1)).has("nuxt_component");
 }
+function cleanVueSfcImporter(importer, request) {
+	let cleanImporter = request?.normalizedFsId ?? importer;
+	if (cleanImporter.startsWith("/@id/__x00__")) cleanImporter = cleanImporter.slice(12);
+	else if (cleanImporter.startsWith("__x00__")) cleanImporter = cleanImporter.slice(7);
+	return cleanImporter.endsWith(".vue.ts") ? cleanImporter.slice(0, -3) : cleanImporter;
+}
 async function resolveAliasedVueImport(ctx, state, id, importer, isSsrRequest, handleNodeModules, querySuffix, preserveQueryAsPath) {
 	if (path.isAbsolute(id)) return null;
 	const viteImporter = normalizeViteRequireBase(importer) ?? importer;
@@ -669,7 +709,6 @@ async function resolveIdHook(ctx, state, id, importer, options) {
 		return resolved;
 	}
 	if (id === "virtual:vize-styles") return RESOLVED_CSS_MODULE;
-	if (isBuild && request.normalizedFsId) return request.normalizedFsId;
 	if ((request.hasMacroQuery || request.hasDefinePageQuery) && request.isVueSfcPath) {
 		const resolved = resolveVuePath(state, request.path, importer);
 		if (resolved && fs.existsSync(resolved)) return `\0${resolved}${request.querySuffix}`;
@@ -683,12 +722,14 @@ async function resolveIdHook(ctx, state, id, importer, options) {
 			state.logger.log(`resolveId: skipping node_modules style import ${id}`);
 			return null;
 		}
-		return `\0${id}${request.styleVirtualSuffix}`;
+		return `${request.normalizedFsId ?? id}${request.styleVirtualSuffix}`;
 	}
+	if (isBuild && request.normalizedFsId) return request.normalizedFsId;
 	const isMacroImporter = importerRequest?.isMacroVirtualId ?? false;
 	const isVizeVirtualImporter = importerRequest?.isVizeVirtual ?? false;
-	if (importer && (isVizeVirtualImporter || isMacroImporter)) {
-		const cleanImporter = isMacroImporter ? importerRequest?.strippedVirtualPath ?? "" : importerRequest?.vizeVirtualPath ?? "";
+	const isVueSfcImporter = importerRequest?.isVueSfcPath ?? false;
+	if (importer && (isVizeVirtualImporter || isMacroImporter || isVueSfcImporter)) {
+		const cleanImporter = isMacroImporter ? importerRequest?.strippedVirtualPath ?? "" : isVizeVirtualImporter ? importerRequest?.vizeVirtualPath ?? "" : cleanVueSfcImporter(importer, importerRequest);
 		state.logger.log(`resolveId from virtual: id=${id}, cleanImporter=${cleanImporter}`);
 		if (id.startsWith("#")) try {
 			return await ctx.resolve(id, cleanImporter, { skipSelf: true });
@@ -703,6 +744,13 @@ async function resolveIdHook(ctx, state, id, importer, options) {
 			};
 			if (!id.startsWith("./") && !id.startsWith("../") && !id.startsWith("/")) {
 				const isVueRuntime = isVueRuntimeRequest(id);
+				if (isVueRuntime && isBuild) {
+					const vueBundlerEntry = resolveVueBundlerEntryWithNode(state, id, cleanImporter);
+					if (vueBundlerEntry) {
+						state.logger.log(`resolveId: resolved Vue runtime to ${vueBundlerEntry}`);
+						return vueBundlerEntry;
+					}
+				}
 				const aliasRequest = resolveAliasRequest(state, id);
 				if (!isVueRuntime && aliasRequest && isViteBareSpecifier(aliasRequest)) {
 					const nodeResolved = resolveBareImportCandidatesWithNode(state, id, cleanImporter);
@@ -890,19 +938,28 @@ function normalizeVueServerRendererImport(code) {
 }
 function findMacroArtifactModule(state, realPath, ssr, kind) {
 	const cache = getEnvironmentCache(state, ssr);
+	const extractCss = shouldExtractCssForRequest(state, ssr);
 	realPath = classifyVitePluginRequest(realPath).normalizedVuePath;
 	let compiled = cache.get(realPath) ?? state.cache.get(realPath) ?? state.ssrCache.get(realPath);
 	if (!compiled && fs.existsSync(realPath)) {
 		const source = fs.readFileSync(realPath, "utf-8");
 		compiled = compileFile(realPath, cache, getCompileOptionsForRequest(state, ssr), source);
-		syncCollectedCssForFile(state, realPath, compiled);
 	}
+	syncCollectedCssForFile({
+		...state,
+		extractCss
+	}, realPath, compiled);
 	return compiled?.macroArtifacts?.find((artifact) => artifact.kind === kind)?.moduleCode ?? null;
 }
 function hasNuxtComponentQuery(request) {
 	if (!request.querySuffix) return false;
 	return new URLSearchParams(request.querySuffix.slice(1)).has("nuxt_component");
 }
+function normalizeStyleVirtualId(id) {
+	const withoutPrefix = id.startsWith("\0") ? id.slice(1) : id;
+	if (!withoutPrefix.includes("?vue")) return id;
+	return withoutPrefix.replace(/\.module\.\w+$/, "").replace(/\.\w+$/, "");
+}
 function loadCompiledSfcModule(state, realPath, isSsr, currentBase, loadOptions) {
 	const placeholderCode = getBoundaryPlaceholderCode(realPath, !!loadOptions?.ssr);
 	if (placeholderCode) {
@@ -913,12 +970,16 @@ function loadCompiledSfcModule(state, realPath, isSsr, currentBase, loadOptions)
 		};
 	}
 	const cache = getEnvironmentCache(state, isSsr);
+	const extractCss = shouldExtractCssForRequest(state, isSsr);
 	let compiled = cache.get(realPath);
 	if (!compiled && fs.existsSync(realPath)) {
 		state.logger.log(`load: on-demand compiling ${realPath}`);
 		compiled = compileFile(realPath, cache, getCompileOptionsForRequest(state, isSsr));
-		syncCollectedCssForFile(state, realPath, compiled);
 	}
+	syncCollectedCssForFile({
+		...state,
+		extractCss
+	}, realPath, compiled);
 	if (!compiled) return null;
 	const hasDelegated = hasDelegatedStyles(compiled);
 	const pendingHmrUpdateType = loadOptions?.ssr ? void 0 : state.pendingHmrUpdateTypes.get(realPath);
@@ -931,7 +992,7 @@ function loadCompiledSfcModule(state, realPath, isSsr, currentBase, loadOptions)
 		isDev: state.server !== null && !isSsr,
 		ssr: isSsr,
 		hmrUpdateType: pendingHmrUpdateType,
-		extractCss: state.extractCss,
+		extractCss,
 		filePath: realPath
 	});
 	const output = rewriteStaticAssetUrls(rewriteDynamicTemplateImports(isSsr ? normalizeVueServerRendererImport(generatedOutput) : generatedOutput, state.dynamicImportAliasRules), state.dynamicImportAliasRules);
@@ -956,18 +1017,13 @@ function loadDefinePageMetaArtifact(state, realPath, ssr) {
 }
 function loadHook(state, id, loadOptions) {
 	const request = classifyVitePluginRequest(id);
-	if (id !== "\0vize:all-styles.css" && !id.startsWith("\0")) {
-		if (!request.isVueSfcPath || !hasNuxtComponentQuery(request)) return null;
-	}
 	const currentBase = loadOptions?.ssr ? state.serverViteBase : state.clientViteBase;
 	if (id === "\0vize:all-styles.css") {
 		let allCss = "";
 		for (const css of state.collectedCss.values()) allCss += allCss ? `\n\n${css}` : css;
 		return allCss;
 	}
-	let styleId = id;
-	if (id.startsWith("\0") && id.includes("?vue")) styleId = id.slice(1).replace(/\.module\.\w+$/, "").replace(/\.\w+$/, "");
-	const styleRequest = classifyVitePluginRequest(styleId);
+	const styleRequest = classifyVitePluginRequest(normalizeStyleVirtualId(id));
 	if (styleRequest.isVueStyleQuery) {
 		const sourceRequest = classifyVitePluginRequest(styleRequest.path);
 		const realPath = sourceRequest.vizeVirtualPath ?? sourceRequest.normalizedFsId ?? sourceRequest.normalizedVuePath ?? styleRequest.path;
@@ -988,6 +1044,9 @@ function loadHook(state, id, loadOptions) {
 		if (fallbackCompiled?.css) return resolveCssImports(fallbackCompiled.css, realPath, state.cssAliasRules, state.server !== null, currentBase);
 		return "";
 	}
+	if (id !== "\0vize:all-styles.css" && !id.startsWith("\0")) {
+		if (!request.isVueSfcPath || !hasNuxtComponentQuery(request)) return null;
+	}
 	if (id.startsWith("\0") && request.hasDefinePageQuery) {
 		const realPath = request.strippedVirtualPath ?? "";
 		if (request.isVueSfcPath) return loadDefinePageArtifact(state, realPath, !!loadOptions?.ssr);
@@ -1068,7 +1127,8 @@ function formatUnknownError(error) {
 }
 //#endregion
 //#region src/plugin/hmr.ts
-const VIZE_COMPONENTS_CSS_FILE = "assets/vize-components.css";
+const VIZE_COMPONENTS_CSS_BASENAME = "vize-components.css";
+const VIZE_COMPONENTS_CSS_FILE = `assets/${VIZE_COMPONENTS_CSS_BASENAME}`;
 async function handleHotUpdateHook(state, ctx) {
 	const { file, server, read } = ctx;
 	if (file.endsWith(".vue") && state.filter(file)) try {
@@ -1141,21 +1201,27 @@ function handleGenerateBundleHook(state, emitFile, bundle) {
 	let allCss = "";
 	for (const css of state.collectedCss.values()) allCss += allCss ? `\n\n${css}` : css;
 	if (allCss.trim()) {
+		const cssFileName = state.componentsCssFileName || VIZE_COMPONENTS_CSS_FILE;
 		emitFile({
 			type: "asset",
-			fileName: VIZE_COMPONENTS_CSS_FILE,
+			fileName: cssFileName,
 			source: allCss
 		});
-		attachComponentsCssToEntryChunks(bundle);
-		state.logger.log(`Extracted CSS to ${VIZE_COMPONENTS_CSS_FILE} (${state.collectedCss.size} components)`);
+		attachComponentsCssToEntryChunks(bundle, cssFileName);
+		state.logger.log(`Extracted CSS to ${cssFileName} (${state.collectedCss.size} components)`);
 	}
 }
-function attachComponentsCssToEntryChunks(bundle) {
+function resolveComponentsCssFileName(assetsDir) {
+	const normalizedAssetsDir = (assetsDir || "assets").replace(/\\/g, "/").replace(/^\/+|\/+$/g, "");
+	if (!normalizedAssetsDir || normalizedAssetsDir === ".") return VIZE_COMPONENTS_CSS_BASENAME;
+	return `${normalizedAssetsDir}/${VIZE_COMPONENTS_CSS_BASENAME}`;
+}
+function attachComponentsCssToEntryChunks(bundle, cssFileName) {
 	for (const item of Object.values(bundle)) {
 		if (item.type !== "chunk" || !item.isEntry && !item.isDynamicEntry) continue;
 		item.viteMetadata ??= {};
 		item.viteMetadata.importedCss ??= /* @__PURE__ */ new Set();
-		item.viteMetadata.importedCss.add(VIZE_COMPONENTS_CSS_FILE);
+		item.viteMetadata.importedCss.add(cssFileName);
 	}
 }
 //#endregion
@@ -1186,8 +1252,9 @@ function createVueCompatPlugin(state) {
 	};
 }
 function normalizeVirtualStyleId(id) {
-	if (!id.startsWith("\0") || !id.includes("?vue")) return id;
-	return id.slice(1).replace(/\.module\.\w+$/, "").replace(/\.\w+$/, "");
+	const withoutPrefix = id.startsWith("\0") ? id.slice(1) : id;
+	if (!withoutPrefix.includes("?vue")) return id;
+	return withoutPrefix.replace(/\.module\.\w+$/, "").replace(/\.\w+$/, "");
 }
 function transformScopedPreprocessorCss(code, id) {
 	const request = classifyVitePluginRequest(normalizeVirtualStyleId(id));
@@ -1215,13 +1282,17 @@ function createPostTransformPlugin(state) {
 				state.logger.log(`post-transform: compiling virtual SFC content from ${id}`);
 				try {
 					const isSsr = !!transformOptions?.ssr;
+					const extractCss = shouldExtractCssForRequest(state, isSsr);
 					const compiled = compileFile(id, getEnvironmentCache(state, isSsr), getCompileOptionsForRequest(state, isSsr), code);
-					syncCollectedCssForFile(state, id, compiled);
+					syncCollectedCssForFile({
+						...state,
+						extractCss
+					}, id, compiled);
 					const result = await transformWithOxc(generateOutput(compiled, {
 						isProduction: state.isProduction,
 						isDev: state.server !== null,
 						ssr: isSsr,
-						extractCss: state.extractCss,
+						extractCss,
 						filePath: id
 					}), id, {
 						lang: "ts",
@@ -1374,6 +1445,13 @@ function mergeSharedConfig(baseConfig, overrideConfig) {
 		entries: [...baseConfig.entries, ...overrideConfig.entries]
 	};
 }
+function shouldExtractCssForBuild(state, context) {
+	if (!state.isProduction) return false;
+	const environmentName = context.environment?.name;
+	if (environmentName === "client" || environmentName === "browser") return true;
+	if (environmentName === "ssr" || environmentName === "server") return false;
+	return state.extractCss;
+}
 function vize(options = {}) {
 	if (isLegacyVueCompatibilityMode(options)) return [createLegacyVueCompatibilityPlugin(options)];
 	const state = {
@@ -1396,6 +1474,7 @@ function vize(options = {}) {
 		dynamicImportAliasRules: [],
 		cssAliasRules: [],
 		extractCss: false,
+		componentsCssFileName: "assets/vize-components.css",
 		clientViteDefine: {},
 		serverViteDefine: {},
 		logger: createLogger(options.debug ?? false)
@@ -1424,7 +1503,8 @@ function vize(options = {}) {
 				const currentBase = resolvedConfig.command === "serve" ? options.devUrlBase ?? resolvedConfig.base ?? "/" : resolvedConfig.base ?? "/";
 				if (isSsrBuild) state.serverViteBase = currentBase;
 				else state.clientViteBase = currentBase;
-				state.extractCss = state.isProduction;
+				state.extractCss = state.isProduction && !isSsrBuild;
+				state.componentsCssFileName = resolveComponentsCssFileName(resolvedConfig.build.assetsDir);
 				const isSsr = !!resolvedConfig.build?.ssr;
 				const envDefine = {};
 				if (resolvedConfig.define) for (const [key, value] of Object.entries(resolvedConfig.define)) {
@@ -1508,7 +1588,10 @@ function vize(options = {}) {
 			},
 			async buildStart() {
 				if (!state.scanPatterns || state.scanPatterns.length === 0) return;
-				await compileAll(state);
+				await compileAll({
+					...state,
+					extractCss: shouldExtractCssForBuild(state, this)
+				});
 				state.logger.log("Cache keys:", [...state.cache.keys()].slice(0, 3));
 			},
 			resolveId(id, importer, options) {
@@ -1524,7 +1607,10 @@ function vize(options = {}) {
 				return handleHotUpdateHook(state, ctx);
 			},
 			generateBundle(_, bundle) {
-				handleGenerateBundleHook(state, this.emitFile.bind(this), bundle);
+				handleGenerateBundleHook({
+					...state,
+					extractCss: shouldExtractCssForBuild(state, this)
+				}, this.emitFile.bind(this), bundle);
 			},
 			closeBundle() {
 				if (state.server === null) clearBuildCaches(state);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizejs/vite-plugin",
-  "version": "0.154.0",
+  "version": "0.156.0",
   "description": "High-performance native Vite plugin for Vue SFC compilation powered by Vize",
   "keywords": [
     "compiler",
@@ -39,9 +39,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@vizejs/native": "0.154.0",
+    "@vizejs/native": "0.156.0",
     "tinyglobby": "0.2.16",
-    "vize": "0.154.0"
+    "vize": "0.156.0"
   },
   "devDependencies": {
     "@types/node": "25.7.0",