@vizejs/vite-plugin 0.0.1-alpha.102 → 0.0.1-alpha.104

package/dist/index.js

@@ -118,6 +118,69 @@ ${output}`;
 	if (!isProduction && isDev && hasExportDefault) output += generateHmrCode(compiled.scopeId, hmrUpdateType ?? "full-reload");
 	return output;
 }
+/**
+* Resolve CSS @import statements by inlining the imported files,
+* then resolve @custom-media definitions within the combined CSS.
+*
+* This is necessary because Vize embeds CSS as a JS string via
+* document.createElement('style'), bypassing Vite's CSS pipeline.
+*/
+function resolveCssImports(css, importer, aliasRules, isDev, devUrlBase) {
+	const customMedia = new Map();
+	const importRegex = /^@import\s+(?:"([^"]+)"|'([^']+)');?\s*$/gm;
+	let result = css;
+	result = result.replace(importRegex, (_match, dqPath, sqPath) => {
+		const importPath = dqPath || sqPath;
+		if (!importPath) return _match;
+		const resolved = resolveCssPath(importPath, importer, aliasRules);
+		if (!resolved || !fs.existsSync(resolved)) return _match;
+		try {
+			const content = fs.readFileSync(resolved, "utf-8");
+			parseCustomMedia(content, customMedia);
+			return content;
+		} catch {
+			return _match;
+		}
+	});
+	parseCustomMedia(result, customMedia);
+	result = result.replace(/^@custom-media\s+[^;]+;\s*$/gm, "");
+	if (customMedia.size > 0) for (const [name, query] of customMedia) {
+		const escaped = name.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+		result = result.replace(new RegExp(`\\(${escaped}\\)`, "g"), query);
+	}
+	if (isDev) result = result.replace(/url\(\s*(["']?)([^"')]+)\1\s*\)/g, (_match, quote, urlPath) => {
+		const trimmed = urlPath.trim();
+		if (trimmed.startsWith("data:") || trimmed.startsWith("http://") || trimmed.startsWith("https://") || trimmed.startsWith("/@fs/")) return _match;
+		const resolved = resolveCssPath(trimmed, importer, aliasRules);
+		if (resolved && fs.existsSync(resolved)) {
+			const normalized = resolved.replace(/\\/g, "/");
+			const base = devUrlBase ?? "/";
+			const prefix = base.endsWith("/") ? base : base + "/";
+			return `url("${prefix}@fs${normalized}")`;
+		}
+		return _match;
+	});
+	result = result.replace(/:deep\(([^()]*(?:\([^()]*\))*[^()]*)\)/g, "$1");
+	result = result.replace(/\n{3,}/g, "\n\n");
+	return result;
+}
+function parseCustomMedia(css, map) {
+	const re = /@custom-media\s+(--[\w-]+)\s+(.+?)\s*;/g;
+	let m;
+	while ((m = re.exec(css)) !== null) map.set(m[1], m[2]);
+}
+function resolveCssPath(importPath, importer, aliasRules) {
+	for (const rule of aliasRules) if (importPath.startsWith(rule.find)) {
+		const resolved = importPath.replace(rule.find, rule.replacement);
+		return path.resolve(resolved);
+	}
+	if (importPath.startsWith(".")) {
+		const dir = path.dirname(importer);
+		return path.resolve(dir, importPath);
+	}
+	if (path.isAbsolute(importPath)) return importPath;
+	return null;
+}
 
 //#endregion
 //#region src/compiler.ts
@@ -323,18 +386,61 @@ function createLogger(debug) {
 		error: (...args) => console.error("[vize]", ...args)
 	};
 }
+/**
+* Built-in Vite/Vue/Nuxt define keys that are handled by Vite's own transform pipeline.
+* These must NOT be replaced by the vize plugin because:
+* 1. Nuxt runs both client and server Vite builds, each with different values
+*    (e.g., import.meta.server = true on server, false on client).
+* 2. Vite's import.meta transform already handles these correctly per-environment.
+*/
+const BUILTIN_DEFINE_PREFIXES = [
+	"import.meta.server",
+	"import.meta.client",
+	"import.meta.dev",
+	"import.meta.test",
+	"import.meta.prerender",
+	"import.meta.env",
+	"import.meta.hot",
+	"__VUE_",
+	"__NUXT_",
+	"process.env"
+];
+function isBuiltinDefine(key) {
+	return BUILTIN_DEFINE_PREFIXES.some((prefix) => key === prefix || key.startsWith(prefix + ".") || key.startsWith(prefix + "_"));
+}
+/**
+* Apply Vite define replacements to code.
+* Replaces keys like `import.meta.vfFeatures.photoSection` with their values.
+* Uses word-boundary-aware matching to avoid replacing inside strings or partial matches.
+*/
+function applyDefineReplacements(code, defines) {
+	const sortedKeys = Object.keys(defines).sort((a, b) => b.length - a.length);
+	let result = code;
+	for (const key of sortedKeys) {
+		if (!result.includes(key)) continue;
+		const escaped = key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		const re = new RegExp(escaped + "(?![\\w$.])", "g");
+		result = result.replace(re, defines[key]);
+	}
+	return result;
+}
 function vize(options = {}) {
 	const cache = new Map();
 	const collectedCss = new Map();
 	let isProduction;
 	let root;
+	let clientViteBase = "/";
+	let serverViteBase = "/";
 	let server = null;
 	let filter;
 	let scanPatterns;
 	let ignorePatterns;
 	let mergedOptions;
 	let dynamicImportAliasRules = [];
+	let cssAliasRules = [];
 	let extractCss = false;
+	let clientViteDefine = {};
+	let serverViteDefine = {};
 	const logger = createLogger(options.debug ?? false);
 	async function compileAll() {
 		const startTime = performance.now();
@@ -356,7 +462,7 @@ 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, fileResult.css);
+			for (const fileResult of result.results) if (fileResult.css) 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)`);
@@ -386,15 +492,6 @@ function vize(options = {}) {
 				optimizeDeps: {
 					include: ["vue"],
 					exclude: ["virtual:vize-styles"],
-					esbuildOptions: { plugins: [{
-						name: "vize-externalize-vue",
-						setup(build) {
-							build.onResolve({ filter: /\.vue$/ }, (args) => ({
-								path: args.path,
-								external: true
-							}));
-						}
-					}] },
 					rolldownOptions: { external: [/\.vue$/] }
 				}
 			};
