@vizejs/vite-plugin 0.153.0 → 0.155.0

package/dist/index.mjs

@@ -94,6 +94,12 @@ function hasDelegatedStyles(compiled) {
 function supportsTemplateOnlyHmr(output) {
 	return /(?:^|\n)(?:_sfc_main|__sfc__)\.render\s*=\s*render\b/m.test(output);
 }
+function insertAfterStaticImports(output, imports) {
+	let insertAt = 0;
+	for (const match of output.matchAll(/^import\b[^\n]*(?:\r?\n|$)/gm)) insertAt = (match.index ?? 0) + match[0].length;
+	if (insertAt === 0) return `${imports}\n${output}`;
+	return `${output.slice(0, insertAt)}${imports}\n${output.slice(insertAt)}`;
+}
 function generateScopeId(filename) {
 	return createHash("sha256").update(filename).digest("hex").slice(0, 8);
 }
@@ -153,7 +159,7 @@ function generateOutput(compiled, options) {
 			}
 		}
 		const allImports = [...styleImports, ...cssModuleImports].join("\n");
-		if (allImports) output = allImports + "\n" + output;
+		if (allImports) output = insertAfterStaticImports(output, allImports);
 		if (cssModuleImports.length > 0) {
 			const moduleBindings = [];
 			for (const block of compiled.styles) if (isCssModule(block)) {
@@ -388,10 +394,13 @@ function getCompileOptionsForRequest(state, ssr) {
 	};
 }
 function syncCollectedCssForFile(state, filePath, compiled) {
-	if (!compiled || !state.isProduction) return;
+	if (!compiled || !state.extractCss) 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();
@@ -424,7 +433,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);
 	}
@@ -435,7 +444,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;
@@ -454,7 +463,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);
@@ -474,7 +483,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;
@@ -884,13 +893,17 @@ 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) {
@@ -907,12 +920,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);
@@ -925,7 +942,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);
@@ -963,7 +980,8 @@ function loadHook(state, id, loadOptions) {
 	if (id.startsWith("\0") && id.includes("?vue")) styleId = id.slice(1).replace(/\.module\.\w+$/, "").replace(/\.\w+$/, "");
 	const styleRequest = classifyVitePluginRequest(styleId);
 	if (styleRequest.isVueStyleQuery) {
-		const realPath = classifyVitePluginRequest(styleRequest.path).vizeVirtualPath ?? styleRequest.path;
+		const sourceRequest = classifyVitePluginRequest(styleRequest.path);
+		const realPath = sourceRequest.vizeVirtualPath ?? sourceRequest.normalizedFsId ?? sourceRequest.normalizedVuePath ?? styleRequest.path;
 		const lang = styleRequest.styleLang ?? null;
 		const scoped = styleRequest.styleScoped ?? null;
 		const fallbackCompiled = state.cache.get(realPath) ?? state.ssrCache.get(realPath);
@@ -1061,7 +1079,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 {
@@ -1134,21 +1153,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
@@ -1208,13 +1233,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",
@@ -1288,9 +1317,14 @@ function patchCssModuleGenerateScopedName(userConfig) {
 	if (!cssModules || typeof cssModules.generateScopedName !== "function") return;
 	const origFn = cssModules.generateScopedName;
 	cssModules.generateScopedName = function(name, filename, css) {
-		return origFn.call(this, name, normalizeViteCssModuleFilename(filename), css);
+		return origFn.call(this, name, normalizeCssModuleFilename(filename), css);
 	};
 }
+function normalizeCssModuleFilename(filename) {
+	const normalized = normalizeViteCssModuleFilename(filename);
+	if (normalized.startsWith("/@fs/")) return normalized.slice(4);
+	return normalized;
+}
 //#endregion
 //#region src/plugin/dev-middleware.ts
 function installVirtualAssetMiddleware(devServer, state) {
@@ -1362,6 +1396,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 = {
@@ -1384,6 +1425,7 @@ function vize(options = {}) {
 		dynamicImportAliasRules: [],
 		cssAliasRules: [],
 		extractCss: false,
+		componentsCssFileName: "assets/vize-components.css",
 		clientViteDefine: {},
 		serverViteDefine: {},
 		logger: createLogger(options.debug ?? false)
@@ -1412,7 +1454,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)) {
@@ -1496,7 +1539,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) {
@@ -1512,7 +1558,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.153.0",
+  "version": "0.155.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.153.0",
+    "@vizejs/native": "0.155.0",
     "tinyglobby": "0.2.16",
-    "vize": "0.153.0"
+    "vize": "0.155.0"
   },
   "devDependencies": {
     "@types/node": "25.7.0",