@vizejs/vite-plugin 0.9.0 → 0.11.0

package/dist/index.d.ts

@@ -473,6 +473,18 @@ interface VizeOptions {
    */
   debug?: boolean;
 }
+interface StyleBlockInfo {
+  /** Raw style content (uncompiled for preprocessor langs) */
+  content: string;
+  /** Language of the style block (e.g., "css", "scss", "less", "sass", "stylus") */
+  lang: string | null;
+  /** Whether the style block has the scoped attribute */
+  scoped: boolean;
+  /** CSS Modules: true for unnamed `module`, or the binding name for `module="name"` */
+  module: boolean | string;
+  /** Index of this style block in the SFC */
+  index: number;
+}
 interface CompiledModule {
   code: string;
   css?: string;
@@ -481,6 +493,8 @@ interface CompiledModule {
   templateHash?: string;
   styleHash?: string;
   scriptHash?: string;
+  /** Per-block style metadata extracted from the source SFC */
+  styles?: StyleBlockInfo[];
 }
 
 //#endregion
@@ -504,13 +518,6 @@ interface DynamicImportAliasRule {
   fromPrefix: string;
   toPrefix: string;
 }
-/**
- * Rewrite static asset URLs in compiled template output.
- *
- * Transforms property values like `src: "@/assets/logo.svg"` into import
- * statements hoisted to the top of the module, so Vite's module resolution
- * pipeline handles alias expansion and asset hashing in both dev and build.
- */
 declare function rewriteStaticAssetUrls(code: string, aliasRules: DynamicImportAliasRule[]): string;
 declare const __internal: {
   rewriteStaticAssetUrls: typeof rewriteStaticAssetUrls;

package/dist/index.js

@@ -68,6 +68,30 @@ if (import.meta.hot) {
 
 //#endregion
 //#region src/utils.ts
+/** Known CSS preprocessor languages that must be delegated to Vite */
+const PREPROCESSOR_LANGS = new Set([
+	"scss",
+	"sass",
+	"less",
+	"stylus",
+	"styl"
+]);
+/** Check if a style block requires Vite's preprocessor pipeline */
+function needsPreprocessor(block) {
+	return block.lang !== null && PREPROCESSOR_LANGS.has(block.lang);
+}
+/** Check if a style block uses CSS Modules */
+function isCssModule(block) {
+	return block.module !== false;
+}
+/**
+* Check if any style blocks in the compiled module require delegation to
+* Vite's CSS pipeline (preprocessor or CSS Modules).
+*/
+function hasDelegatedStyles(compiled) {
+	if (!compiled.styles) return false;
+	return compiled.styles.some((s) => needsPreprocessor(s) || isCssModule(s));
+}
 function generateScopeId(filename) {
 	const hash = createHash("sha256").update(filename).digest("hex");
 	return hash.slice(0, 8);
@@ -82,7 +106,7 @@ function createFilter(include, exclude) {
 	};
 }
 function generateOutput(compiled, options) {
-	const { isProduction, isDev, hmrUpdateType, extractCss } = options;
+	const { isProduction, isDev, hmrUpdateType, extractCss, filePath } = options;
 	let output = compiled.code;
 	const exportDefaultRegex = /^export default /m;
 	const hasExportDefault = exportDefaultRegex.test(output);
@@ -94,7 +118,43 @@ function generateOutput(compiled, options) {
 	} else if (hasExportDefault && hasSfcMainDefined) {
 		if (compiled.hasScoped && compiled.scopeId) output = output.replace(/^export default _sfc_main/m, `_sfc_main.__scopeId = "data-v-${compiled.scopeId}";\nexport default _sfc_main`);
 	}
-	if (compiled.css && !(isProduction && extractCss)) {
+	const useDelegatedStyles = hasDelegatedStyles(compiled) && filePath;
+	if (useDelegatedStyles) {
+		const styleImports = [];
+		const cssModuleImports = [];
+		for (const block of compiled.styles) {
+			const lang = block.lang ?? "css";
+			const params = new URLSearchParams();
+			params.set("vue", "");
+			params.set("type", "style");
+			params.set("index", String(block.index));
+			if (block.scoped) params.set("scoped", `data-v-${compiled.scopeId}`);
+			params.set("lang", lang);
+			if (isCssModule(block)) {
+				const bindingName = typeof block.module === "string" ? block.module : "$style";
+				params.set("module", typeof block.module === "string" ? block.module : "");
+				const importUrl = `${filePath}?${params.toString()}`;
+				cssModuleImports.push(`import ${bindingName} from ${JSON.stringify(importUrl)};`);
+			} else {
+				const importUrl = `${filePath}?${params.toString()}`;
+				styleImports.push(`import ${JSON.stringify(importUrl)};`);
+			}
+		}
+		const allImports = [...styleImports, ...cssModuleImports].join("\n");
+		if (allImports) output = allImports + "\n" + output;
+		if (cssModuleImports.length > 0) {
+			const moduleBindings = [];
+			for (const block of compiled.styles) if (isCssModule(block)) {
+				const bindingName = typeof block.module === "string" ? block.module : "$style";
+				moduleBindings.push({
+					name: bindingName,
+					bindingName
+				});
+			}
+			const cssModuleSetup = moduleBindings.map((m) => `_sfc_main.__cssModules = _sfc_main.__cssModules || {};\n_sfc_main.__cssModules[${JSON.stringify(m.name)}] = ${m.bindingName};`).join("\n");
+			output = output.replace(/^export default _sfc_main;/m, `${cssModuleSetup}\nexport default _sfc_main;`);
+		}
+	} else if (compiled.css && !(isProduction && extractCss)) {
 		const cssCode = JSON.stringify(compiled.css);
 		const cssId = JSON.stringify(`vize-style-${compiled.scopeId}`);
 		output = `
@@ -185,6 +245,33 @@ function resolveCssPath(importPath, importer, aliasRules) {
 //#endregion
 //#region src/compiler.ts
 const { compileSfc, compileSfcBatchWithResults } = native;
+/**
+* Extract style block metadata from a Vue SFC source string.
+* Parses `<style>` tags to determine lang, scoped, and module attributes.
+*/
+function extractStyleBlocks(source) {
+	const blocks = [];
+	const styleRegex = /<style([^>]*)>([\s\S]*?)<\/style>/gi;
+	let match;
+	let index = 0;
+	while ((match = styleRegex.exec(source)) !== null) {
+		const attrs = match[1];
+		const content = match[2];
+		const lang = attrs.match(/\blang=["']([^"']+)["']/)?.[1] ?? null;
+		const scoped = /\bscoped\b/.test(attrs);
+		const moduleMatch = attrs.match(/\bmodule(?:=["']([^"']+)["'])?\b/);
+		const isModule = moduleMatch ? moduleMatch[1] || true : false;
+		blocks.push({
+			content,
+			lang,
+			scoped,
+			module: isModule,
+			index
+		});
+		index++;
+	}
+	return blocks;
+}
 function compileFile(filePath, cache, options, source) {
 	const content = source ?? fs.readFileSync(filePath, "utf-8");
 	const scopeId = generateScopeId(filePath);
@@ -202,11 +289,13 @@ function compileFile(filePath, cache, options, source) {
 	if (result.warnings.length > 0) result.warnings.forEach((warning) => {
 		console.warn(`[vize] Warning in ${filePath}: ${warning}`);
 	});
+	const styles = extractStyleBlocks(content);
 	const compiled = {
 		code: result.code,
 		css: result.css,
 		scopeId,
-		hasScoped
+		hasScoped,
+		styles
 	};
 	cache.set(filePath, compiled);
 	return compiled;
@@ -221,16 +310,23 @@ function compileBatch(files, cache, options) {
 		source: f.source
 	}));
 	const result = compileSfcBatchWithResults(inputs, { ssr: options.ssr });
+	const sourceMap = new Map();
+	for (const f of files) sourceMap.set(f.path, f.source);
 	for (const fileResult of result.results) {
-		if (fileResult.errors.length === 0) cache.set(fileResult.path, {
-			code: fileResult.code,
-			css: fileResult.css,
-			scopeId: fileResult.scopeId,
-			hasScoped: fileResult.hasScoped,
-			templateHash: fileResult.templateHash,
-			styleHash: fileResult.styleHash,
-			scriptHash: fileResult.scriptHash
-		});
+		if (fileResult.errors.length === 0) {
+			const source = sourceMap.get(fileResult.path);
+			const styles = source ? extractStyleBlocks(source) : void 0;
+			cache.set(fileResult.path, {
+				code: fileResult.code,
+				css: fileResult.css,
+				scopeId: fileResult.scopeId,
+				hasScoped: fileResult.hasScoped,
+				templateHash: fileResult.templateHash,
+				styleHash: fileResult.styleHash,
+				scriptHash: fileResult.scriptHash,
+				styles
+			});
+		}
 		if (fileResult.errors.length > 0) console.error(`[vize] Compilation error in ${fileResult.path}:\n${fileResult.errors.join("\n")}`);
 		if (fileResult.warnings.length > 0) fileResult.warnings.forEach((warning) => {
 			console.warn(`[vize] Warning in ${fileResult.path}: ${warning}`);
@@ -361,14 +457,16 @@ function rewriteDynamicTemplateImports(code, aliasRules) {
 * statements hoisted to the top of the module, so Vite's module resolution
 * pipeline handles alias expansion and asset hashing in both dev and build.
 */
+const SCRIPT_EXTENSIONS = /\.(js|mjs|cjs|ts|mts|cts|jsx|tsx)$/i;
 function rewriteStaticAssetUrls(code, aliasRules) {
 	let rewritten = code;
 	const imports = [];
 	let counter = 0;
 	for (const rule of aliasRules) {
 		const pattern = new RegExp(`("?src"?\\s*:\\s*)(?:"(${escapeRegExp(rule.fromPrefix)}[^"]+)"|'(${escapeRegExp(rule.fromPrefix)}[^']+)')`, "g");
-		rewritten = rewritten.replace(pattern, (_match, prefix, dqPath, sqPath) => {
+		rewritten = rewritten.replace(pattern, (match, prefix, dqPath, sqPath) => {
 			const fullPath = dqPath || sqPath;
+			if (fullPath && SCRIPT_EXTENSIONS.test(fullPath)) return match;
 			const varName = `__vize_static_${counter++}`;
 			imports.push(`import ${varName} from ${JSON.stringify(fullPath)};`);
 			return `${prefix}${varName}`;
@@ -463,7 +561,17 @@ function vize(options = {}) {
 		}
 		const result = compileBatch(fileContents, cache, { ssr: mergedOptions.ssr ?? false });
 		if (isProduction) {
-			for (const fileResult of result.results) if (fileResult.css) collectedCss.set(fileResult.path, resolveCssImports(fileResult.css, fileResult.path, cssAliasRules, false));
+			for (const fileResult of result.results) if (fileResult.css) {
+				const cached = cache.get(fileResult.path);
+				const hasDelegated = cached?.styles?.some((s) => s.lang !== null && [
+					"scss",
+					"sass",
+					"less",
+					"stylus",
+					"styl"
+				].includes(s.lang) || s.module !== false);
+				if (!hasDelegated) collectedCss.set(fileResult.path, resolveCssImports(fileResult.css, fileResult.path, cssAliasRules, false));
+			}
 		}
 		const elapsed = (performance.now() - startTime).toFixed(2);
 		logger.info(`Pre-compilation complete: ${result.successCount} succeeded, ${result.failedCount} failed (${elapsed}ms, native batch: ${result.timeMs.toFixed(2)}ms)`);
@@ -490,11 +598,7 @@ function vize(options = {}) {
 					__VUE_PROD_DEVTOOLS__: env.command === "serve",
 					__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
 				},
-				optimizeDeps: {
-					include: ["vue"],
-					exclude: ["virtual:vize-styles"],
-					rolldownOptions: { external: [/\.vue$/] }
-				}
+				optimizeDeps: { exclude: ["virtual:vize-styles"] }
 			};
 		},
 		async configResolved(resolvedConfig) {
@@ -633,9 +737,20 @@ function vize(options = {}) {
 			}
 			if (id === VIRTUAL_CSS_MODULE) return RESOLVED_CSS_MODULE;
 			if (isBuild && id.startsWith("/@fs/")) return normalizeFsIdForBuild(id);
-			if (id.includes("?vue&type=style")) return id;
-			if (importer && isVizeVirtual(importer)) {
-				const cleanImporter = fromVirtualId(importer);
+			if (id.includes("?macro=true")) {
+				const filePath = id.split("?")[0];
+				const resolved = resolveVuePath(filePath, importer);
+				if (resolved && fs.existsSync(resolved)) return `\0${resolved}?macro=true`;
+			}
+			if (id.includes("?vue&type=style") || id.includes("?vue=&type=style")) {
+				const params = new URLSearchParams(id.split("?")[1]);
+				const lang = params.get("lang") || "css";
+				if (params.has("module")) return `\0${id}.module.${lang}`;
+				return `\0${id}.${lang}`;
+			}
+			const isMacroImporter = importer?.startsWith("\0") && importer?.endsWith("?macro=true");
+			if (importer && (isVizeVirtual(importer) || isMacroImporter)) {
+				const cleanImporter = isMacroImporter ? importer.slice(1).replace("?macro=true", "") : fromVirtualId(importer);
 				logger.log(`resolveId from virtual: id=${id}, cleanImporter=${cleanImporter}`);
 				if (id.startsWith("#")) try {
 					return await this.resolve(id, cleanImporter, { skipSelf: true });
@@ -643,7 +758,21 @@ function vize(options = {}) {
 					return null;
 				}
 				if (!id.endsWith(".vue")) {
-					if (id.includes("/dist/") || id.includes("/lib/") || id.includes("/es/")) return null;
+					if (!id.startsWith("./") && !id.startsWith("../") && !id.startsWith("/")) {
+						const matchesAlias = cssAliasRules.some((rule) => id === rule.find || id.startsWith(rule.find + "/"));
+						if (!matchesAlias) try {
+							const resolved = await this.resolve(id, cleanImporter, { skipSelf: true });
+							if (resolved) {
+								logger.log(`resolveId: resolved bare ${id} to ${resolved.id} via Vite resolver`);
+								if (isBuild && resolved.id.startsWith("/@fs/")) return {
+									...resolved,
+									id: normalizeFsIdForBuild(resolved.id)
+								};
+								return resolved;
+							}
+						} catch {}
+						return null;
+					}
 					try {
 						const resolved = await this.resolve(id, cleanImporter, { skipSelf: true });
 						if (resolved) {
@@ -731,13 +860,60 @@ function vize(options = {}) {
 				const allCss = Array.from(collectedCss.values()).join("\n\n");
 				return allCss;
 			}
-			if (id.includes("?vue&type=style")) {
-				const [filename] = id.split("?");
+			let styleId = id;
+			if (id.startsWith("\0") && id.includes("?vue")) styleId = id.slice(1).replace(/\.module\.\w+$/, "").replace(/\.\w+$/, "");
+			if (styleId.includes("?vue&type=style") || styleId.includes("?vue=&type=style")) {
+				const [filename, queryString] = styleId.split("?");
 				const realPath = isVizeVirtual(filename) ? fromVirtualId(filename) : filename;
+				const params = new URLSearchParams(queryString);
+				const indexStr = params.get("index");
+				const lang = params.get("lang");
+				const _hasModule = params.has("module");
+				const scoped = params.get("scoped");
 				const compiled = cache.get(realPath);
+				const blockIndex = indexStr !== null ? parseInt(indexStr, 10) : -1;
+				if (compiled?.styles && blockIndex >= 0 && blockIndex < compiled.styles.length) {
+					const block = compiled.styles[blockIndex];
+					let styleContent = block.content;
+					if (scoped && block.scoped && lang && lang !== "css") {
+						const lines = styleContent.split("\n");
+						const hoisted = [];
+						const body = [];
+						for (const line of lines) {
+							const trimmed = line.trimStart();
+							if (trimmed.startsWith("@use ") || trimmed.startsWith("@forward ") || trimmed.startsWith("@import ")) hoisted.push(line);
+							else body.push(line);
+						}
+						const bodyContent = body.join("\n");
+						const hoistedContent = hoisted.length > 0 ? hoisted.join("\n") + "\n\n" : "";
+						styleContent = `${hoistedContent}[${scoped}] {\n${bodyContent}\n}`;
+					}
+					return {
+						code: styleContent,
+						map: null
+					};
+				}
 				if (compiled?.css) return resolveCssImports(compiled.css, realPath, cssAliasRules, server !== null, currentBase);
 				return "";
 			}
+			if (id.startsWith("\0") && id.endsWith("?macro=true")) {
+				const realPath = id.slice(1).replace("?macro=true", "");
+				if (fs.existsSync(realPath)) {
+					const source = fs.readFileSync(realPath, "utf-8");
+					const setupMatch = source.match(/<script\s+setup[^>]*>([\s\S]*?)<\/script>/);
+					if (setupMatch) {
+						const scriptContent = setupMatch[1];
+						return {
+							code: `${scriptContent}\nexport default {}`,
+							map: null
+						};
+					}
+				}
+				return {
+					code: "export default {}",
+					map: null
+				};
+			}
 			if (isVizeVirtual(id)) {
 				const realPath = fromVirtualId(id);
 				if (!realPath.endsWith(".vue")) {
@@ -753,14 +929,22 @@ function vize(options = {}) {
 					});
 				}
 				if (compiled) {
-					if (compiled.css) compiled = {
+					const hasDelegated = compiled.styles?.some((s) => s.lang !== null && [
+						"scss",
+						"sass",
+						"less",
+						"stylus",
+						"styl"
+					].includes(s.lang) || s.module !== false);
+					if (compiled.css && !hasDelegated) compiled = {
 						...compiled,
 						css: resolveCssImports(compiled.css, realPath, cssAliasRules, server !== null, currentBase)
 					};
 					const output = rewriteStaticAssetUrls(rewriteDynamicTemplateImports(generateOutput(compiled, {
 						isProduction,
 						isDev: server !== null,
-						extractCss
+						extractCss,
+						filePath: realPath
 					}), dynamicImportAliasRules), dynamicImportAliasRules);
 					return {
 						code: output,
@@ -783,8 +967,9 @@ function vize(options = {}) {
 			return null;
 		},
 		async transform(code, id, options$1) {
-			if (isVizeVirtual(id)) {
-				const realPath = fromVirtualId(id);
+			const isMacro = id.startsWith("\0") && id.endsWith("?macro=true");
+			if (isVizeVirtual(id) || isMacro) {
+				const realPath = isMacro ? id.slice(1).replace("?macro=true", "") : fromVirtualId(id);
 				try {
 					const result = await transformWithOxc(code, realPath, { lang: "ts" });
 					const defines = options$1?.ssr ? serverViteDefine : clientViteDefine;
@@ -821,7 +1006,31 @@ function vize(options = {}) {
 				logger.log(`Re-compiled: ${path.relative(root, file)} (${updateType})`);
 				const virtualId = toVirtualId(file);
 				const modules = server$1.moduleGraph.getModulesByFile(virtualId) ?? server$1.moduleGraph.getModulesByFile(file);
-				if (updateType === "style-only" && newCompiled.css) {
+				const hasDelegated = newCompiled.styles?.some((s) => s.lang !== null && [
+					"scss",
+					"sass",
+					"less",
+					"stylus",
+					"styl"
+				].includes(s.lang) || s.module !== false);
+				if (hasDelegated && updateType === "style-only") {
+					const affectedModules = new Set();
+					for (const block of newCompiled.styles ?? []) {
+						const params = new URLSearchParams();
+						params.set("vue", "");
+						params.set("type", "style");
+						params.set("index", String(block.index));
+						if (block.scoped) params.set("scoped", `data-v-${newCompiled.scopeId}`);
+						params.set("lang", block.lang ?? "css");
+						if (block.module !== false) params.set("module", typeof block.module === "string" ? block.module : "");
+						const styleId = `${file}?${params.toString()}`;
+						const styleMods = server$1.moduleGraph.getModulesByFile(styleId);
+						if (styleMods) for (const mod of styleMods) affectedModules.add(mod);
+					}
+					if (modules) for (const mod of modules) affectedModules.add(mod);
+					if (affectedModules.size > 0) return [...affectedModules];
+				}
+				if (updateType === "style-only" && newCompiled.css && !hasDelegated) {
 					server$1.ws.send({
 						type: "custom",
 						event: "vize:update",
@@ -875,7 +1084,43 @@ function vize(options = {}) {
 			};
 		} }
 	};
-	return [vueCompatPlugin, mainPlugin];
+	const postTransformPlugin = {
+		name: "vize:post-transform",
+		enforce: "post",
+		async transform(code, id, transformOptions) {
+			if (!id.endsWith(".vue") && !id.endsWith(".vue.ts") && !id.includes("node_modules") && id.endsWith(".setup.ts") && /<script\s+setup[\s>]/.test(code)) {
+				logger.log(`post-transform: compiling virtual SFC content from ${id}`);
+				try {
+					const compiled = compileFile(id, cache, {
+						sourceMap: mergedOptions?.sourceMap ?? !(isProduction ?? false),
+						ssr: mergedOptions?.ssr ?? false
+					}, code);
+					const output = generateOutput(compiled, {
+						isProduction,
+						isDev: server !== null,
+						extractCss,
+						filePath: id
+					});
+					const result = await transformWithOxc(output, id, { lang: "ts" });
+					const defines = transformOptions?.ssr ? serverViteDefine : clientViteDefine;
+					let transformed = result.code;
+					if (Object.keys(defines).length > 0) transformed = applyDefineReplacements(transformed, defines);
+					return {
+						code: transformed,
+						map: result.map
+					};
+				} catch (e) {
+					logger.error(`Virtual SFC compilation failed for ${id}:`, e);
+				}
+			}
+			return null;
+		}
+	};
+	return [
+		vueCompatPlugin,
+		mainPlugin,
+		postTransformPlugin
+	];
 }
 var src_default = vize;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizejs/vite-plugin",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "High-performance native Vite plugin for Vue SFC compilation powered by Vize",
   "publishConfig": {
     "access": "public"
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "tinyglobby": "^0.2.0",
-    "@vizejs/native": "0.9.0"
+    "@vizejs/native": "0.11.0"
   },
   "scripts": {
     "build": "tsdown",