@@ -402,7 +499,19 @@ function vize(options = {}) {
 		async configResolved(resolvedConfig) {
 			root = options.root ?? resolvedConfig.root;
 			isProduction = options.isProduction ?? resolvedConfig.isProduction;
+			const isSsrBuild = !!resolvedConfig.build?.ssr;
+			if (isSsrBuild) serverViteBase = resolvedConfig.base ?? "/";
+			else clientViteBase = resolvedConfig.base ?? "/";
 			extractCss = isProduction;
+			const isSsr = !!resolvedConfig.build?.ssr;
+			const envDefine = {};
+			if (resolvedConfig.define) for (const [key, value] of Object.entries(resolvedConfig.define)) {
+				if (isBuiltinDefine(key)) continue;
+				if (typeof value === "string") envDefine[key] = value;
+				else envDefine[key] = JSON.stringify(value);
+			}
+			if (isSsr) serverViteDefine = envDefine;
+			else clientViteDefine = envDefine;
 			const configEnv = {
 				mode: resolvedConfig.mode,
 				command: resolvedConfig.command === "build" ? "build" : "serve",
@@ -444,6 +553,15 @@ function vize(options = {}) {
 				});
 			}
 			dynamicImportAliasRules.sort((a, b) => b.fromPrefix.length - a.fromPrefix.length);
+			cssAliasRules = [];
+			for (const alias of resolvedConfig.resolve.alias) {
+				if (typeof alias.find !== "string" || typeof alias.replacement !== "string") continue;
+				cssAliasRules.push({
+					find: alias.find,
+					replacement: alias.replacement
+				});
+			}
+			cssAliasRules.sort((a, b) => b.find.length - a.find.length);
 			filter = createFilter(mergedOptions.include, mergedOptions.exclude);
 			scanPatterns = mergedOptions.scanPatterns ?? ["**/*.vue"];
 			ignorePatterns = mergedOptions.ignorePatterns ?? [
@@ -604,7 +722,8 @@ function vize(options = {}) {
 			}
 			return null;
 		},
-		load(id) {
+		load(id, loadOptions) {
+			const currentBase = loadOptions?.ssr ? serverViteBase : clientViteBase;
 			if (id === RESOLVED_CSS_MODULE) {
 				const allCss = Array.from(collectedCss.values()).join("\n\n");
 				return allCss;
@@ -613,7 +732,7 @@ function vize(options = {}) {
 				const [filename] = id.split("?");
 				const realPath = isVizeVirtual(filename) ? fromVirtualId(filename) : filename;
 				const compiled = cache.get(realPath);
-				if (compiled?.css) return compiled.css;
+				if (compiled?.css) return resolveCssImports(compiled.css, realPath, cssAliasRules, server !== null, currentBase);
 				return "";
 			}
 			if (isVizeVirtual(id)) {
@@ -631,6 +750,10 @@ function vize(options = {}) {
 					});
 				}
 				if (compiled) {
+					if (compiled.css) compiled = {
+						...compiled,
+						css: resolveCssImports(compiled.css, realPath, cssAliasRules, server !== null, currentBase)
+					};
 					const output = rewriteStaticAssetUrls(rewriteDynamicTemplateImports(generateOutput(compiled, {
 						isProduction,
 						isDev: server !== null,
@@ -656,13 +779,16 @@ function vize(options = {}) {
 			}
 			return null;
 		},
-		async transform(code, id) {
+		async transform(code, id, options$1) {
 			if (isVizeVirtual(id)) {
 				const realPath = fromVirtualId(id);
 				try {
 					const result = await transformWithOxc(code, realPath, { lang: "ts" });
+					const defines = options$1?.ssr ? serverViteDefine : clientViteDefine;
+					let transformed = result.code;
+					if (Object.keys(defines).length > 0) transformed = applyDefineReplacements(transformed, defines);
 					return {
-						code: result.code,
+						code: transformed,
 						map: result.map
 					};
 				} catch (e) {
@@ -699,7 +825,7 @@ function vize(options = {}) {
 						data: {
 							id: newCompiled.scopeId,
 							type: "style-only",
-							css: newCompiled.css
+							css: resolveCssImports(newCompiled.css, file, cssAliasRules, true, clientViteBase)
 						}
 					});
 					return [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizejs/vite-plugin",
-  "version": "0.0.1-alpha.102",
+  "version": "0.0.1-alpha.104",
   "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.0.1-alpha.102"
+    "@vizejs/native": "0.0.1-alpha.104"
   },
   "scripts": {
     "build": "tsdown",