@vizejs/unplugin 0.443.0 → 0.457.0

package/README.md

@@ -116,5 +116,6 @@ TypeScript/JSX transforms in the pipeline if your SFC scripts use those syntaxes
 
 - Vite is still the recommended integration if you need the most complete behavior today.
 - CSS Modules and preprocessors depend on the host bundler CSS pipeline and are more likely to change than the Vite path.
+- Scoped preprocessor styles are compiled before they are scoped, as in Vue: Webpack uses your `.scss`/`.less`/`.styl` rules, while Rollup, Rolldown and esbuild run the project's installed `sass` (or `sass-embedded`), `less` or `stylus`.
 - If your bundler inlines the Vue runtime, Vize injects the usual Vue 3 compile-time feature flags for Rollup-like and Webpack hosts when its compiler is active.
 - Test carefully before depending on this package in production.

package/dist/babel.cjs

@@ -1,4 +1,4 @@
-const require_unplugin = require("./unplugin-BZZSLylM.cjs");
+const require_unplugin = require("./unplugin-BMwc3bUL.cjs");
 //#region src/babel.ts
 function vizeBabelPlugin(_api, rawOptions = {}) {
 	const options = require_unplugin.normalizeOptions(rawOptions);

package/dist/babel.mjs

@@ -1,4 +1,4 @@
-import { a as createFilter, i as generateOutput, r as compileVueModule, t as normalizeOptions } from "./unplugin-LGSCePN4.mjs";
+import { a as createFilter, i as generateOutput, r as compileVueModule, t as normalizeOptions } from "./unplugin-BMBg2ffv.mjs";
 //#region src/babel.ts
 function vizeBabelPlugin(_api, rawOptions = {}) {
 	const options = normalizeOptions(rawOptions);

package/dist/esbuild.cjs

@@ -1,4 +1,4 @@
 //#region src/esbuild.ts
-var esbuild_default = require("./unplugin-BZZSLylM.cjs").vizeUnplugin.esbuild;
+var esbuild_default = require("./unplugin-BMwc3bUL.cjs").vizeUnplugin.esbuild;
 //#endregion
 module.exports = esbuild_default;

package/dist/esbuild.mjs

@@ -1,4 +1,4 @@
-import { n as vizeUnplugin } from "./unplugin-LGSCePN4.mjs";
+import { n as vizeUnplugin } from "./unplugin-BMBg2ffv.mjs";
 //#region src/esbuild.ts
 var esbuild_default = vizeUnplugin.esbuild;
 //#endregion

package/dist/index.cjs

@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_unplugin = require("./unplugin-BZZSLylM.cjs");
+const require_unplugin = require("./unplugin-BMwc3bUL.cjs");
 exports.default = require_unplugin.vizeUnplugin;
 exports.vizeUnplugin = require_unplugin.vizeUnplugin;

package/dist/index.d.cts

@@ -2,6 +2,7 @@ import { i as VizeVueVersion, n as VizeCompatibilityOptions, r as VizeUnpluginOp
 import { Compiler } from "webpack";
 
 //#region src/unplugin.d.ts
-declare const vizeUnplugin: import("unplugin").UnpluginInstance<VizeUnpluginOptions | undefined, boolean>;
+type VizeUnpluginInput = VizeUnpluginOptions | undefined;
+declare const vizeUnplugin: import("unplugin").UnpluginInstance<VizeUnpluginInput, boolean>;
 //#endregion
 export { type MacroArtifact, type VizeCompatibilityOptions, type VizeUnpluginOptions, type VizeVueVersion, vizeUnplugin as default, vizeUnplugin };

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import { i as VizeVueVersion, n as VizeCompatibilityOptions, r as VizeUnpluginOp
 import { Compiler } from "webpack";
 
 //#region src/unplugin.d.ts
-declare const vizeUnplugin: import("unplugin").UnpluginInstance<VizeUnpluginOptions | undefined, boolean>;
+type VizeUnpluginInput = VizeUnpluginOptions | undefined;
+declare const vizeUnplugin: import("unplugin").UnpluginInstance<VizeUnpluginInput, boolean>;
 //#endregion
 export { type MacroArtifact, type VizeCompatibilityOptions, type VizeUnpluginOptions, type VizeVueVersion, vizeUnplugin as default, vizeUnplugin };

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import { n as vizeUnplugin } from "./unplugin-LGSCePN4.mjs";
+import { n as vizeUnplugin } from "./unplugin-BMBg2ffv.mjs";
 export { vizeUnplugin as default, vizeUnplugin };

package/dist/rolldown.cjs

@@ -1,4 +1,4 @@
 //#region src/rolldown.ts
-var rolldown_default = require("./unplugin-BZZSLylM.cjs").vizeUnplugin.rollup;
+var rolldown_default = require("./unplugin-BMwc3bUL.cjs").vizeUnplugin.rollup;
 //#endregion
 module.exports = rolldown_default;

package/dist/rolldown.mjs

@@ -1,4 +1,4 @@
-import { n as vizeUnplugin } from "./unplugin-LGSCePN4.mjs";
+import { n as vizeUnplugin } from "./unplugin-BMBg2ffv.mjs";
 //#region src/rolldown.ts
 var rolldown_default = vizeUnplugin.rollup;
 //#endregion

package/dist/rollup.cjs

@@ -1,4 +1,4 @@
 //#region src/rollup.ts
-var rollup_default = require("./unplugin-BZZSLylM.cjs").vizeUnplugin.rollup;
+var rollup_default = require("./unplugin-BMwc3bUL.cjs").vizeUnplugin.rollup;
 //#endregion
 module.exports = rollup_default;

package/dist/rollup.mjs

@@ -1,4 +1,4 @@
-import { n as vizeUnplugin } from "./unplugin-LGSCePN4.mjs";
+import { n as vizeUnplugin } from "./unplugin-BMBg2ffv.mjs";
 //#region src/rollup.ts
 var rollup_default = vizeUnplugin.rollup;
 //#endregion

package/dist/{unplugin-LGSCePN4.mjs → unplugin-BMBg2ffv.mjs}

@@ -1,9 +1,10 @@
+import { a as isPreprocessorLang, c as transformStyleVars, n as registerWebpackStyleRule, o as preprocessStyle, r as webpackStylePath, s as scopeCss, t as findVirtualModules } from "./webpack-styles-8kxctaA7.mjs";
 import { createRequire } from "node:module";
 import fs from "node:fs";
 import { createUnplugin } from "unplugin";
 import { createHash } from "node:crypto";
 import * as native from "@vizejs/native";
-import { generateSfcScopeId, wrapSfcScopedPreprocessorStyle } from "@vizejs/native";
+import { generateSfcScopeId } from "@vizejs/native";
 import { transform } from "oxc-transform";
 //#region src/filter.ts
 function createFilter(include, exclude) {
@@ -92,15 +93,8 @@ function prependMappedJsxCode(code, mapJson, prefix) {
 }
 //#endregion
 //#region src/style.ts
-const PREPROCESSOR_LANGS = new Set([
-	"scss",
-	"sass",
-	"less",
-	"stylus",
-	"styl"
-]);
 function needsPreprocessor(block) {
-	return block.lang !== null && PREPROCESSOR_LANGS.has(block.lang);
+	return isPreprocessorLang(block.lang);
 }
 function isCssModule(block) {
 	return block.module !== false;
@@ -143,8 +137,14 @@ const __vize_css_id__ = ${JSON.stringify(`vize-style-${styleKey}`)};
 })();
 ${output}`;
 }
+const CSS_MODULE_LOCALS = "__vize_css_module_locals__";
+const CSS_MODULE_LOCALS_HELPER = `const ${CSS_MODULE_LOCALS} = (ns) =>
+  ns.default?.locals ??
+  (ns.default && typeof ns.default === "object" && !Array.isArray(ns.default)
+    ? ns.default
+    : Object.fromEntries(Object.entries(ns).filter(([key]) => key !== "default")));`;
 function generateOutput(compiled, options) {
-	const { isProduction, isDev, extractCss, filePath } = options;
+	const { isProduction, isDev, extractCss, filePath, styleRequest } = options;
 	let output = compiled.code;
 	const exportDefaultRegex = /^export default /m;
 	const hasExportDefault = exportDefaultRegex.test(output);
@@ -172,14 +172,22 @@ function generateOutput(compiled, options) {
 			params.set("index", String(block.index));
 			params.set("lang", lang);
 			if (block.scoped) params.set("scoped", `data-v-${compiled.scopeId}`);
-			const importUrl = `${filePath}?${params.toString()}`;
+			const scoped = block.scoped ? `data-v-${compiled.scopeId}` : null;
+			const styleFile = styleRequest?.(block, scoped);
 			if (isCssModule(block)) {
 				const bindingName = typeof block.module === "string" ? block.module : "$style";
-				const moduleParams = new URLSearchParams(params);
-				moduleParams.set("module", typeof block.module === "string" ? block.module : "");
-				cssModuleImports.push(`import ${bindingName} from ${JSON.stringify(`${filePath}?${moduleParams.toString()}`)};`);
-			} else styleImports.push(`import ${JSON.stringify(importUrl)};`);
+				if (styleFile) {
+					const namespace = `__vize_css_module_${block.index}__`;
+					cssModuleImports.push(`import * as ${namespace} from ${JSON.stringify(styleFile)};`, `const ${bindingName} = ${CSS_MODULE_LOCALS}(${namespace});`);
+				} else {
+					const moduleParams = new URLSearchParams(params);
+					moduleParams.set("module", typeof block.module === "string" ? block.module : "");
+					const moduleUrl = `${filePath}?${moduleParams.toString()}`;
+					cssModuleImports.push(`import ${bindingName} from ${JSON.stringify(moduleUrl)};`);
+				}
+			} else styleImports.push(`import ${JSON.stringify(styleFile ?? `${filePath}?${params.toString()}`)};`);
 		}
+		if (cssModuleImports.some((line) => line.includes(CSS_MODULE_LOCALS))) cssModuleImports.unshift(CSS_MODULE_LOCALS_HELPER);
 		const allImports = [...styleImports, ...cssModuleImports].join("\n");
 		if (allImports) output = `${allImports}\n${output}`;
 		if (cssModuleImports.length > 0) {
@@ -193,9 +201,6 @@ function generateOutput(compiled, options) {
 	if (!isProduction && isDev && hasExportDefault && supportsTemplateOnlyHmr(output)) output += "";
 	return output;
 }
-function wrapScopedPreprocessorStyle(content, scoped, lang) {
-	return wrapSfcScopedPreprocessorStyle(content, scoped, lang);
-}
 function toStyleBlockInfo(block) {
 	return {
 		content: block.content,
@@ -348,7 +353,8 @@ function createVirtualStyleId(id) {
 	const { filename, query } = parseVueRequest(id);
 	const index = query.index ?? 0;
 	const lang = query.lang ?? "css";
-	const suffix = query.module !== false ? `.module.${lang}` : `.${lang}`;
+	const fileLang = query.scoped && isPreprocessorLang(lang) ? "css" : lang;
+	const suffix = query.module !== false ? `.module.${fileLang}` : `.${fileLang}`;
 	const params = new URLSearchParams();
 	params.set("vue", "");
 	params.set("type", "style");
@@ -465,13 +471,18 @@ async function loadStyleBlock(id, options, cache) {
 		compiled = compileVueModule(request.filename, source, options, cache).compiled;
 	}
 	const block = compiled?.styles[index];
-	if (!block) return "";
-	return wrapScopedPreprocessorStyle(block.content, request.query.scoped, block.lang);
+	if (!compiled || !block) return "";
+	const source = transformStyleVars(block.content, compiled.scopeId);
+	const scoped = request.query.scoped;
+	if (!scoped) return source;
+	return scopeCss(block.lang && isPreprocessorLang(block.lang) ? await preprocessStyle(source, block.lang, request.filename, options.root) : source, scoped);
 }
-const vizeUnplugin = createUnplugin((rawOptions = {}) => {
+const vizeUnplugin = createUnplugin((rawOptions = {}, meta) => {
 	const options = normalizeOptions(rawOptions);
 	const filter = createFilter(options.include, options.exclude);
 	const cache = /* @__PURE__ */ new Map();
+	const webpackStyleFiles = meta.framework === "webpack";
+	let virtualModules;
 	return {
 		name: "unplugin-vize",
 		resolveId(id) {
@@ -481,7 +492,7 @@ const vizeUnplugin = createUnplugin((rawOptions = {}) => {
 		},
 		loadInclude(id) {
 			if (options.hostCompiler) return false;
-			return isVirtualStyleId(id);
+			return !webpackStyleFiles && isVirtualStyleId(id);
 		},
 		async load(id) {
 			if (options.hostCompiler) return null;
@@ -515,7 +526,13 @@ const vizeUnplugin = createUnplugin((rawOptions = {}) => {
 			const transformed = await stripTypeScript(id, generateOutput(compiled, {
 				isProduction: options.isProduction,
 				isDev: false,
-				filePath: id
+				filePath: id,
+				styleRequest: webpackStyleFiles ? (block, scoped) => {
+					const stylePath = webpackStylePath(id, block, scoped);
+					if (!virtualModules) throw new Error("[vize] webpack style blocks need the plugin's virtual modules.");
+					virtualModules.writeModule(stylePath, transformStyleVars(block.content, compiled.scopeId));
+					return stylePath;
+				} : void 0
 			}), options.sourceMap);
 			return {
 				code: transformed.code,
@@ -526,11 +543,15 @@ const vizeUnplugin = createUnplugin((rawOptions = {}) => {
 			if (isVueFile(id)) cache.delete(id);
 		},
 		webpack(compiler) {
-			if (!options.hostCompiler) injectWebpackVueDefines(compiler, options.isProduction, options.compatibility.webpackVersion);
+			if (!options.hostCompiler) {
+				virtualModules = findVirtualModules(compiler);
+				registerWebpackStyleRule(compiler);
+				injectWebpackVueDefines(compiler, options.isProduction, options.compatibility.webpackVersion);
+			}
 		},
 		esbuild: {
 			onResolveFilter: /\.(?:vue|[jt]sx)(?:$|\?)/,
-			onLoadFilter: /\.(?:vue|[jt]sx)(?:$|\?)/,
+			onLoadFilter: /\.(?:vue|[jt]sx)(?:$|\?)|\.__vize_style_\d+\./,
 			loader(_code, id) {
 				const request = parseVueRequest(id);
 				if (request.query.type === "style") return request.query.module !== false ? "local-css" : "css";

package/dist/{unplugin-BZZSLylM.cjs → unplugin-BMwc3bUL.cjs}

@@ -1,32 +1,11 @@
-//#region \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-//#endregion
+const require_webpack_styles = require("./webpack-styles-BeXQWFdv.cjs");
 let node_fs = require("node:fs");
-node_fs = __toESM(node_fs, 1);
+node_fs = require_webpack_styles.__toESM(node_fs, 1);
 let node_module = require("node:module");
 let unplugin = require("unplugin");
 let node_crypto = require("node:crypto");
 let _vizejs_native = require("@vizejs/native");
-_vizejs_native = __toESM(_vizejs_native, 1);
+_vizejs_native = require_webpack_styles.__toESM(_vizejs_native, 1);
 let oxc_transform = require("oxc-transform");
 //#region src/filter.ts
 function createFilter(include, exclude) {
@@ -115,15 +94,8 @@ function prependMappedJsxCode(code, mapJson, prefix) {
 }
 //#endregion
 //#region src/style.ts
-const PREPROCESSOR_LANGS = new Set([
-	"scss",
-	"sass",
-	"less",
-	"stylus",
-	"styl"
-]);
 function needsPreprocessor(block) {
-	return block.lang !== null && PREPROCESSOR_LANGS.has(block.lang);
+	return require_webpack_styles.isPreprocessorLang(block.lang);
 }
 function isCssModule(block) {
 	return block.module !== false;
@@ -166,8 +138,14 @@ const __vize_css_id__ = ${JSON.stringify(`vize-style-${styleKey}`)};
 })();
 ${output}`;
 }
+const CSS_MODULE_LOCALS = "__vize_css_module_locals__";
+const CSS_MODULE_LOCALS_HELPER = `const ${CSS_MODULE_LOCALS} = (ns) =>
+  ns.default?.locals ??
+  (ns.default && typeof ns.default === "object" && !Array.isArray(ns.default)
+    ? ns.default
+    : Object.fromEntries(Object.entries(ns).filter(([key]) => key !== "default")));`;
 function generateOutput(compiled, options) {
-	const { isProduction, isDev, extractCss, filePath } = options;
+	const { isProduction, isDev, extractCss, filePath, styleRequest } = options;
 	let output = compiled.code;
 	const exportDefaultRegex = /^export default /m;
 	const hasExportDefault = exportDefaultRegex.test(output);
@@ -195,14 +173,22 @@ function generateOutput(compiled, options) {
 			params.set("index", String(block.index));
 			params.set("lang", lang);
 			if (block.scoped) params.set("scoped", `data-v-${compiled.scopeId}`);
-			const importUrl = `${filePath}?${params.toString()}`;
+			const scoped = block.scoped ? `data-v-${compiled.scopeId}` : null;
+			const styleFile = styleRequest?.(block, scoped);
 			if (isCssModule(block)) {
 				const bindingName = typeof block.module === "string" ? block.module : "$style";
-				const moduleParams = new URLSearchParams(params);
-				moduleParams.set("module", typeof block.module === "string" ? block.module : "");
-				cssModuleImports.push(`import ${bindingName} from ${JSON.stringify(`${filePath}?${moduleParams.toString()}`)};`);
-			} else styleImports.push(`import ${JSON.stringify(importUrl)};`);
+				if (styleFile) {
+					const namespace = `__vize_css_module_${block.index}__`;
+					cssModuleImports.push(`import * as ${namespace} from ${JSON.stringify(styleFile)};`, `const ${bindingName} = ${CSS_MODULE_LOCALS}(${namespace});`);
+				} else {
+					const moduleParams = new URLSearchParams(params);
+					moduleParams.set("module", typeof block.module === "string" ? block.module : "");
+					const moduleUrl = `${filePath}?${moduleParams.toString()}`;
+					cssModuleImports.push(`import ${bindingName} from ${JSON.stringify(moduleUrl)};`);
+				}
+			} else styleImports.push(`import ${JSON.stringify(styleFile ?? `${filePath}?${params.toString()}`)};`);
 		}
+		if (cssModuleImports.some((line) => line.includes(CSS_MODULE_LOCALS))) cssModuleImports.unshift(CSS_MODULE_LOCALS_HELPER);
 		const allImports = [...styleImports, ...cssModuleImports].join("\n");
 		if (allImports) output = `${allImports}\n${output}`;
 		if (cssModuleImports.length > 0) {
@@ -216,9 +202,6 @@ function generateOutput(compiled, options) {
 	if (!isProduction && isDev && hasExportDefault && supportsTemplateOnlyHmr(output)) output += "";
 	return output;
 }
-function wrapScopedPreprocessorStyle(content, scoped, lang) {
-	return (0, _vizejs_native.wrapSfcScopedPreprocessorStyle)(content, scoped, lang);
-}
 function toStyleBlockInfo(block) {
 	return {
 		content: block.content,
@@ -371,7 +354,8 @@ function createVirtualStyleId(id) {
 	const { filename, query } = parseVueRequest(id);
 	const index = query.index ?? 0;
 	const lang = query.lang ?? "css";
-	const suffix = query.module !== false ? `.module.${lang}` : `.${lang}`;
+	const fileLang = query.scoped && require_webpack_styles.isPreprocessorLang(lang) ? "css" : lang;
+	const suffix = query.module !== false ? `.module.${fileLang}` : `.${fileLang}`;
 	const params = new URLSearchParams();
 	params.set("vue", "");
 	params.set("type", "style");
@@ -488,13 +472,18 @@ async function loadStyleBlock(id, options, cache) {
 		compiled = compileVueModule(request.filename, source, options, cache).compiled;
 	}
 	const block = compiled?.styles[index];
-	if (!block) return "";
-	return wrapScopedPreprocessorStyle(block.content, request.query.scoped, block.lang);
+	if (!compiled || !block) return "";
+	const source = require_webpack_styles.transformStyleVars(block.content, compiled.scopeId);
+	const scoped = request.query.scoped;
+	if (!scoped) return source;
+	return require_webpack_styles.scopeCss(block.lang && require_webpack_styles.isPreprocessorLang(block.lang) ? await require_webpack_styles.preprocessStyle(source, block.lang, request.filename, options.root) : source, scoped);
 }
-const vizeUnplugin = (0, unplugin.createUnplugin)((rawOptions = {}) => {
+const vizeUnplugin = (0, unplugin.createUnplugin)((rawOptions = {}, meta) => {
 	const options = normalizeOptions(rawOptions);
 	const filter = createFilter(options.include, options.exclude);
 	const cache = /* @__PURE__ */ new Map();
+	const webpackStyleFiles = meta.framework === "webpack";
+	let virtualModules;
 	return {
 		name: "unplugin-vize",
 		resolveId(id) {
@@ -504,7 +493,7 @@ const vizeUnplugin = (0, unplugin.createUnplugin)((rawOptions = {}) => {
 		},
 		loadInclude(id) {
 			if (options.hostCompiler) return false;
-			return isVirtualStyleId(id);
+			return !webpackStyleFiles && isVirtualStyleId(id);
 		},
 		async load(id) {
 			if (options.hostCompiler) return null;
@@ -538,7 +527,13 @@ const vizeUnplugin = (0, unplugin.createUnplugin)((rawOptions = {}) => {
 			const transformed = await stripTypeScript(id, generateOutput(compiled, {
 				isProduction: options.isProduction,
 				isDev: false,
-				filePath: id
+				filePath: id,
+				styleRequest: webpackStyleFiles ? (block, scoped) => {
+					const stylePath = require_webpack_styles.webpackStylePath(id, block, scoped);
+					if (!virtualModules) throw new Error("[vize] webpack style blocks need the plugin's virtual modules.");
+					virtualModules.writeModule(stylePath, require_webpack_styles.transformStyleVars(block.content, compiled.scopeId));
+					return stylePath;
+				} : void 0
 			}), options.sourceMap);
 			return {
 				code: transformed.code,
@@ -549,11 +544,15 @@ const vizeUnplugin = (0, unplugin.createUnplugin)((rawOptions = {}) => {
 			if (isVueFile(id)) cache.delete(id);
 		},
 		webpack(compiler) {
-			if (!options.hostCompiler) injectWebpackVueDefines(compiler, options.isProduction, options.compatibility.webpackVersion);
+			if (!options.hostCompiler) {
+				virtualModules = require_webpack_styles.findVirtualModules(compiler);
+				require_webpack_styles.registerWebpackStyleRule(compiler);
+				injectWebpackVueDefines(compiler, options.isProduction, options.compatibility.webpackVersion);
+			}
 		},
 		esbuild: {
 			onResolveFilter: /\.(?:vue|[jt]sx)(?:$|\?)/,
-			onLoadFilter: /\.(?:vue|[jt]sx)(?:$|\?)/,
+			onLoadFilter: /\.(?:vue|[jt]sx)(?:$|\?)|\.__vize_style_\d+\./,
 			loader(_code, id) {
 				const request = parseVueRequest(id);
 				if (request.query.type === "style") return request.query.module !== false ? "local-css" : "css";

package/dist/webpack-style-loader.cjs

@@ -0,0 +1,27 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_webpack_styles = require("./webpack-styles-BeXQWFdv.cjs");
+//#region src/webpack-style-loader.ts
+const SCOPE_QUERY = "?scope";
+const CSS_LOADER = /(?:^|[/\\])css-loader(?:[/\\]|$)/;
+function pitch() {
+	if (this.query === SCOPE_QUERY) return;
+	const self = this.loaders[this.loaderIndex];
+	const rest = this.loaders.filter((_, index) => index !== this.loaderIndex);
+	const cssLoaderIndex = rest.findIndex((loader) => CSS_LOADER.test(loader.path));
+	if (!self || cssLoaderIndex < 0) return;
+	const requests = rest.map((loader) => loader.request);
+	requests.splice(cssLoaderIndex + 1, 0, `${self.path}${SCOPE_QUERY}`);
+	const request = `!!${requests.join("!")}!${this.resource}`;
+	const specifier = JSON.stringify(this.utils?.contextify(this.context, request) ?? request);
+	return /\.module\.\w+$/.test(this.resourcePath) ? `export { default } from ${specifier};\nexport * from ${specifier};` : `export * from ${specifier};`;
+}
+function vizeStyleLoader(source) {
+	const scoped = require_webpack_styles.webpackStyleScope(this.resourcePath);
+	return scoped ? require_webpack_styles.scopeCss(source, scoped) : source;
+}
+//#endregion
+exports.default = vizeStyleLoader;
+exports.pitch = pitch;

package/dist/webpack-style-loader.d.cts

@@ -0,0 +1,20 @@
+//#region src/webpack-style-loader.d.ts
+interface LoaderEntry {
+  path: string;
+  request: string;
+}
+interface StyleLoaderContext {
+  loaders: LoaderEntry[];
+  loaderIndex: number;
+  query: string | Record<string, unknown>;
+  resource: string;
+  resourcePath: string;
+  context: string;
+  utils?: {
+    contextify(context: string, request: string): string;
+  };
+}
+declare function pitch(this: StyleLoaderContext): string | undefined;
+declare function vizeStyleLoader(this: StyleLoaderContext, source: string): string;
+//#endregion
+export { vizeStyleLoader as default, pitch };

package/dist/webpack-style-loader.d.mts

@@ -0,0 +1,20 @@
+//#region src/webpack-style-loader.d.ts
+interface LoaderEntry {
+  path: string;
+  request: string;
+}
+interface StyleLoaderContext {
+  loaders: LoaderEntry[];
+  loaderIndex: number;
+  query: string | Record<string, unknown>;
+  resource: string;
+  resourcePath: string;
+  context: string;
+  utils?: {
+    contextify(context: string, request: string): string;
+  };
+}
+declare function pitch(this: StyleLoaderContext): string | undefined;
+declare function vizeStyleLoader(this: StyleLoaderContext, source: string): string;
+//#endregion
+export { vizeStyleLoader as default, pitch };

package/dist/webpack-style-loader.mjs

@@ -0,0 +1,22 @@
+import { i as webpackStyleScope, s as scopeCss } from "./webpack-styles-8kxctaA7.mjs";
+//#region src/webpack-style-loader.ts
+const SCOPE_QUERY = "?scope";
+const CSS_LOADER = /(?:^|[/\\])css-loader(?:[/\\]|$)/;
+function pitch() {
+	if (this.query === SCOPE_QUERY) return;
+	const self = this.loaders[this.loaderIndex];
+	const rest = this.loaders.filter((_, index) => index !== this.loaderIndex);
+	const cssLoaderIndex = rest.findIndex((loader) => CSS_LOADER.test(loader.path));
+	if (!self || cssLoaderIndex < 0) return;
+	const requests = rest.map((loader) => loader.request);
+	requests.splice(cssLoaderIndex + 1, 0, `${self.path}${SCOPE_QUERY}`);
+	const request = `!!${requests.join("!")}!${this.resource}`;
+	const specifier = JSON.stringify(this.utils?.contextify(this.context, request) ?? request);
+	return /\.module\.\w+$/.test(this.resourcePath) ? `export { default } from ${specifier};\nexport * from ${specifier};` : `export * from ${specifier};`;
+}
+function vizeStyleLoader(source) {
+	const scoped = webpackStyleScope(this.resourcePath);
+	return scoped ? scopeCss(source, scoped) : source;
+}
+//#endregion
+export { vizeStyleLoader as default, pitch };

package/dist/webpack-styles-8kxctaA7.mjs

@@ -0,0 +1,72 @@
+import { createRequire } from "node:module";
+import { scopeViteCssForPipeline, transformViteCssVarsForPipeline } from "@vizejs/native";
+import path from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+//#region src/style-scope.ts
+const PREPROCESSOR_LANGS = new Set([
+	"scss",
+	"sass",
+	"less",
+	"stylus",
+	"styl"
+]);
+function isPreprocessorLang(lang) {
+	return lang != null && PREPROCESSOR_LANGS.has(lang);
+}
+function scopeCss(css, scoped) {
+	return scopeViteCssForPipeline(css, scoped);
+}
+/**
+* `v-bind()` in a delegated block, named like the compiled `useCssVars` call.
+* The plugin compiles without `isProd`, so both sides use the dev names.
+*/
+function transformStyleVars(css, scopeId) {
+	return transformViteCssVarsForPipeline(css, scopeId);
+}
+function loadPreprocessor(root, names, lang) {
+	const requireFromRoot = createRequire(path.join(root, "package.json"));
+	for (const name of names) try {
+		const loaded = requireFromRoot(name);
+		return loaded.default ?? loaded;
+	} catch (error) {
+		if (error.code !== "MODULE_NOT_FOUND") throw error;
+	}
+	throw new Error(`[vize] <style scoped lang="${lang}"> needs ${names.join(" or ")} installed in ${root}.`);
+}
+async function preprocessStyle(source, lang, filename, root) {
+	const dir = path.dirname(filename);
+	if (lang === "scss" || lang === "sass") return loadPreprocessor(root, ["sass", "sass-embedded"], lang).compileString(source, {
+		syntax: lang === "sass" ? "indented" : "scss",
+		url: pathToFileURL(filename),
+		loadPaths: [dir, root]
+	}).css;
+	if (lang === "less") return (await loadPreprocessor(root, ["less"], lang).render(source, {
+		filename,
+		paths: [dir, root]
+	})).css;
+	return loadPreprocessor(root, ["stylus"], lang)(source).set("filename", filename).include(dir).render();
+}
+//#endregion
+//#region src/webpack-styles.ts
+const SCOPED_STYLE_FILE = /\.__vize_style_\d+\.(data-v-[0-9a-f]+)(?:\.module)?\.\w+$/;
+function webpackStylePath(filePath, block, scoped) {
+	const scope = scoped ? `.${scoped}` : "";
+	const module = block.module === false ? "" : ".module";
+	return `${filePath}.__vize_style_${block.index}${scope}${module}.${block.lang ?? "css"}`;
+}
+function webpackStyleScope(resourcePath) {
+	return SCOPED_STYLE_FILE.exec(resourcePath)?.[1] ?? null;
+}
+function findVirtualModules(compiler) {
+	return compiler.options.plugins.find((plugin) => typeof plugin?.writeModule === "function");
+}
+/** Scope styles after the host's preprocessor loader; see webpack-style-loader.ts. */
+function registerWebpackStyleRule(compiler) {
+	const self = fileURLToPath(import.meta.url);
+	compiler.options.module?.rules?.unshift({
+		test: SCOPED_STYLE_FILE,
+		loader: path.join(path.dirname(self), `webpack-style-loader${path.extname(self)}`)
+	});
+}
+//#endregion
+export { isPreprocessorLang as a, transformStyleVars as c, webpackStyleScope as i, registerWebpackStyleRule as n, preprocessStyle as o, webpackStylePath as r, scopeCss as s, findVirtualModules as t };

package/dist/webpack-styles-BeXQWFdv.cjs

@@ -0,0 +1,148 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let node_module = require("node:module");
+let _vizejs_native = require("@vizejs/native");
+let node_path = require("node:path");
+node_path = __toESM(node_path, 1);
+let node_url = require("node:url");
+//#region src/style-scope.ts
+const PREPROCESSOR_LANGS = new Set([
+	"scss",
+	"sass",
+	"less",
+	"stylus",
+	"styl"
+]);
+function isPreprocessorLang(lang) {
+	return lang != null && PREPROCESSOR_LANGS.has(lang);
+}
+function scopeCss(css, scoped) {
+	return (0, _vizejs_native.scopeViteCssForPipeline)(css, scoped);
+}
+/**
+* `v-bind()` in a delegated block, named like the compiled `useCssVars` call.
+* The plugin compiles without `isProd`, so both sides use the dev names.
+*/
+function transformStyleVars(css, scopeId) {
+	return (0, _vizejs_native.transformViteCssVarsForPipeline)(css, scopeId);
+}
+function loadPreprocessor(root, names, lang) {
+	const requireFromRoot = (0, node_module.createRequire)(node_path.default.join(root, "package.json"));
+	for (const name of names) try {
+		const loaded = requireFromRoot(name);
+		return loaded.default ?? loaded;
+	} catch (error) {
+		if (error.code !== "MODULE_NOT_FOUND") throw error;
+	}
+	throw new Error(`[vize] <style scoped lang="${lang}"> needs ${names.join(" or ")} installed in ${root}.`);
+}
+async function preprocessStyle(source, lang, filename, root) {
+	const dir = node_path.default.dirname(filename);
+	if (lang === "scss" || lang === "sass") return loadPreprocessor(root, ["sass", "sass-embedded"], lang).compileString(source, {
+		syntax: lang === "sass" ? "indented" : "scss",
+		url: (0, node_url.pathToFileURL)(filename),
+		loadPaths: [dir, root]
+	}).css;
+	if (lang === "less") return (await loadPreprocessor(root, ["less"], lang).render(source, {
+		filename,
+		paths: [dir, root]
+	})).css;
+	return loadPreprocessor(root, ["stylus"], lang)(source).set("filename", filename).include(dir).render();
+}
+//#endregion
+//#region src/webpack-styles.ts
+const SCOPED_STYLE_FILE = /\.__vize_style_\d+\.(data-v-[0-9a-f]+)(?:\.module)?\.\w+$/;
+function webpackStylePath(filePath, block, scoped) {
+	const scope = scoped ? `.${scoped}` : "";
+	const module = block.module === false ? "" : ".module";
+	return `${filePath}.__vize_style_${block.index}${scope}${module}.${block.lang ?? "css"}`;
+}
+function webpackStyleScope(resourcePath) {
+	return SCOPED_STYLE_FILE.exec(resourcePath)?.[1] ?? null;
+}
+function findVirtualModules(compiler) {
+	return compiler.options.plugins.find((plugin) => typeof plugin?.writeModule === "function");
+}
+/** Scope styles after the host's preprocessor loader; see webpack-style-loader.ts. */
+function registerWebpackStyleRule(compiler) {
+	const self = (0, node_url.fileURLToPath)(require("url").pathToFileURL(__filename).href);
+	compiler.options.module?.rules?.unshift({
+		test: SCOPED_STYLE_FILE,
+		loader: node_path.default.join(node_path.default.dirname(self), `webpack-style-loader${node_path.default.extname(self)}`)
+	});
+}
+//#endregion
+Object.defineProperty(exports, "__toESM", {
+	enumerable: true,
+	get: function() {
+		return __toESM;
+	}
+});
+Object.defineProperty(exports, "findVirtualModules", {
+	enumerable: true,
+	get: function() {
+		return findVirtualModules;
+	}
+});
+Object.defineProperty(exports, "isPreprocessorLang", {
+	enumerable: true,
+	get: function() {
+		return isPreprocessorLang;
+	}
+});
+Object.defineProperty(exports, "preprocessStyle", {
+	enumerable: true,
+	get: function() {
+		return preprocessStyle;
+	}
+});
+Object.defineProperty(exports, "registerWebpackStyleRule", {
+	enumerable: true,
+	get: function() {
+		return registerWebpackStyleRule;
+	}
+});
+Object.defineProperty(exports, "scopeCss", {
+	enumerable: true,
+	get: function() {
+		return scopeCss;
+	}
+});
+Object.defineProperty(exports, "transformStyleVars", {
+	enumerable: true,
+	get: function() {
+		return transformStyleVars;
+	}
+});
+Object.defineProperty(exports, "webpackStylePath", {
+	enumerable: true,
+	get: function() {
+		return webpackStylePath;
+	}
+});
+Object.defineProperty(exports, "webpackStyleScope", {
+	enumerable: true,
+	get: function() {
+		return webpackStyleScope;
+	}
+});

package/dist/webpack.cjs

@@ -1,4 +1,4 @@
 //#region src/webpack.ts
-var webpack_default = require("./unplugin-BZZSLylM.cjs").vizeUnplugin.webpack;
+var webpack_default = require("./unplugin-BMwc3bUL.cjs").vizeUnplugin.webpack;
 //#endregion
 module.exports = webpack_default;

package/dist/webpack.mjs

@@ -1,4 +1,4 @@
-import { n as vizeUnplugin } from "./unplugin-LGSCePN4.mjs";
+import { n as vizeUnplugin } from "./unplugin-BMBg2ffv.mjs";
 //#region src/webpack.ts
 var webpack_default = vizeUnplugin.webpack;
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizejs/unplugin",
-  "version": "0.443.0",
+  "version": "0.457.0",
   "description": "Experimental Vue SFC integrations for Rollup, Rolldown, Webpack, esbuild, and Babel powered by Vize",
   "keywords": [
     "babel",
@@ -68,7 +68,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@vizejs/native": "0.443.0",
+    "@vizejs/native": "0.457.0",
     "oxc-transform": "0.144.0",
     "unplugin": "3.3.0"
   },