@vizejs/vite-plugin 0.70.0 → 0.71.0

package/dist/index.mjs

@@ -72,6 +72,17 @@ if (import.meta.hot) {
 }
 //#endregion
 //#region src/utils/css.ts
+const deepSelectorPattern = /:deep\(([^()]*(?:\([^()]*\))*[^()]*)\)/;
+const globalSelectorPattern = /:global\(([^()]*(?:\([^()]*\))*[^()]*)\)/g;
+const recursiveAtRules = new Set([
+	"@container",
+	"@layer",
+	"@media",
+	"@supports"
+]);
+function scopeCssForPipeline(css, scopeId) {
+	return transformCssBlock(css, scopeId);
+}
 /**
 * Resolve CSS @import statements by inlining the imported files,
 * then resolve @custom-media definitions within the combined CSS.
@@ -113,10 +124,227 @@ function resolveCssImports(css, importer, aliasRules, isDev, devUrlBase) {
 		}
 		return _match;
 	});
-	result = result.replace(/:deep\(([^()]*(?:\([^()]*\))*[^()]*)\)/g, "$1");
+	result = result.replace(new RegExp(deepSelectorPattern.source, "g"), "$1");
 	result = result.replace(/\n{3,}/g, "\n\n");
 	return result;
 }
+function transformCssBlock(css, scopeId) {
+	let output = "";
+	let cursor = 0;
+	while (cursor < css.length) {
+		const brace = findNextTopLevelBrace(css, cursor);
+		if (brace === -1) {
+			output += css.slice(cursor);
+			break;
+		}
+		const end = findMatchingBrace(css, brace);
+		if (end === -1) {
+			output += css.slice(cursor);
+			break;
+		}
+		const header = css.slice(cursor, brace);
+		const body = css.slice(brace + 1, end);
+		const leadingLength = header.search(/\S/);
+		const leading = leadingLength === -1 ? header : header.slice(0, leadingLength);
+		const statement = leadingLength === -1 ? "" : header.slice(leadingLength);
+		output += leading;
+		if (statement.trimStart().startsWith("@")) {
+			output += statement;
+			output += "{";
+			output += shouldRecurseAtRule(statement) ? transformCssBlock(body, scopeId) : body;
+			output += "}";
+		} else {
+			output += scopeSelectorList(statement, scopeId);
+			output += "{";
+			output += body;
+			output += "}";
+		}
+		cursor = end + 1;
+	}
+	return output;
+}
+function shouldRecurseAtRule(statement) {
+	const name = statement.trimStart().split(/\s+/, 1)[0];
+	return name !== void 0 && recursiveAtRules.has(name);
+}
+function findNextTopLevelBrace(css, start) {
+	let parenDepth = 0;
+	let bracketDepth = 0;
+	let quote = null;
+	let inComment = false;
+	for (let index = start; index < css.length; index += 1) {
+		const char = css[index];
+		const next = css[index + 1];
+		if (inComment) {
+			if (char === "*" && next === "/") {
+				inComment = false;
+				index += 1;
+			}
+			continue;
+		}
+		if (quote !== null) {
+			if (char === "\\") index += 1;
+			else if (char === quote) quote = null;
+			continue;
+		}
+		if (char === "/" && next === "*") {
+			inComment = true;
+			index += 1;
+			continue;
+		}
+		if (char === "'" || char === "\"") {
+			quote = char;
+			continue;
+		}
+		if (char === "(") parenDepth += 1;
+		else if (char === ")" && parenDepth > 0) parenDepth -= 1;
+		else if (char === "[") bracketDepth += 1;
+		else if (char === "]" && bracketDepth > 0) bracketDepth -= 1;
+		else if (char === "{" && parenDepth === 0 && bracketDepth === 0) return index;
+	}
+	return -1;
+}
+function findMatchingBrace(css, start) {
+	let depth = 0;
+	let quote = null;
+	let inComment = false;
+	for (let index = start; index < css.length; index += 1) {
+		const char = css[index];
+		const next = css[index + 1];
+		if (inComment) {
+			if (char === "*" && next === "/") {
+				inComment = false;
+				index += 1;
+			}
+			continue;
+		}
+		if (quote !== null) {
+			if (char === "\\") index += 1;
+			else if (char === quote) quote = null;
+			continue;
+		}
+		if (char === "/" && next === "*") {
+			inComment = true;
+			index += 1;
+			continue;
+		}
+		if (char === "'" || char === "\"") {
+			quote = char;
+			continue;
+		}
+		if (char === "{") depth += 1;
+		else if (char === "}") {
+			depth -= 1;
+			if (depth === 0) return index;
+		}
+	}
+	return -1;
+}
+function scopeSelectorList(selectorList, scopeId) {
+	return splitSelectorList(selectorList).map((selector) => scopeSelector(selector, scopeId)).join(",");
+}
+function splitSelectorList(selectorList) {
+	const selectors = [];
+	let start = 0;
+	let parenDepth = 0;
+	let bracketDepth = 0;
+	let quote = null;
+	for (let index = 0; index < selectorList.length; index += 1) {
+		const char = selectorList[index];
+		if (quote !== null) {
+			if (char === "\\") index += 1;
+			else if (char === quote) quote = null;
+			continue;
+		}
+		if (char === "'" || char === "\"") {
+			quote = char;
+			continue;
+		}
+		if (char === "(") parenDepth += 1;
+		else if (char === ")" && parenDepth > 0) parenDepth -= 1;
+		else if (char === "[") bracketDepth += 1;
+		else if (char === "]" && bracketDepth > 0) bracketDepth -= 1;
+		else if (char === "," && parenDepth === 0 && bracketDepth === 0) {
+			selectors.push(selectorList.slice(start, index));
+			start = index + 1;
+		}
+	}
+	selectors.push(selectorList.slice(start));
+	return selectors;
+}
+function scopeSelector(selector, scopeId) {
+	const leadingLength = selector.search(/\S/);
+	if (leadingLength === -1) return selector;
+	const leading = selector.slice(0, leadingLength);
+	const trailingLength = selector.match(/\s*$/)?.[0].length ?? 0;
+	const bodyEnd = trailingLength === 0 ? selector.length : selector.length - trailingLength;
+	const trailing = selector.slice(bodyEnd);
+	let body = selector.slice(leadingLength, bodyEnd).replace(globalSelectorPattern, "$1");
+	const deep = body.match(deepSelectorPattern);
+	if (deep?.index !== void 0) {
+		const before = body.slice(0, deep.index).trimEnd();
+		const inner = deep[1] ?? "";
+		const after = body.slice(deep.index + deep[0].length);
+		body = `${before.length === 0 ? `[${scopeId}]` : addScopeToSelectorEnd(before, scopeId)} ${inner}${after}`;
+	} else body = addScopeToSelectorEnd(body, scopeId);
+	return leading + body + trailing;
+}
+function addScopeToSelectorEnd(selector, scopeId) {
+	const targetStart = findLastCompoundStart(selector);
+	const beforeTarget = selector.slice(0, targetStart);
+	const target = selector.slice(targetStart);
+	const insertAt = findScopeInsertPosition(target);
+	return `${beforeTarget}${target.slice(0, insertAt)}[${scopeId}]${target.slice(insertAt)}`;
+}
+function findLastCompoundStart(selector) {
+	let parenDepth = 0;
+	let bracketDepth = 0;
+	let quote = null;
+	for (let index = selector.length - 1; index >= 0; index -= 1) {
+		const char = selector[index];
+		if (quote !== null) {
+			if (char === quote) quote = null;
+			continue;
+		}
+		if (char === "'" || char === "\"") {
+			quote = char;
+			continue;
+		}
+		if (char === ")") parenDepth += 1;
+		else if (char === "(" && parenDepth > 0) parenDepth -= 1;
+		else if (char === "]") bracketDepth += 1;
+		else if (char === "[" && bracketDepth > 0) bracketDepth -= 1;
+		else if (parenDepth === 0 && bracketDepth === 0 && (char === ">" || char === "+" || char === "~")) return index + 1;
+		else if (parenDepth === 0 && bracketDepth === 0 && /\s/.test(char)) {
+			while (index > 0 && /\s/.test(selector[index - 1])) index -= 1;
+			return index + 1;
+		}
+	}
+	return 0;
+}
+function findScopeInsertPosition(target) {
+	let parenDepth = 0;
+	let bracketDepth = 0;
+	let quote = null;
+	for (let index = 0; index < target.length; index += 1) {
+		const char = target[index];
+		if (quote !== null) {
+			if (char === "\\") index += 1;
+			else if (char === quote) quote = null;
+			continue;
+		}
+		if (char === "'" || char === "\"") {
+			quote = char;
+			continue;
+		}
+		if (char === "(") parenDepth += 1;
+		else if (char === ")" && parenDepth > 0) parenDepth -= 1;
+		else if (char === "[") bracketDepth += 1;
+		else if (char === "]" && bracketDepth > 0) bracketDepth -= 1;
+		else if (char === ":" && parenDepth === 0 && bracketDepth === 0) return index;
+	}
+	return target.length;
+}
 function parseCustomMedia(css, map) {
 	const re = /@custom-media\s+(--[\w-]+)\s+(.+?)\s*;/g;
 	let m;
@@ -152,13 +380,16 @@ function needsPreprocessor(block) {
 function isCssModule(block) {
 	return block.module !== false;
 }
+function needsCssPipeline(block) {
+	return block.content.includes("@apply");
+}
 /**
 * Check if any style blocks in the compiled module require delegation to
-* Vite's CSS pipeline (preprocessor or CSS Modules).
+* Vite's CSS pipeline (preprocessor, CSS Modules, or PostCSS transforms).
 */
 function hasDelegatedStyles(compiled) {
 	if (!compiled.styles) return false;
-	return compiled.styles.some((s) => needsPreprocessor(s) || isCssModule(s));
+	return compiled.styles.some((s) => needsPreprocessor(s) || isCssModule(s) || needsCssPipeline(s));
 }
 function supportsTemplateOnlyHmr(output) {
 	return /(?:^|\n)(?:_sfc_main|__sfc__)\.render\s*=\s*render\b/m.test(output);
@@ -340,11 +571,8 @@ function rewriteStaticAssetUrls(code, aliasRules) {
 	return rewritten;
 }
 /**
-* 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.
+* Built-in Vite/Vue/Nuxt define keys that are normally handled by Vite's own
+* transform pipeline.
 */
 const BUILTIN_DEFINE_PREFIXES = [
 	"import.meta.server",
@@ -358,9 +586,20 @@ const BUILTIN_DEFINE_PREFIXES = [
 	"__NUXT_",
 	"process.env"
 ];
+const VIRTUAL_MODULE_DEFINE_KEYS = new Set([
+	"import.meta.server",
+	"import.meta.client",
+	"import.meta.dev",
+	"import.meta.test",
+	"import.meta.prerender"
+]);
 function isBuiltinDefine(key) {
 	return BUILTIN_DEFINE_PREFIXES.some((prefix) => key === prefix || key.startsWith(prefix + ".") || key.startsWith(prefix + "_"));
 }
+function shouldApplyDefineInVirtualModule(key) {
+	if (VIRTUAL_MODULE_DEFINE_KEYS.has(key)) return true;
+	return !isBuiltinDefine(key);
+}
 /**
 * Apply Vite define replacements to code.
 * Replaces keys like `import.meta.vfFeatures.photoSection` with their values.
@@ -820,6 +1059,16 @@ function getOxcDumpPath(root, realPath) {
 	fs.mkdirSync(dumpDir, { recursive: true });
 	return path.join(dumpDir, `vize-oxc-error-${path.basename(realPath)}.ts`);
 }
+function getVirtualModuleDefines(state, ssr) {
+	return {
+		"import.meta.client": ssr ? "false" : "true",
+		"import.meta.server": ssr ? "true" : "false",
+		"import.meta.dev": state.isProduction ? "false" : "true",
+		"import.meta.test": "false",
+		"import.meta.prerender": "false",
+		...ssr ? state.serverViteDefine : state.clientViteDefine
+	};
+}
 function loadHook(state, id, loadOptions) {
 	const currentBase = loadOptions?.ssr ? state.serverViteBase : state.clientViteBase;
 	if (id === "\0vize:all-styles.css") return Array.from(state.collectedCss.values()).join("\n\n");
@@ -838,6 +1087,7 @@ function loadHook(state, id, loadOptions) {
 		if (fallbackCompiled?.styles && blockIndex >= 0 && blockIndex < fallbackCompiled.styles.length) {
 			const block = fallbackCompiled.styles[blockIndex];
 			let styleContent = block.content;
+			if (scoped && block.scoped && (!lang || lang === "css")) styleContent = scopeCssForPipeline(styleContent, scoped);
 			if (scoped && block.scoped && lang && lang !== "css") {
 				const lines = styleContent.split("\n");
 				const hoisted = [];
@@ -936,9 +1186,9 @@ async function transformHook(state, code, id, options) {
 		const realPath = isMacro ? id.slice(1).replace("?macro=true", "") : fromVirtualId(id);
 		try {
 			const result = await transformWithOxc(code, realPath, { lang: "ts" });
-			const defines = options?.ssr ? state.serverViteDefine : state.clientViteDefine;
+			const defines = getVirtualModuleDefines(state, options?.ssr ?? false);
 			let transformed = result.code;
-			if (Object.keys(defines).length > 0) transformed = applyDefineReplacements(transformed, defines);
+			transformed = applyDefineReplacements(transformed, defines);
 			return {
 				code: transformed,
 				map: result.map
@@ -1194,7 +1444,7 @@ function vize(options = {}) {
 				const isSsr = !!resolvedConfig.build?.ssr;
 				const envDefine = {};
 				if (resolvedConfig.define) for (const [key, value] of Object.entries(resolvedConfig.define)) {
-					if (isBuiltinDefine(key)) continue;
+					if (!shouldApplyDefineInVirtualModule(key)) continue;
 					if (typeof value === "string") envDefine[key] = value;
 					else envDefine[key] = JSON.stringify(value);
 				}

package/package.json

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